-
-
Notifications
You must be signed in to change notification settings - Fork 636
/
sw.js
257 lines (221 loc) · 8.55 KB
/
sw.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
/* eslint-disable import/no-extraneous-dependencies */
import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from "workbox-precaching";
import { NavigationRoute, registerRoute } from "workbox-routing";
import { NetworkFirst } from "workbox-strategies";
import { clientsClaim } from "workbox-core";
import { dbAsync } from "../src/app/db";
import { toNotificationParams, icon, badge } from "../src/app/notificationUtils";
import i18n from "../src/app/i18n";
/**
* General docs for service workers and PWAs:
* https://vite-pwa-org.netlify.app/guide/
* https://developer.chrome.com/docs/workbox/
*
* This file uses the (event) => event.waitUntil(<promise>) pattern.
* This is because the event handler itself cannot be async, but
* the service worker needs to stay active while the promise completes.
*/
const broadcastChannel = new BroadcastChannel("web-push-broadcast");
const addNotification = async ({ subscriptionId, message }) => {
const db = await dbAsync();
await db.notifications.add({
...message,
subscriptionId,
// New marker (used for bubble indicator); cannot be boolean; Dexie index limitation
new: 1,
});
await db.subscriptions.update(subscriptionId, {
last: message.id,
});
const badgeCount = await db.notifications.where({ new: 1 }).count();
console.log("[ServiceWorker] Setting new app badge count", { badgeCount });
self.navigator.setAppBadge?.(badgeCount);
};
/**
* Handle a received web push message and show notification.
*
* Since the service worker cannot play a sound, we send a broadcast to the web app, which (if it is running)
* receives the broadcast and plays a sound (see web/src/app/WebPush.js).
*/
const handlePushMessage = async (data) => {
const { subscription_id: subscriptionId, message } = data;
broadcastChannel.postMessage(message); // To potentially play sound
await addNotification({ subscriptionId, message });
await self.registration.showNotification(
...toNotificationParams({
subscriptionId,
message,
defaultTitle: message.topic,
topicRoute: new URL(message.topic, self.location.origin).toString(),
})
);
};
/**
* Handle a received web push subscription expiring.
*/
const handlePushSubscriptionExpiring = async (data) => {
await self.registration.showNotification(i18n.t("web_push_subscription_expiring_title"), {
body: i18n.t("web_push_subscription_expiring_body"),
icon,
data,
badge,
});
};
/**
* Handle unknown push message. We can't ignore the push, since
* permission can be revoked by the browser.
*/
const handlePushUnknown = async (data) => {
await self.registration.showNotification(i18n.t("web_push_unknown_notification_title"), {
body: i18n.t("web_push_unknown_notification_body"),
icon,
data,
badge,
});
};
/**
* Handle a received web push notification
* @param {object} data see server/types.go, type webPushPayload
*/
const handlePush = async (data) => {
if (data.event === "message") {
await handlePushMessage(data);
} else if (data.event === "subscription_expiring") {
await handlePushSubscriptionExpiring(data);
} else {
await handlePushUnknown(data);
}
};
/**
* Handle a user clicking on the displayed notification from `showNotification`.
* This is also called when the user clicks on an action button.
*/
const handleClick = async (event) => {
const clients = await self.clients.matchAll({ type: "window" });
const rootUrl = new URL(self.location.origin);
const rootClient = clients.find((client) => client.url === rootUrl.toString());
// perhaps open on another topic
const fallbackClient = clients[0];
if (!event.notification.data?.message) {
// e.g. something other than a message, e.g. a subscription_expiring event
// simply open the web app on the root route (/)
if (rootClient) {
rootClient.focus();
} else if (fallbackClient) {
fallbackClient.focus();
fallbackClient.navigate(rootUrl.toString());
} else {
self.clients.openWindow(rootUrl);
}
event.notification.close();
} else {
const { message, topicRoute } = event.notification.data;
if (event.action) {
const action = event.notification.data.message.actions.find(({ label }) => event.action === label);
if (action.action === "view") {
self.clients.openWindow(action.url);
} else if (action.action === "http") {
try {
const response = await fetch(action.url, {
method: action.method ?? "POST",
headers: action.headers ?? {},
body: action.body,
});
if (!response.ok) {
throw new Error(`HTTP ${response.status} ${response.statusText}`);
}
} catch (e) {
console.error("[ServiceWorker] Error performing http action", e);
self.registration.showNotification(`${i18n.t("notifications_actions_failed_notification")}: ${action.label} (${action.action})`, {
body: e.message,
icon,
badge,
});
}
}
if (action.clear) {
event.notification.close();
}
} else if (message.click) {
self.clients.openWindow(message.click);
event.notification.close();
} else {
// If no action was clicked, and the message doesn't have a click url:
// - first try focus an open tab on the `/:topic` route
// - if not, use an open tab on the root route (`/`) and navigate to the topic
// - if not, use whichever tab we have open and navigate to the topic
// - finally, open a new tab focused on the topic
const topicClient = clients.find((client) => client.url === topicRoute);
if (topicClient) {
topicClient.focus();
} else if (rootClient) {
rootClient.focus();
rootClient.navigate(topicRoute);
} else if (fallbackClient) {
fallbackClient.focus();
fallbackClient.navigate(topicRoute);
} else {
self.clients.openWindow(topicRoute);
}
event.notification.close();
}
}
};
self.addEventListener("install", () => {
console.log("[ServiceWorker] Installed");
self.skipWaiting();
});
self.addEventListener("activate", () => {
console.log("[ServiceWorker] Activated");
self.skipWaiting();
});
// There's no good way to test this, and Chrome doesn't seem to implement this,
// so leaving it for now
self.addEventListener("pushsubscriptionchange", (event) => {
console.log("[ServiceWorker] PushSubscriptionChange");
console.log(event);
});
self.addEventListener("push", (event) => {
const data = event.data.json();
console.log("[ServiceWorker] Received Web Push Event", { event, data });
event.waitUntil(handlePush(data));
});
self.addEventListener("notificationclick", (event) => {
console.log("[ServiceWorker] NotificationClick");
event.waitUntil(handleClick(event));
});
// See https://vite-pwa-org.netlify.app/guide/inject-manifest.html#service-worker-code
// self.__WB_MANIFEST is the workbox injection point that injects the manifest of the
// vite dist files and their revision ids, for example:
// [{"revision":"aaabbbcccdddeeefff12345","url":"/index.html"},...]
precacheAndRoute(
// eslint-disable-next-line no-underscore-dangle
self.__WB_MANIFEST
);
// Claim all open windows
clientsClaim();
// Delete any cached old dist files from previous service worker versions
cleanupOutdatedCaches();
if (!import.meta.env.DEV) {
// we need the app_root setting, so we import the config.js file from the go server
// this does NOT include the same base_url as the web app running in a window,
// since we don't have access to `window` like in `src/app/config.js`
self.importScripts("/config.js");
// this is the fallback single-page-app route, matching vite.config.js PWA config,
// and is served by the go web server. It is needed for the single-page-app to work.
// https://developer.chrome.com/docs/workbox/modules/workbox-routing/#how-to-register-a-navigation-route
registerRoute(
new NavigationRoute(createHandlerBoundToURL("/app.html"), {
allowlist: [
// the app root itself, could be /, or not
new RegExp(`^${config.app_root}$`),
],
})
);
// the manifest excludes config.js (see vite.config.js) since the dist-file differs from the
// actual config served by the go server. this adds it back with `NetworkFirst`, so that the
// most recent config from the go server is cached, but the app still works if the network
// is unavailable. this is important since there's no "refresh" button in the installed pwa
// to force a reload.
registerRoute(({ url }) => url.pathname === "/config.js", new NetworkFirst());
}