Improved CSS reloads in service worker
This commit is contained in:
parent
d72543b31e
commit
24914cb6ff
@ -250,6 +250,10 @@ export class AnimeNotifier {
|
|||||||
}
|
}
|
||||||
|
|
||||||
break
|
break
|
||||||
|
|
||||||
|
case "reload page":
|
||||||
|
location.reload(true)
|
||||||
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
// pack:ignore
|
// pack:ignore
|
||||||
|
|
||||||
const CACHE = "v-3"
|
|
||||||
const RELOADS = new Map<string, Promise<Response>>()
|
const RELOADS = new Map<string, Promise<Response>>()
|
||||||
const ETAGS = new Map<string, string>()
|
const ETAGS = new Map<string, string>()
|
||||||
const CACHEREFRESH = new Map<string, Promise<void>>()
|
const CACHEREFRESH = new Map<string, Promise<void>>()
|
||||||
@ -18,239 +17,257 @@ const EXCLUDECACHE = new Set<string>([
|
|||||||
"/from/",
|
"/from/",
|
||||||
|
|
||||||
// Chrome extension
|
// Chrome extension
|
||||||
"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) => {
|
class MyCache {
|
||||||
console.log("service worker install")
|
version: string
|
||||||
|
|
||||||
evt.waitUntil(
|
constructor(version: string) {
|
||||||
(self as any).skipWaiting().then(() => {
|
this.version = version
|
||||||
return installCache()
|
}
|
||||||
|
|
||||||
|
store(request: RequestInfo, response: Response) {
|
||||||
|
return caches.open(this.version).then(cache => {
|
||||||
|
return cache.put(request, response)
|
||||||
})
|
})
|
||||||
)
|
}
|
||||||
})
|
}
|
||||||
|
|
||||||
self.addEventListener("activate", (evt: any) => {
|
class MyServiceWorker {
|
||||||
console.log("service worker activate")
|
cache: MyCache
|
||||||
|
currentCSP: string
|
||||||
|
|
||||||
// Delete old cache
|
constructor() {
|
||||||
let cacheWhitelist = [CACHE]
|
this.cache = new MyCache("v-3")
|
||||||
|
this.currentCSP = ""
|
||||||
|
|
||||||
|
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)))
|
||||||
|
}
|
||||||
|
|
||||||
let deleteOldCache = caches.keys().then(keyList => {
|
onInstall(evt: InstallEvent) {
|
||||||
return Promise.all(keyList.map(key => {
|
console.log("service worker install")
|
||||||
if(cacheWhitelist.indexOf(key) === -1) {
|
|
||||||
return caches.delete(key)
|
return (self as any).skipWaiting().then(() => {
|
||||||
}
|
return this.installCache()
|
||||||
}))
|
})
|
||||||
})
|
}
|
||||||
|
|
||||||
let immediateClaim = (self as any).clients.claim()
|
onActivate(evt: any) {
|
||||||
|
console.log("service worker activate")
|
||||||
// Immediate claim
|
|
||||||
evt.waitUntil(
|
// Only keep current version of the cache and delete old caches
|
||||||
Promise.all([
|
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 as any).clients.claim()
|
||||||
|
|
||||||
|
return Promise.all([
|
||||||
deleteOldCache,
|
deleteOldCache,
|
||||||
immediateClaim
|
immediateClaim
|
||||||
])
|
])
|
||||||
)
|
}
|
||||||
})
|
|
||||||
|
|
||||||
// controlling service worker
|
onRequest(evt: FetchEvent) {
|
||||||
self.addEventListener("message", (evt: any) => {
|
let request = evt.request as Request
|
||||||
let message = JSON.parse(evt.data)
|
|
||||||
|
|
||||||
let url = message.url
|
// console.log("fetch:", request.url)
|
||||||
let refresh = RELOADS.get(url)
|
|
||||||
let servedETag = ETAGS.get(url)
|
|
||||||
|
|
||||||
// If the user requests a sub-page we should prefetch the full page, too.
|
// If it's not a GET request, fetch it normally
|
||||||
if(url.includes("/_/")) {
|
if(request.method !== "GET") {
|
||||||
let fullPage = new Request(url.replace("/_/", "/"))
|
return evt.respondWith(fetch(request))
|
||||||
|
}
|
||||||
|
|
||||||
fetch(fullPage, {
|
// Clear cache on authentication and fetch it normally
|
||||||
credentials: "same-origin"
|
if(request.url.includes("/auth/") || request.url.includes("/logout")) {
|
||||||
})
|
return caches.delete(this.cache.version).then(() => evt.respondWith(fetch(request)))
|
||||||
.then(response => {
|
}
|
||||||
|
|
||||||
|
// Exclude certain URLs from being cached
|
||||||
|
for(let pattern of EXCLUDECACHE.keys()) {
|
||||||
|
if(request.url.includes(pattern)) {
|
||||||
|
return evt.respondWith(fetch(request))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the request included the header "X-CacheOnly", 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-CacheOnly") === "true") {
|
||||||
|
return this.fromCache(request)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start fetching the request
|
||||||
|
let refresh = fetch(request).then(response => {
|
||||||
|
let clone = response.clone()
|
||||||
|
|
||||||
// Save the new version of the resource in the cache
|
// Save the new version of the resource in the cache
|
||||||
let cacheRefresh = caches.open(CACHE).then(cache => {
|
let cacheRefresh = this.cache.store(request, clone)
|
||||||
return cache.put(fullPage, response)
|
|
||||||
|
CACHEREFRESH.set(request.url, cacheRefresh)
|
||||||
|
|
||||||
|
return response
|
||||||
|
})
|
||||||
|
|
||||||
|
// Save in map
|
||||||
|
RELOADS.set(request.url, refresh)
|
||||||
|
|
||||||
|
// Forced reload
|
||||||
|
let servedETag = undefined
|
||||||
|
|
||||||
|
let onResponse = response => {
|
||||||
|
servedETag = response.headers.get("ETag")
|
||||||
|
ETAGS.set(request.url, servedETag)
|
||||||
|
return response
|
||||||
|
}
|
||||||
|
|
||||||
|
if(request.headers.get("X-Reload") === "true") {
|
||||||
|
return evt.respondWith(refresh.then(onResponse))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Try to serve cache first and fall back to network response
|
||||||
|
let networkOrCache = this.fromCache(request).then(onResponse).catch(error => {
|
||||||
|
// console.log("Cache MISS:", request.url)
|
||||||
|
return refresh
|
||||||
|
})
|
||||||
|
|
||||||
|
return evt.respondWith(networkOrCache)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMessage(evt: any) {
|
||||||
|
let message = JSON.parse(evt.data)
|
||||||
|
|
||||||
|
let url = message.url
|
||||||
|
let refresh = RELOADS.get(url)
|
||||||
|
let servedETag = ETAGS.get(url)
|
||||||
|
|
||||||
|
// If the user requests a sub-page we should prefetch the full page, too.
|
||||||
|
if(url.includes("/_/")) {
|
||||||
|
let fullPage = new Request(url.replace("/_/", "/"))
|
||||||
|
|
||||||
|
let fullPageRefresh = fetch(fullPage, {
|
||||||
|
credentials: "same-origin"
|
||||||
|
}).then(response => {
|
||||||
|
// Save the new version of the resource in the cache
|
||||||
|
let cacheRefresh = caches.open(this.cache.version).then(cache => {
|
||||||
|
return cache.put(fullPage, response)
|
||||||
|
})
|
||||||
|
|
||||||
|
CACHEREFRESH.set(fullPage.url, cacheRefresh)
|
||||||
|
return response
|
||||||
})
|
})
|
||||||
|
|
||||||
CACHEREFRESH.set(fullPage.url, cacheRefresh)
|
// Save in map
|
||||||
return cacheRefresh
|
RELOADS.set(fullPage.url, fullPageRefresh)
|
||||||
})
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if(!refresh || !servedETag) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
evt.waitUntil(
|
if(!refresh || !servedETag) {
|
||||||
refresh.then((response: Response) => {
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
|
||||||
|
return refresh.then((response: Response) => {
|
||||||
// If the fresh copy was used to serve the request instead of the cache,
|
// If the fresh copy was used to serve the request instead of the cache,
|
||||||
// we don"t need to tell the client to do a refresh.
|
// we don"t need to tell the client to do a refresh.
|
||||||
if(response.bodyUsed) {
|
if(response.bodyUsed) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Get ETag
|
||||||
let eTag = response.headers.get("ETag")
|
let eTag = response.headers.get("ETag")
|
||||||
|
|
||||||
if(eTag === servedETag) {
|
// Update ETag
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
ETAGS.set(url, eTag)
|
ETAGS.set(url, eTag)
|
||||||
|
|
||||||
let message = {
|
// Get CSP
|
||||||
type: "new content",
|
let oldCSP = this.currentCSP
|
||||||
url
|
let csp = response.headers.get("Content-Security-Policy")
|
||||||
|
|
||||||
|
if(csp != oldCSP) {
|
||||||
|
this.currentCSP = csp
|
||||||
|
|
||||||
|
if(oldCSP !== "") {
|
||||||
|
return this.forceClientReloadPage(url, evt.source)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let cacheRefresh = CACHEREFRESH.get(url)
|
// If the ETag changed, we need to do a reload.
|
||||||
|
// If the CSP and therefore the sha-1 hash of the CSS changed, we need to do a reload.
|
||||||
if(!cacheRefresh) {
|
if(eTag !== servedETag) {
|
||||||
console.log("forcing reload, cache refresh null")
|
return this.forceClientReloadContent(url, evt.source)
|
||||||
return evt.source.postMessage(JSON.stringify(message))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return cacheRefresh.then(() => {
|
// Do nothing
|
||||||
console.log("forcing reload after cache refresh")
|
return Promise.resolve()
|
||||||
evt.source.postMessage(JSON.stringify(message))
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
self.addEventListener("fetch", async (evt: FetchEvent) => {
|
|
||||||
let request = evt.request as Request
|
|
||||||
let isAuth = request.url.includes("/auth/") || request.url.includes("/logout")
|
|
||||||
let ignoreCache = false
|
|
||||||
|
|
||||||
// console.log("fetch:", request.url)
|
|
||||||
|
|
||||||
// Exclude certain URLs from being cached
|
|
||||||
for(let pattern of EXCLUDECACHE.keys()) {
|
|
||||||
if(request.url.includes(pattern)) {
|
|
||||||
ignoreCache = true
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Delete existing cache on authentication
|
onPush(evt: PushEvent) {
|
||||||
if(isAuth) {
|
var payload = evt.data ? evt.data.json() : {}
|
||||||
caches.delete(CACHE)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Do not use cache in some cases
|
|
||||||
if(request.method !== "GET" || isAuth || ignoreCache) {
|
|
||||||
return evt.waitUntil(evt.respondWith(fetch(request)))
|
|
||||||
}
|
|
||||||
|
|
||||||
// Forced cache response?
|
|
||||||
if(request.headers.get("X-CacheOnly") === "true") {
|
|
||||||
// console.log("forced cache response")
|
|
||||||
return evt.waitUntil(fromCache(request))
|
|
||||||
}
|
|
||||||
|
|
||||||
let servedETag = undefined
|
|
||||||
|
|
||||||
// Start fetching the request
|
return (self as any).registration.showNotification(payload.title, {
|
||||||
let refresh = fetch(request).then(response => {
|
|
||||||
// console.log(response)
|
|
||||||
let clone = response.clone()
|
|
||||||
|
|
||||||
// Save the new version of the resource in the cache
|
|
||||||
let cacheRefresh = caches.open(CACHE).then(cache => {
|
|
||||||
return cache.put(request, clone)
|
|
||||||
})
|
|
||||||
|
|
||||||
CACHEREFRESH.set(request.url, cacheRefresh)
|
|
||||||
|
|
||||||
return response
|
|
||||||
})
|
|
||||||
|
|
||||||
// Save in map
|
|
||||||
RELOADS.set(request.url, refresh)
|
|
||||||
|
|
||||||
// Forced reload
|
|
||||||
if(request.headers.get("X-Reload") === "true") {
|
|
||||||
return evt.waitUntil(evt.respondWith(refresh.then(response => {
|
|
||||||
servedETag = response.headers.get("ETag")
|
|
||||||
ETAGS.set(request.url, servedETag)
|
|
||||||
return response
|
|
||||||
})))
|
|
||||||
}
|
|
||||||
|
|
||||||
// Try to serve cache first and fall back to network response
|
|
||||||
let networkOrCache = fromCache(request).then(response => {
|
|
||||||
// console.log("served from cache:", request.url)
|
|
||||||
servedETag = response.headers.get("ETag")
|
|
||||||
ETAGS.set(request.url, servedETag)
|
|
||||||
return response
|
|
||||||
}).catch(error => {
|
|
||||||
// console.log("Cache MISS:", request.url)
|
|
||||||
return refresh
|
|
||||||
})
|
|
||||||
|
|
||||||
return evt.waitUntil(evt.respondWith(networkOrCache))
|
|
||||||
})
|
|
||||||
|
|
||||||
self.addEventListener("push", (evt: PushEvent) => {
|
|
||||||
var payload = evt.data ? evt.data.json() : {}
|
|
||||||
|
|
||||||
evt.waitUntil(
|
|
||||||
(self as any).registration.showNotification(payload.title, {
|
|
||||||
body: payload.message,
|
body: payload.message,
|
||||||
icon: payload.icon,
|
icon: payload.icon,
|
||||||
image: payload.image,
|
image: payload.image,
|
||||||
data: payload.link,
|
data: payload.link,
|
||||||
badge: "https://notify.moe/brand/64"
|
badge: "https://notify.moe/brand/64.png"
|
||||||
})
|
})
|
||||||
)
|
}
|
||||||
})
|
|
||||||
|
|
||||||
self.addEventListener("pushsubscriptionchange", (evt: any) => {
|
onPushSubscriptionChange(evt: any) {
|
||||||
evt.waitUntil((self as any).registration.pushManager.subscribe(evt.oldSubscription.options)
|
return (self as any).registration.pushManager.subscribe(evt.oldSubscription.options)
|
||||||
.then(async subscription => {
|
.then(async subscription => {
|
||||||
console.log("send subscription to server...")
|
console.log("send subscription to server...")
|
||||||
|
|
||||||
let rawKey = subscription.getKey("p256dh")
|
let rawKey = subscription.getKey("p256dh")
|
||||||
let key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : ""
|
let key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : ""
|
||||||
|
|
||||||
let rawSecret = subscription.getKey("auth")
|
let rawSecret = subscription.getKey("auth")
|
||||||
let secret = rawSecret ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawSecret))) : ""
|
let secret = rawSecret ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawSecret))) : ""
|
||||||
|
|
||||||
let endpoint = subscription.endpoint
|
let endpoint = subscription.endpoint
|
||||||
|
|
||||||
let pushSubscription = {
|
let pushSubscription = {
|
||||||
endpoint,
|
endpoint,
|
||||||
p256dh: key,
|
p256dh: key,
|
||||||
auth: secret,
|
auth: secret,
|
||||||
platform: navigator.platform,
|
platform: navigator.platform,
|
||||||
userAgent: navigator.userAgent,
|
userAgent: navigator.userAgent,
|
||||||
screen: {
|
screen: {
|
||||||
width: window.screen.width,
|
width: window.screen.width,
|
||||||
height: window.screen.height
|
height: window.screen.height
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
let user = await fetch("/api/me").then(response => response.json())
|
||||||
let user = await fetch("/api/me").then(response => response.json())
|
|
||||||
|
return fetch("/api/pushsubscriptions/" + user.id + "/add", {
|
||||||
return fetch("/api/pushsubscriptions/" + user.id + "/add", {
|
method: "POST",
|
||||||
method: "POST",
|
credentials: "same-origin",
|
||||||
credentials: "same-origin",
|
body: JSON.stringify(pushSubscription)
|
||||||
body: JSON.stringify(pushSubscription)
|
})
|
||||||
})
|
})
|
||||||
}))
|
}
|
||||||
})
|
|
||||||
|
|
||||||
self.addEventListener("notificationclick", (evt: NotificationEvent) => {
|
onNotificationClick(evt: NotificationEvent) {
|
||||||
let notification = evt.notification
|
let notification = evt.notification
|
||||||
notification.close()
|
notification.close()
|
||||||
|
|
||||||
evt.waitUntil(
|
return (self as any).clients.matchAll().then(function(clientList) {
|
||||||
(self as any).clients.matchAll().then(function(clientList) {
|
|
||||||
// If we have a link, use that link to open a new window.
|
// If we have a link, use that link to open a new window.
|
||||||
let url = notification.data
|
let url = notification.data
|
||||||
|
|
||||||
@ -266,28 +283,60 @@ self.addEventListener("notificationclick", (evt: NotificationEvent) => {
|
|||||||
// Otherwise open a new window
|
// Otherwise open a new window
|
||||||
return (self as any).clients.openWindow("https://notify.moe")
|
return (self as any).clients.openWindow("https://notify.moe")
|
||||||
})
|
})
|
||||||
)
|
}
|
||||||
})
|
|
||||||
|
|
||||||
function installCache() {
|
forceClientReloadContent(url: string, eventSource: any) {
|
||||||
return caches.open(CACHE).then(cache => {
|
let message = {
|
||||||
return cache.addAll([
|
type: "new content",
|
||||||
"./",
|
url
|
||||||
"./scripts",
|
}
|
||||||
"https://fonts.gstatic.com/s/ubuntu/v10/2Q-AW1e_taO6pHwMXcXW5w.ttf"
|
|
||||||
])
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function fromCache(request) {
|
this.postMessageAfterPromise(message, CACHEREFRESH.get(url), eventSource)
|
||||||
return caches.open(CACHE).then(cache => {
|
}
|
||||||
return cache.match(request).then(matching => {
|
|
||||||
if(matching) {
|
|
||||||
// console.log("Cache HIT:", request.url)
|
|
||||||
return Promise.resolve(matching)
|
|
||||||
}
|
|
||||||
|
|
||||||
return Promise.reject("no-match")
|
forceClientReloadPage(url: string, eventSource: any) {
|
||||||
|
let message = {
|
||||||
|
type: "reload page",
|
||||||
|
url
|
||||||
|
}
|
||||||
|
|
||||||
|
this.postMessageAfterPromise(message, RELOADS.get(url.replace("/_/", "/")), eventSource)
|
||||||
|
}
|
||||||
|
|
||||||
|
postMessageAfterPromise(message: any, promise: Promise<any>, eventSource: any) {
|
||||||
|
if(!promise) {
|
||||||
|
console.log("forcing reload, cache refresh null")
|
||||||
|
return eventSource.postMessage(JSON.stringify(message))
|
||||||
|
}
|
||||||
|
|
||||||
|
return promise.then(() => {
|
||||||
|
console.log("forcing reload after cache refresh")
|
||||||
|
eventSource.postMessage(JSON.stringify(message))
|
||||||
})
|
})
|
||||||
})
|
}
|
||||||
|
|
||||||
|
installCache() {
|
||||||
|
return caches.open(this.cache.version).then(cache => {
|
||||||
|
return cache.addAll([
|
||||||
|
"./",
|
||||||
|
"./scripts",
|
||||||
|
"https://fonts.gstatic.com/s/ubuntu/v10/2Q-AW1e_taO6pHwMXcXW5w.ttf"
|
||||||
|
])
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
fromCache(request) {
|
||||||
|
return caches.open(this.cache.version).then(cache => {
|
||||||
|
return cache.match(request).then(matching => {
|
||||||
|
if(matching) {
|
||||||
|
// console.log("Cache HIT:", request.url)
|
||||||
|
return Promise.resolve(matching)
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.reject("no-match")
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const serviceWorker = new MyServiceWorker()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user