-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature(frontend): Move service worker to frontend
### Changelog: * Feature(frontend): Move service worker to frontend. * Chore(backend): Remove jsmin. * Chore(backend): Remove JSMinTemplateResponse. * Chore(backend): Bump version. Closes: #651+ See merge request vst/vst-utils!684
- Loading branch information
Showing
31 changed files
with
2,656 additions
and
340 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
declare const clients: Clients; | ||
declare const self: ServiceWorkerGlobalScope; | ||
interface PushSubscriptionChangeEvent extends ExtendableEvent { | ||
readonly oldSubscription: PushSubscription | null; | ||
readonly newSubscription: PushSubscription | null; | ||
} | ||
|
||
export const handlePush = (defaultNotificationOptions?: NotificationOptions) => { | ||
return (e: PushEvent) => { | ||
try { | ||
if (!e.data) { | ||
console.warn('Push event has no data'); | ||
return; | ||
} | ||
|
||
const { type, data } = e.data.json(); | ||
if (type === 'notification') { | ||
self.registration.showNotification(data.title, { | ||
...(defaultNotificationOptions ?? {}), | ||
...data.options, | ||
}); | ||
} | ||
} catch (err) { | ||
console.warn('Error handling push event:', err); | ||
} | ||
}; | ||
}; | ||
|
||
export const handleNotificationClick = () => { | ||
return (e: NotificationEvent) => { | ||
e.notification.close(); | ||
if (!e.notification.data || !e.notification.data.url) { | ||
return; | ||
} | ||
e.waitUntil( | ||
clients.matchAll({ type: 'window' }).then((clientsArr) => { | ||
const client = clientsArr[0]; | ||
if (client) { | ||
return client.navigate(e.notification.data.url).then(() => client.focus()); | ||
} | ||
|
||
return clients.openWindow(e.notification.data.url).then((client) => { | ||
if (client) { | ||
return client.focus(); | ||
} | ||
}); | ||
}), | ||
); | ||
}; | ||
}; | ||
|
||
export const handlePushSubscriptionChange = (apiUrl?: string | URL) => { | ||
return (e: Event) => { | ||
const event = e as PushSubscriptionChangeEvent; | ||
if (!event.oldSubscription || !event.oldSubscription.endpoint) { | ||
console.warn('Push subscription change event has no old subscription'); | ||
return; | ||
} | ||
event.waitUntil( | ||
self.registration.pushManager | ||
.subscribe(event.oldSubscription.options) | ||
.then((newSubscription) => { | ||
const data = { | ||
old_endpoint: event.oldSubscription!.endpoint, | ||
subscription_data: newSubscription.toJSON(), | ||
}; | ||
const url = new URL('webpush/pushsubscriptionchange/', apiUrl ? apiUrl : '/api/'); | ||
return fetch(url, { | ||
method: 'POST', | ||
headers: { | ||
'Content-Type': 'application/json', | ||
}, | ||
body: JSON.stringify(data), | ||
}); | ||
}) | ||
.catch((err) => { | ||
console.warn(err); | ||
}), | ||
); | ||
}; | ||
}; | ||
|
||
export const handleNotificationsMessage = (event: ExtendableMessageEvent) => { | ||
if (event.data === 'authPageOpened') { | ||
event.waitUntil( | ||
self.registration.pushManager.getSubscription().then((subscription) => { | ||
if (subscription) { | ||
return subscription.unsubscribe(); | ||
} | ||
}), | ||
); | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
import { | ||
handlePush, | ||
handleNotificationClick, | ||
handlePushSubscriptionChange, | ||
handleNotificationsMessage, | ||
} from './notification-handler'; | ||
|
||
declare const self: ServiceWorkerGlobalScope & { | ||
apiUrl: string | undefined; | ||
defaultNotificationOptions: NotificationOptions; | ||
}; | ||
|
||
const OFFLINE_PAGE = '/offline.html'; | ||
const FAVICON = '/favicon.ico'; | ||
|
||
self.addEventListener('push', (e: PushEvent) => handlePush(self.defaultNotificationOptions)(e)); | ||
self.addEventListener('notificationclick', (e: NotificationEvent) => handleNotificationClick()(e)); | ||
self.addEventListener('pushsubscriptionchange', (e: Event) => handlePushSubscriptionChange(self.apiUrl)(e)); | ||
self.addEventListener('message', handleNotificationsMessage); | ||
|
||
self.addEventListener('install', () => { | ||
const url = new URL(self.serviceWorker.scriptURL); | ||
|
||
const encodedOptions = url.searchParams.get('options'); | ||
if (encodedOptions) { | ||
try { | ||
const { apiUrl, defaultOptions } = JSON.parse(decodeURIComponent(encodedOptions)); | ||
self.defaultNotificationOptions = defaultOptions || {}; | ||
self.apiUrl = apiUrl || undefined; | ||
} catch (error) { | ||
console.error('Error decoding options:', error); | ||
} | ||
} else { | ||
console.warn('No "options" parameter found in scriptURL.'); | ||
} | ||
}); | ||
|
||
function updateCache(): Promise<void> { | ||
return caches.open('offline').then((cache) => { | ||
return cache.addAll([OFFLINE_PAGE, FAVICON]); | ||
}); | ||
} | ||
|
||
self.addEventListener('activate', (event: ExtendableEvent) => { | ||
event.waitUntil(updateCache().then(() => self.clients.claim())); | ||
}); | ||
|
||
self.addEventListener('message', (event) => { | ||
if (event.data === 'OFFLINE_CACHE_UPDATE') { | ||
updateCache(); | ||
} | ||
if (event.data === 'triggerPushSubscriptionChange') { | ||
self.registration.pushManager.getSubscription().then((subscription) => { | ||
const pushChangeEvent = new Event('pushsubscriptionchange'); | ||
Object.assign(pushChangeEvent, { | ||
oldSubscription: subscription, | ||
}); | ||
self.dispatchEvent(pushChangeEvent); | ||
}); | ||
} | ||
}); | ||
|
||
self.addEventListener('fetch', (event: FetchEvent) => { | ||
const request = event.request; | ||
try { | ||
if ( | ||
request.method === 'GET' && | ||
(!request.headers || | ||
!request.headers.get('accept') || | ||
request.headers.get('accept')?.includes('text/html')) | ||
) { | ||
event.respondWith( | ||
fetch(request).catch(() => | ||
caches.match(OFFLINE_PAGE, { ignoreVary: true }).then((cachedResponse) => { | ||
if (cachedResponse) { | ||
return cachedResponse; | ||
} | ||
return new Response('Offline page not found', { status: 503 }); | ||
}), | ||
), | ||
); | ||
} else if (request.method === 'GET' && request.url.endsWith(FAVICON)) { | ||
event.respondWith( | ||
fetch(request).catch(() => | ||
caches.match(FAVICON, { ignoreVary: true }).then((cachedResponse) => { | ||
if (cachedResponse) { | ||
return cachedResponse; | ||
} | ||
return new Response('Favicon not found', { status: 404 }); | ||
}), | ||
), | ||
); | ||
} | ||
} catch (e) { | ||
console.log('SW error on:', request, e); | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,8 @@ | ||
{ | ||
"files": [], | ||
"references": [ | ||
{ "path": "./tsconfig.app.json" }, | ||
{ "path": "./tsconfig.node.json" } | ||
{ "path": "./tsconfig.app.json" }, | ||
{ "path": "./tsconfig.node.json" }, | ||
{ "path": "./tsconfig.sw.json" } | ||
] | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
{ | ||
"compilerOptions": { | ||
"module": "ESNext", | ||
"moduleResolution": "bundler", | ||
"outDir": "dist", | ||
"lib": ["WebWorker", "ES2015"], | ||
"target": "esnext", | ||
"strict": true | ||
}, | ||
"include": ["service-worker/**/*"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.