Simplified service worker
This commit is contained in:
parent
45643bdd92
commit
08186a9c92
@ -49,6 +49,7 @@ export default class Application {
|
|||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let request = new XMLHttpRequest()
|
let request = new XMLHttpRequest()
|
||||||
|
|
||||||
|
request.timeout = 20000
|
||||||
request.onerror = () => reject(new Error("You are either offline or the requested page doesn't exist."))
|
request.onerror = () => reject(new Error("You are either offline or the requested page doesn't exist."))
|
||||||
request.ontimeout = () => reject(new Error("The page took too much time to respond."))
|
request.ontimeout = () => reject(new Error("The page took too much time to respond."))
|
||||||
request.onload = () => {
|
request.onload = () => {
|
||||||
|
|||||||
@ -32,369 +32,6 @@
|
|||||||
// E-Tags that we served for a given URL
|
// E-Tags that we served for a given URL
|
||||||
// const ETAGS = new Map<string, string>()
|
// const ETAGS = new Map<string, string>()
|
||||||
|
|
||||||
// MyServiceWorker is the process that controls all the tabs in a browser.
|
|
||||||
class MyServiceWorker {
|
|
||||||
cache: MyCache
|
|
||||||
reloads: Map<string, Promise<Response>>
|
|
||||||
excludeCache: Set<string>
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
this.cache = new MyCache("v-6")
|
|
||||||
this.reloads = new Map<string, Promise<Response>>()
|
|
||||||
|
|
||||||
// When these patterns are matched for the request URL, we exclude them from being
|
|
||||||
// served cache-first and instead serve them via a network request.
|
|
||||||
// Note that the service worker URL is automatically excluded from fetch events
|
|
||||||
// and therefore doesn't need to be added here.
|
|
||||||
this.excludeCache = new Set<string>([
|
|
||||||
// API requests
|
|
||||||
"/api/",
|
|
||||||
|
|
||||||
// PayPal stuff
|
|
||||||
"/paypal/",
|
|
||||||
|
|
||||||
// List imports
|
|
||||||
"/import/",
|
|
||||||
|
|
||||||
// Infinite scrolling
|
|
||||||
"/from/",
|
|
||||||
|
|
||||||
// Chrome extension
|
|
||||||
"chrome-extension",
|
|
||||||
|
|
||||||
// Authorization paths /auth/ and /logout are not listed here because they are handled in a special way.
|
|
||||||
])
|
|
||||||
|
|
||||||
self.addEventListener("install", (evt: InstallEvent) => evt.waitUntil(this.onInstall(evt)))
|
|
||||||
self.addEventListener("activate", (evt: any) => evt.waitUntil(this.onActivate(evt)))
|
|
||||||
self.addEventListener("fetch", (evt: FetchEvent) => evt.waitUntil(this.onRequest(evt)))
|
|
||||||
self.addEventListener("message", (evt: any) => evt.waitUntil(this.onMessage(evt)))
|
|
||||||
self.addEventListener("push", (evt: PushEvent) => evt.waitUntil(this.onPush(evt)))
|
|
||||||
self.addEventListener("pushsubscriptionchange", (evt: any) => evt.waitUntil(this.onPushSubscriptionChange(evt)))
|
|
||||||
self.addEventListener("notificationclick", (evt: NotificationEvent) => evt.waitUntil(this.onNotificationClick(evt)))
|
|
||||||
}
|
|
||||||
|
|
||||||
async onInstall(evt: InstallEvent) {
|
|
||||||
console.log("service worker install")
|
|
||||||
|
|
||||||
await self.skipWaiting()
|
|
||||||
await this.installCache()
|
|
||||||
}
|
|
||||||
|
|
||||||
onActivate(evt: any) {
|
|
||||||
console.log("service worker activate")
|
|
||||||
|
|
||||||
// Only keep current version of the cache and delete old caches
|
|
||||||
let cacheWhitelist = [this.cache.version]
|
|
||||||
|
|
||||||
let deleteOldCache = caches.keys().then(keyList => {
|
|
||||||
return Promise.all(keyList.map(key => {
|
|
||||||
if(cacheWhitelist.indexOf(key) === -1) {
|
|
||||||
return caches.delete(key)
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
|
|
||||||
// Immediate claim helps us gain control over a new client immediately
|
|
||||||
let immediateClaim = self.clients.claim()
|
|
||||||
|
|
||||||
return Promise.all([
|
|
||||||
deleteOldCache,
|
|
||||||
immediateClaim
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
// onRequest intercepts all browser requests.
|
|
||||||
// Simply returning, without calling evt.respondWith(),
|
|
||||||
// will let the browser deal with the request normally.
|
|
||||||
async onRequest(evt: FetchEvent) {
|
|
||||||
let request = evt.request as Request
|
|
||||||
|
|
||||||
// If it's not a GET request, fetch it normally.
|
|
||||||
// Let the browser handle XHR upload requests via POST,
|
|
||||||
// so that we can receive upload progress events.
|
|
||||||
if(request.method !== "GET") {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// DevTools opening will trigger these "only-if-cached" requests.
|
|
||||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=823392
|
|
||||||
if((request.cache as string) === "only-if-cached" && request.mode !== "same-origin") {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Video files are always loaded over the network.
|
|
||||||
// We are defaulting to the normal browser handler here
|
|
||||||
// so we can see the HTTP 206 partial responses in DevTools
|
|
||||||
// and it also seems to have slightly smoother video playback.
|
|
||||||
if(request.url.includes("/videos/")) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
return evt.respondWith(fetch(request))
|
|
||||||
|
|
||||||
// // Exclude certain URLs from being cached.
|
|
||||||
// for(let pattern of this.excludeCache.keys()) {
|
|
||||||
// if(request.url.includes(pattern)) {
|
|
||||||
// return
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // If the request has cache set to "force-cache", return a cache-only response.
|
|
||||||
// // This is used in reloads to avoid generating a 2nd request after a cache refresh.
|
|
||||||
// if(request.headers.get("X-Force-Cache") === "true") {
|
|
||||||
// return evt.respondWith(this.cache.serve(request))
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // --------------------------------------------------------------------------------
|
|
||||||
// // Cross-origin requests.
|
|
||||||
// // --------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
// // These hosts don't support CORS. Always load via network.
|
|
||||||
// if(request.url.startsWith("https://img.youtube.com/")) {
|
|
||||||
// return
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Use CORS for cross-origin requests.
|
|
||||||
// if(!request.url.startsWith("https://notify.moe/") && !request.url.startsWith("https://beta.notify.moe/")) {
|
|
||||||
// request = new Request(request.url, {
|
|
||||||
// credentials: "omit",
|
|
||||||
// mode: "cors"
|
|
||||||
// })
|
|
||||||
// } else {
|
|
||||||
// // let relativePath = trimPrefix(request.url, "https://notify.moe")
|
|
||||||
// // relativePath = trimPrefix(relativePath, "https://beta.notify.moe")
|
|
||||||
// // console.log(relativePath)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // --------------------------------------------------------------------------------
|
|
||||||
// // Network refresh.
|
|
||||||
// // --------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
// // Save response in cache.
|
|
||||||
// let saveResponseInCache = (response: Response) => {
|
|
||||||
// let contentType = response.headers.get("Content-Type")
|
|
||||||
|
|
||||||
// // Don't cache anything other than text, styles, scripts, fonts and images.
|
|
||||||
// if(!contentType.includes("text/") && !contentType.includes("application/javascript") && !contentType.includes("image/") && !contentType.includes("font/")) {
|
|
||||||
// return response
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Save response in cache.
|
|
||||||
// if(response.ok) {
|
|
||||||
// let clone = response.clone()
|
|
||||||
// this.cache.store(request, clone)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return response
|
|
||||||
// }
|
|
||||||
|
|
||||||
// let onResponse = (response: Response | null) => {
|
|
||||||
// return response
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Refresh resource via a network request.
|
|
||||||
// let refresh = fetch(request).then(saveResponseInCache)
|
|
||||||
|
|
||||||
// // --------------------------------------------------------------------------------
|
|
||||||
// // Final response.
|
|
||||||
// // --------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
// // Clear cache on authentication and fetch it normally.
|
|
||||||
// if(request.url.includes("/auth/") || request.url.includes("/logout")) {
|
|
||||||
// return evt.respondWith(this.cache.clear().then(() => refresh))
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // If the request has cache set to "no-cache",
|
|
||||||
// // return the network-only response even if it fails.
|
|
||||||
// if(request.headers.get("X-No-Cache") === "true") {
|
|
||||||
// return evt.respondWith(refresh)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Styles and scripts will be served via network first and fallback to cache.
|
|
||||||
// if(request.url.endsWith("/styles") || request.url.endsWith("/scripts")) {
|
|
||||||
// evt.respondWith(this.networkFirst(request, refresh, onResponse))
|
|
||||||
// return refresh
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // --------------------------------------------------------------------------------
|
|
||||||
// // Default behavior for most requests.
|
|
||||||
// // --------------------------------------------------------------------------------
|
|
||||||
|
|
||||||
// // // Respond via cache first.
|
|
||||||
// // evt.respondWith(this.cacheFirst(request, refresh, onResponse))
|
|
||||||
// // return refresh
|
|
||||||
|
|
||||||
// // Serve via network first and fallback to cache.
|
|
||||||
// evt.respondWith(this.networkFirst(request, refresh, onResponse))
|
|
||||||
// return refresh
|
|
||||||
}
|
|
||||||
|
|
||||||
// onMessage is called when the service worker receives a message from a client (browser tab).
|
|
||||||
async onMessage(evt: ServiceWorkerMessageEvent) {
|
|
||||||
let message = JSON.parse(evt.data)
|
|
||||||
let clientId = (evt.source as any).id
|
|
||||||
let client = await MyClient.get(clientId)
|
|
||||||
|
|
||||||
client.onMessage(message)
|
|
||||||
}
|
|
||||||
|
|
||||||
// onPush is called on push events and requires the payload to contain JSON information about the notification.
|
|
||||||
onPush(evt: PushEvent) {
|
|
||||||
var payload = evt.data ? evt.data.json() : {}
|
|
||||||
|
|
||||||
// Notify all clients about the new notification so they can update their notification counter
|
|
||||||
this.broadcast({
|
|
||||||
type: "new notification"
|
|
||||||
})
|
|
||||||
|
|
||||||
// Display the notification
|
|
||||||
return self.registration.showNotification(payload.title, {
|
|
||||||
body: payload.message,
|
|
||||||
icon: payload.icon,
|
|
||||||
data: payload.link,
|
|
||||||
badge: "https://media.notify.moe/images/brand/64.png"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onPushSubscriptionChange(evt: any) {
|
|
||||||
return self.registration.pushManager.subscribe(evt.oldSubscription.options)
|
|
||||||
.then(async subscription => {
|
|
||||||
console.log("send subscription to server...")
|
|
||||||
|
|
||||||
let rawKey = subscription.getKey("p256dh")
|
|
||||||
let key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : ""
|
|
||||||
|
|
||||||
let rawSecret = subscription.getKey("auth")
|
|
||||||
let secret = rawSecret ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawSecret))) : ""
|
|
||||||
|
|
||||||
let endpoint = subscription.endpoint
|
|
||||||
|
|
||||||
let pushSubscription = {
|
|
||||||
endpoint,
|
|
||||||
p256dh: key,
|
|
||||||
auth: secret,
|
|
||||||
platform: navigator.platform,
|
|
||||||
userAgent: navigator.userAgent,
|
|
||||||
screen: {
|
|
||||||
width: window.screen.width,
|
|
||||||
height: window.screen.height
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let response = await fetch("/api/me", {credentials: "same-origin"})
|
|
||||||
let user = await response.json()
|
|
||||||
|
|
||||||
return fetch("/api/pushsubscriptions/" + user.id + "/add", {
|
|
||||||
method: "POST",
|
|
||||||
credentials: "same-origin",
|
|
||||||
body: JSON.stringify(pushSubscription)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// onNotificationClick is called when the user clicks on a notification.
|
|
||||||
onNotificationClick(evt: NotificationEvent) {
|
|
||||||
let notification = evt.notification
|
|
||||||
notification.close()
|
|
||||||
|
|
||||||
return self.clients.matchAll().then(function(clientList) {
|
|
||||||
// If we have a link, use that link to open a new window.
|
|
||||||
let url = notification.data
|
|
||||||
|
|
||||||
if(url) {
|
|
||||||
return self.clients.openWindow(url)
|
|
||||||
}
|
|
||||||
|
|
||||||
// If there is at least one client, focus it.
|
|
||||||
if(clientList.length > 0) {
|
|
||||||
return (clientList[0] as WindowClient).focus()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Otherwise open a new window
|
|
||||||
return self.clients.openWindow("https://notify.moe")
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Broadcast sends a message to all clients (open tabs etc.)
|
|
||||||
broadcast(msg: object) {
|
|
||||||
const msgText = JSON.stringify(msg)
|
|
||||||
|
|
||||||
self.clients.matchAll().then(function(clientList) {
|
|
||||||
for(let client of clientList) {
|
|
||||||
client.postMessage(msgText)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// installCache is called when the service worker is installed for the first time.
|
|
||||||
async installCache() {
|
|
||||||
let urls = [
|
|
||||||
"/",
|
|
||||||
"/scripts",
|
|
||||||
"/styles",
|
|
||||||
"/manifest.json",
|
|
||||||
"https://media.notify.moe/images/elements/noise-strong.png",
|
|
||||||
]
|
|
||||||
|
|
||||||
let promises = []
|
|
||||||
|
|
||||||
for(let url of urls) {
|
|
||||||
let request = new Request(url, {
|
|
||||||
credentials: "same-origin",
|
|
||||||
mode: "cors"
|
|
||||||
})
|
|
||||||
|
|
||||||
let promise = fetch(request).then(response => this.cache.store(request, response))
|
|
||||||
promises.push(promise)
|
|
||||||
}
|
|
||||||
|
|
||||||
return Promise.all(promises)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Serve network first.
|
|
||||||
// Fall back to cache.
|
|
||||||
async networkFirst(request: Request, network: Promise<Response>, onResponse: (r: Response) => Response): Promise<Response> {
|
|
||||||
let response: Response | null
|
|
||||||
|
|
||||||
try {
|
|
||||||
response = await network
|
|
||||||
// console.log("Network HIT:", request.url)
|
|
||||||
} catch(error) {
|
|
||||||
// console.log("Network MISS:", request.url, error)
|
|
||||||
|
|
||||||
try {
|
|
||||||
response = await this.cache.serve(request)
|
|
||||||
} catch(error) {
|
|
||||||
return Promise.reject(error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return onResponse(response)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Serve cache first.
|
|
||||||
// Fall back to network.
|
|
||||||
async cacheFirst(request: Request, network: Promise<Response>, onResponse: (r: Response) => Response): Promise<Response> {
|
|
||||||
let response: Response | null
|
|
||||||
|
|
||||||
try {
|
|
||||||
response = await this.cache.serve(request)
|
|
||||||
// console.log("Cache HIT:", request.url)
|
|
||||||
} catch(error) {
|
|
||||||
// console.log("Cache MISS:", request.url, error)
|
|
||||||
|
|
||||||
try {
|
|
||||||
response = await network
|
|
||||||
} catch(error) {
|
|
||||||
return Promise.reject(error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return onResponse(response)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// MyCache is the cache used by the service worker.
|
// MyCache is the cache used by the service worker.
|
||||||
class MyCache {
|
class MyCache {
|
||||||
version: string
|
version: string
|
||||||
@ -429,6 +66,340 @@ class MyCache {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Globals
|
||||||
|
let cache = new MyCache("v-7")
|
||||||
|
let reloads = new Map<string, Promise<Response>>()
|
||||||
|
|
||||||
|
// When these patterns are matched for the request URL, we exclude them from being
|
||||||
|
// served cache-first and instead serve them via a network request.
|
||||||
|
// Note that the service worker URL is automatically excluded from fetch events
|
||||||
|
// and therefore doesn't need to be added here.
|
||||||
|
let excludeCache = new Set<string>([
|
||||||
|
"/api/", // API requests
|
||||||
|
"/paypal/", // PayPal stuff
|
||||||
|
"/import/", // List imports
|
||||||
|
"/from/", // Infinite scrolling
|
||||||
|
"chrome-extension", // Chrome extension
|
||||||
|
|
||||||
|
// Authorization paths /auth/ and /logout are not listed here because they are handled in a special way.
|
||||||
|
])
|
||||||
|
|
||||||
|
// onInstall
|
||||||
|
async function onInstall(evt: InstallEvent) {
|
||||||
|
console.log("service worker install")
|
||||||
|
|
||||||
|
await self.skipWaiting()
|
||||||
|
await installCache()
|
||||||
|
}
|
||||||
|
|
||||||
|
// onActivate
|
||||||
|
function onActivate(evt: any) {
|
||||||
|
console.log("service worker activate")
|
||||||
|
|
||||||
|
// Only keep current version of the cache and delete old caches
|
||||||
|
let cacheWhitelist = [cache.version]
|
||||||
|
|
||||||
|
let deleteOldCache = caches.keys().then(keyList => {
|
||||||
|
return Promise.all(keyList.map(key => {
|
||||||
|
if(cacheWhitelist.indexOf(key) === -1) {
|
||||||
|
return caches.delete(key)
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
// Immediate claim helps us gain control over a new client immediately
|
||||||
|
let immediateClaim = self.clients.claim()
|
||||||
|
|
||||||
|
return Promise.all([
|
||||||
|
deleteOldCache,
|
||||||
|
immediateClaim
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
// onRequest intercepts all browser requests.
|
||||||
|
// Simply returning, without calling evt.respondWith(),
|
||||||
|
// will let the browser deal with the request normally.
|
||||||
|
async function onRequest(evt: FetchEvent) {
|
||||||
|
let request = evt.request as Request
|
||||||
|
|
||||||
|
// If it's not a GET request, fetch it normally.
|
||||||
|
// Let the browser handle XHR upload requests via POST,
|
||||||
|
// so that we can receive upload progress events.
|
||||||
|
if(request.method !== "GET") {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Video files are always loaded over the network.
|
||||||
|
// We are defaulting to the normal browser handler here
|
||||||
|
// so we can see the HTTP 206 partial responses in DevTools
|
||||||
|
// and it also seems to have slightly smoother video playback.
|
||||||
|
if(request.url.includes("/videos/")) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
return //evt.respondWith(fetch(request))
|
||||||
|
|
||||||
|
// // Exclude certain URLs from being cached.
|
||||||
|
// for(let pattern of this.excludeCache.keys()) {
|
||||||
|
// if(request.url.includes(pattern)) {
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // If the request has cache set to "force-cache", return a cache-only response.
|
||||||
|
// // This is used in reloads to avoid generating a 2nd request after a cache refresh.
|
||||||
|
// if(request.headers.get("X-Force-Cache") === "true") {
|
||||||
|
// return evt.respondWith(this.cache.serve(request))
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // --------------------------------------------------------------------------------
|
||||||
|
// // Cross-origin requests.
|
||||||
|
// // --------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
// // These hosts don't support CORS. Always load via network.
|
||||||
|
// if(request.url.startsWith("https://img.youtube.com/")) {
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Use CORS for cross-origin requests.
|
||||||
|
// if(!request.url.startsWith("https://notify.moe/") && !request.url.startsWith("https://beta.notify.moe/")) {
|
||||||
|
// request = new Request(request.url, {
|
||||||
|
// credentials: "omit",
|
||||||
|
// mode: "cors"
|
||||||
|
// })
|
||||||
|
// } else {
|
||||||
|
// // let relativePath = trimPrefix(request.url, "https://notify.moe")
|
||||||
|
// // relativePath = trimPrefix(relativePath, "https://beta.notify.moe")
|
||||||
|
// // console.log(relativePath)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // --------------------------------------------------------------------------------
|
||||||
|
// // Network refresh.
|
||||||
|
// // --------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
// // Save response in cache.
|
||||||
|
// let saveResponseInCache = (response: Response) => {
|
||||||
|
// let contentType = response.headers.get("Content-Type")
|
||||||
|
|
||||||
|
// // Don't cache anything other than text, styles, scripts, fonts and images.
|
||||||
|
// if(!contentType.includes("text/") && !contentType.includes("application/javascript") && !contentType.includes("image/") && !contentType.includes("font/")) {
|
||||||
|
// return response
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Save response in cache.
|
||||||
|
// if(response.ok) {
|
||||||
|
// let clone = response.clone()
|
||||||
|
// this.cache.store(request, clone)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return response
|
||||||
|
// }
|
||||||
|
|
||||||
|
// let onResponse = (response: Response | null) => {
|
||||||
|
// return response
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Refresh resource via a network request.
|
||||||
|
// let refresh = fetch(request).then(saveResponseInCache)
|
||||||
|
|
||||||
|
// // --------------------------------------------------------------------------------
|
||||||
|
// // Final response.
|
||||||
|
// // --------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
// // Clear cache on authentication and fetch it normally.
|
||||||
|
// if(request.url.includes("/auth/") || request.url.includes("/logout")) {
|
||||||
|
// return evt.respondWith(this.cache.clear().then(() => refresh))
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // If the request has cache set to "no-cache",
|
||||||
|
// // return the network-only response even if it fails.
|
||||||
|
// if(request.headers.get("X-No-Cache") === "true") {
|
||||||
|
// return evt.respondWith(refresh)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Styles and scripts will be served via network first and fallback to cache.
|
||||||
|
// if(request.url.endsWith("/styles") || request.url.endsWith("/scripts")) {
|
||||||
|
// evt.respondWith(this.networkFirst(request, refresh, onResponse))
|
||||||
|
// return refresh
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // --------------------------------------------------------------------------------
|
||||||
|
// // Default behavior for most requests.
|
||||||
|
// // --------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
// // // Respond via cache first.
|
||||||
|
// // evt.respondWith(this.cacheFirst(request, refresh, onResponse))
|
||||||
|
// // return refresh
|
||||||
|
|
||||||
|
// // Serve via network first and fallback to cache.
|
||||||
|
// evt.respondWith(this.networkFirst(request, refresh, onResponse))
|
||||||
|
// return refresh
|
||||||
|
}
|
||||||
|
|
||||||
|
// onMessage is called when the service worker receives a message from a client (browser tab).
|
||||||
|
async function onMessage(evt: ServiceWorkerMessageEvent) {
|
||||||
|
let message = JSON.parse(evt.data)
|
||||||
|
let clientId = (evt.source as any).id
|
||||||
|
let client = await MyClient.get(clientId)
|
||||||
|
|
||||||
|
client.onMessage(message)
|
||||||
|
}
|
||||||
|
|
||||||
|
// onPush is called on push events and requires the payload to contain JSON information about the notification.
|
||||||
|
function onPush(evt: PushEvent) {
|
||||||
|
var payload = evt.data ? evt.data.json() : {}
|
||||||
|
|
||||||
|
// Notify all clients about the new notification so they can update their notification counter
|
||||||
|
broadcast({
|
||||||
|
type: "new notification"
|
||||||
|
})
|
||||||
|
|
||||||
|
// Display the notification
|
||||||
|
return self.registration.showNotification(payload.title, {
|
||||||
|
body: payload.message,
|
||||||
|
icon: payload.icon,
|
||||||
|
data: payload.link,
|
||||||
|
badge: "https://media.notify.moe/images/brand/256.png"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPushSubscriptionChange(evt: any) {
|
||||||
|
return self.registration.pushManager.subscribe(evt.oldSubscription.options)
|
||||||
|
.then(async subscription => {
|
||||||
|
console.log("send subscription to server...")
|
||||||
|
|
||||||
|
let rawKey = subscription.getKey("p256dh")
|
||||||
|
let key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : ""
|
||||||
|
|
||||||
|
let rawSecret = subscription.getKey("auth")
|
||||||
|
let secret = rawSecret ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawSecret))) : ""
|
||||||
|
|
||||||
|
let endpoint = subscription.endpoint
|
||||||
|
|
||||||
|
let pushSubscription = {
|
||||||
|
endpoint,
|
||||||
|
p256dh: key,
|
||||||
|
auth: secret,
|
||||||
|
platform: navigator.platform,
|
||||||
|
userAgent: navigator.userAgent,
|
||||||
|
screen: {
|
||||||
|
width: window.screen.width,
|
||||||
|
height: window.screen.height
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let response = await fetch("/api/me", {credentials: "same-origin"})
|
||||||
|
let user = await response.json()
|
||||||
|
|
||||||
|
return fetch("/api/pushsubscriptions/" + user.id + "/add", {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "same-origin",
|
||||||
|
body: JSON.stringify(pushSubscription)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// onNotificationClick is called when the user clicks on a notification.
|
||||||
|
function onNotificationClick(evt: NotificationEvent) {
|
||||||
|
let notification = evt.notification
|
||||||
|
notification.close()
|
||||||
|
|
||||||
|
return self.clients.matchAll().then(function(clientList) {
|
||||||
|
// If we have a link, use that link to open a new window.
|
||||||
|
let url = notification.data
|
||||||
|
|
||||||
|
if(url) {
|
||||||
|
return self.clients.openWindow(url)
|
||||||
|
}
|
||||||
|
|
||||||
|
// If there is at least one client, focus it.
|
||||||
|
if(clientList.length > 0) {
|
||||||
|
return (clientList[0] as WindowClient).focus()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Otherwise open a new window
|
||||||
|
return self.clients.openWindow("https://notify.moe")
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Broadcast sends a message to all clients (open tabs etc.)
|
||||||
|
function broadcast(msg: object) {
|
||||||
|
const msgText = JSON.stringify(msg)
|
||||||
|
|
||||||
|
self.clients.matchAll().then(function(clientList) {
|
||||||
|
for(let client of clientList) {
|
||||||
|
client.postMessage(msgText)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// installCache is called when the service worker is installed for the first time.
|
||||||
|
async function installCache() {
|
||||||
|
let urls = [
|
||||||
|
"/",
|
||||||
|
"/scripts",
|
||||||
|
"/styles",
|
||||||
|
"/manifest.json",
|
||||||
|
"https://media.notify.moe/images/elements/noise-strong.png",
|
||||||
|
]
|
||||||
|
|
||||||
|
let promises = []
|
||||||
|
|
||||||
|
for(let url of urls) {
|
||||||
|
let request = new Request(url, {
|
||||||
|
credentials: "same-origin",
|
||||||
|
mode: "cors"
|
||||||
|
})
|
||||||
|
|
||||||
|
let promise = fetch(request).then(response => cache.store(request, response))
|
||||||
|
promises.push(promise)
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.all(promises)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Serve network first.
|
||||||
|
// Fall back to cache.
|
||||||
|
async function networkFirst(request: Request, network: Promise<Response>, onResponse: (r: Response) => Response): Promise<Response> {
|
||||||
|
let response: Response | null
|
||||||
|
|
||||||
|
try {
|
||||||
|
response = await network
|
||||||
|
// console.log("Network HIT:", request.url)
|
||||||
|
} catch(error) {
|
||||||
|
// console.log("Network MISS:", request.url, error)
|
||||||
|
|
||||||
|
try {
|
||||||
|
response = await cache.serve(request)
|
||||||
|
} catch(error) {
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return onResponse(response)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Serve cache first.
|
||||||
|
// Fall back to network.
|
||||||
|
async function cacheFirst(request: Request, network: Promise<Response>, onResponse: (r: Response) => Response): Promise<Response> {
|
||||||
|
let response: Response | null
|
||||||
|
|
||||||
|
try {
|
||||||
|
response = await cache.serve(request)
|
||||||
|
// console.log("Cache HIT:", request.url)
|
||||||
|
} catch(error) {
|
||||||
|
// console.log("Cache MISS:", request.url, error)
|
||||||
|
|
||||||
|
try {
|
||||||
|
response = await network
|
||||||
|
} catch(error) {
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return onResponse(response)
|
||||||
|
}
|
||||||
|
|
||||||
// MyClient represents a single tab in the browser.
|
// MyClient represents a single tab in the browser.
|
||||||
class MyClient {
|
class MyClient {
|
||||||
// MyClient.idToClient is a Map of clients
|
// MyClient.idToClient is a Map of clients
|
||||||
@ -462,7 +433,7 @@ class MyClient {
|
|||||||
case "broadcast":
|
case "broadcast":
|
||||||
message.type = message.realType
|
message.type = message.realType
|
||||||
delete message.realType
|
delete message.realType
|
||||||
serviceWorker.broadcast(message)
|
broadcast(message)
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -488,5 +459,11 @@ function trimPrefix(text, prefix) {
|
|||||||
return text
|
return text
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize the service worker
|
// Register event listeners
|
||||||
const serviceWorker = new MyServiceWorker()
|
self.addEventListener("install", (evt: InstallEvent) => evt.waitUntil(onInstall(evt)))
|
||||||
|
self.addEventListener("activate", (evt: any) => evt.waitUntil(onActivate(evt)))
|
||||||
|
self.addEventListener("fetch", (evt: FetchEvent) => evt.waitUntil(onRequest(evt)))
|
||||||
|
self.addEventListener("message", (evt: any) => evt.waitUntil(onMessage(evt)))
|
||||||
|
self.addEventListener("push", (evt: PushEvent) => evt.waitUntil(onPush(evt)))
|
||||||
|
self.addEventListener("pushsubscriptionchange", (evt: any) => evt.waitUntil(onPushSubscriptionChange(evt)))
|
||||||
|
self.addEventListener("notificationclick", (evt: NotificationEvent) => evt.waitUntil(onNotificationClick(evt)))
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user