Skip to content

Commit 35663f9

Browse files
aaronammaaronamm
committed
WIP copy to clipboard
1 parent 737dd7c commit 35663f9

File tree

3 files changed

+119
-24
lines changed

3 files changed

+119
-24
lines changed

‎PushMessageFromServer.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,16 @@ webPush.setVapidDetails(
2222
const pushSubscription =
2323
{
2424
"endpoint": "",
25+
"expirationTime": null,
2526
"keys": {
2627
"p256dh": "",
2728
"auth": ""
2829
}
29-
};
30+
}
3031

3132
const payload = {
3233
title: `Hello at ${(new Date()).toISOString()}`,
33-
url: 'https://www.dotnetthailand.com'
34+
url: 'https://www.dotnetthailand.com/web-frameworks/orchard-core-cms/why-orchard-core-cms'
3435
};
3536

3637
webPush.sendNotification(pushSubscription, JSON.stringify(payload));

‎public/index.html‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,39 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1" />
6-
<title>React App</title>
7-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
8-
</head>
9-
<body>
10-
<noscript>You need to enable JavaScript to run this app.</noscript>
11-
<div id="root"></div>
12-
</body>
13-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>React App</title>
8+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
9+
</head>
10+
11+
<body>
12+
<noscript>You need to enable JavaScript to run this app.</noscript>
13+
<div id="root"></div>
14+
<script>
15+
navigator.serviceWorker.addEventListener('message', async (event) => {
16+
if (event.data.type === 'clipboard') {
17+
18+
//setTimeout(() => { copyContent(event.data.msg); }, 5000);
19+
await copyContent(event.data.content);
20+
console.log('done');
21+
}
22+
});
23+
24+
// https://www.freecodecamp.org/news/copy-text-to-clipboard-javascript/
25+
async function copyContent(message) {
26+
try {
27+
await navigator.clipboard.writeText(message);
28+
alert("copy");
29+
/* Resolved - text copied to clipboard successfully */
30+
window.close();
31+
} catch (err) {
32+
console.error('Failed to copy: ', err);
33+
/* Rejected - text failed to copy to the clipboard */
34+
}
35+
}
36+
</script>
37+
</body>
38+
39+
</html>

‎public/service-worker.js‎

Lines changed: 79 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -37,26 +37,94 @@ self.addEventListener('push', (event) => {
3737

3838
});
3939

40-
// https://stackoverflow.com/a/63917373/1872200
41-
// async function is a function that synchronously returns a promise
42-
async function showNotificationAsync(payload, options) {
43-
await self.registration.showNotification(payload.title, options);
44-
}
45-
4640
// https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event#examples
41+
// self.addEventListener('notificationclick', (event) => {
42+
// const { action, notification } = event;
43+
// notification.close();
44+
45+
// if (action === 'open-a-link') {
46+
// // https://developer.mozilla.org/en-US/docs/Web/API/Clients/openWindow#return_value
47+
// // https://web-push-book.gauntface.com/common-notification-patterns/
48+
// //clients.openWindow(notification.data.url);
49+
// event.waitUntil(openLink(notification.data));
50+
// }
51+
// });
52+
53+
4754
self.addEventListener('notificationclick', (event) => {
4855
const { action, notification } = event;
4956
notification.close();
5057

51-
if (action === 'open-a-link') {
52-
// https://developer.mozilla.org/en-US/docs/Web/API/Clients/openWindow#return_value
58+
const { url } = notification.data;
59+
event.waitUntil(sendMessage(event, url));
60+
});
61+
62+
63+
// https://developer.mozilla.org/en-US/docs/Web/API/Clients
64+
async function sendMessage(event, content) {
65+
// If we didn't find an existing chat window,
66+
// open a new one:
67+
// https://stackoverflow.com/questions/61862872/how-to-copy-web-notification-content-to-clipboard
68+
// https://stackoverflow.com/a/34250261/1872200
69+
//var client = await clients.openWindow('/');
70+
//client.focus();
71+
72+
// // Exit early if we don't have access to the client.
73+
// // Eg, if it's cross-origin.
74+
// if (!event.clientId) return;
75+
76+
// // Get the client.
77+
// const client = await clients.get(event.clientId);
78+
// // Exit early if we don't get the client.
79+
// // Eg, if it closed.
80+
// if (!client) return;
81+
82+
83+
const allClients = await clients.matchAll({
84+
includeUncontrolled: true,
85+
type: 'window',
86+
});
87+
88+
let chatClient;
89+
90+
// Let's see if we already have a chat window open:
91+
for (const client of allClients) {
92+
const url = new URL(client.url);
93+
5394
// https://web-push-book.gauntface.com/common-notification-patterns/
54-
//clients.openWindow(notification.data.url);
55-
event.waitUntil(openLink(notification.data));
95+
if (url.pathname === '/') {
96+
// Excellent, let's use it!
97+
await client.focus();
98+
chatClient = client;
99+
break;
100+
}
56101
}
57-
});
102+
103+
// If we didn't find an existing chat window,
104+
// open a new one:
105+
if (!chatClient) {
106+
chatClient = await clients.openWindow('/');
107+
//await chatClient.focus();
108+
}
109+
110+
111+
// Send a message to the client.
112+
chatClient.postMessage({
113+
type: 'clipboard',
114+
content: content,
115+
});
116+
117+
}
58118

59119
async function openLink(data) {
60120
// https://developer.mozilla.org/en-US/docs/Web/API/Clients/openWindow#return_value
61121
await clients.openWindow(data.url);
62122
}
123+
124+
125+
// https://stackoverflow.com/a/63917373/1872200
126+
// async function is a function that synchronously returns a promise
127+
async function showNotificationAsync(payload, options) {
128+
await self.registration.showNotification(payload.title, options);
129+
}
130+

0 commit comments

Comments
 (0)