Improved CSS reloads in service worker

This commit is contained in:
Eduard Urbach 2017-10-19 04:36:05 +02:00
parent d72543b31e
commit 24914cb6ff
2 changed files with 263 additions and 210 deletions

View File

@ -250,6 +250,10 @@ export class AnimeNotifier {
} }
break break
case "reload page":
location.reload(true)
break
} }
} }

View File

@ -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,24 +17,55 @@ 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 {
version: string
constructor(version: string) {
this.version = version
}
store(request: RequestInfo, response: Response) {
return caches.open(this.version).then(cache => {
return cache.put(request, response)
})
}
}
class MyServiceWorker {
cache: MyCache
currentCSP: string
constructor() {
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)))
}
onInstall(evt: InstallEvent) {
console.log("service worker install") console.log("service worker install")
evt.waitUntil( return (self as any).skipWaiting().then(() => {
(self as any).skipWaiting().then(() => { return this.installCache()
return installCache()
}) })
) }
})
self.addEventListener("activate", (evt: any) => { onActivate(evt: any) {
console.log("service worker activate") console.log("service worker activate")
// Delete old cache // Only keep current version of the cache and delete old caches
let cacheWhitelist = [CACHE] let cacheWhitelist = [this.cache.version]
let deleteOldCache = caches.keys().then(keyList => { let deleteOldCache = caches.keys().then(keyList => {
return Promise.all(keyList.map(key => { return Promise.all(keyList.map(key => {
@ -45,125 +75,49 @@ self.addEventListener("activate", (evt: any) => {
})) }))
}) })
// Immediate claim helps us gain control over a new client immediately
let immediateClaim = (self as any).clients.claim() let immediateClaim = (self as any).clients.claim()
// Immediate claim return Promise.all([
evt.waitUntil(
Promise.all([
deleteOldCache, deleteOldCache,
immediateClaim immediateClaim
]) ])
)
})
// controlling service worker
self.addEventListener("message", (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("/_/", "/"))
fetch(fullPage, {
credentials: "same-origin"
})
.then(response => {
// Save the new version of the resource in the cache
let cacheRefresh = caches.open(CACHE).then(cache => {
return cache.put(fullPage, response)
})
CACHEREFRESH.set(fullPage.url, cacheRefresh)
return cacheRefresh
})
} }
if(!refresh || !servedETag) { onRequest(evt: FetchEvent) {
return
}
evt.waitUntil(
refresh.then((response: Response) => {
// 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.
if(response.bodyUsed) {
return
}
let eTag = response.headers.get("ETag")
if(eTag === servedETag) {
return
}
ETAGS.set(url, eTag)
let message = {
type: "new content",
url
}
let cacheRefresh = CACHEREFRESH.get(url)
if(!cacheRefresh) {
console.log("forcing reload, cache refresh null")
return evt.source.postMessage(JSON.stringify(message))
}
return cacheRefresh.then(() => {
console.log("forcing reload after cache refresh")
evt.source.postMessage(JSON.stringify(message))
})
})
)
})
self.addEventListener("fetch", async (evt: FetchEvent) => {
let request = evt.request as Request let request = evt.request as Request
let isAuth = request.url.includes("/auth/") || request.url.includes("/logout")
let ignoreCache = false
// console.log("fetch:", request.url) // console.log("fetch:", request.url)
// If it's not a GET request, fetch it normally
if(request.method !== "GET") {
return evt.respondWith(fetch(request))
}
// Clear cache on authentication and fetch it normally
if(request.url.includes("/auth/") || request.url.includes("/logout")) {
return caches.delete(this.cache.version).then(() => evt.respondWith(fetch(request)))
}
// Exclude certain URLs from being cached // Exclude certain URLs from being cached
for(let pattern of EXCLUDECACHE.keys()) { for(let pattern of EXCLUDECACHE.keys()) {
if(request.url.includes(pattern)) { if(request.url.includes(pattern)) {
ignoreCache = true return evt.respondWith(fetch(request))
break
} }
} }
// Delete existing cache on authentication // If the request included the header "X-CacheOnly", return a cache-only response.
if(isAuth) { // This is used in reloads to avoid generating a 2nd request after a cache refresh.
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") { if(request.headers.get("X-CacheOnly") === "true") {
// console.log("forced cache response") return this.fromCache(request)
return evt.waitUntil(fromCache(request))
} }
let servedETag = undefined
// Start fetching the request // Start fetching the request
let refresh = fetch(request).then(response => { let refresh = fetch(request).then(response => {
// console.log(response)
let clone = response.clone() 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(request, clone)
})
CACHEREFRESH.set(request.url, cacheRefresh) CACHEREFRESH.set(request.url, cacheRefresh)
@ -174,44 +128,108 @@ self.addEventListener("fetch", async (evt: FetchEvent) => {
RELOADS.set(request.url, refresh) RELOADS.set(request.url, refresh)
// Forced reload // Forced reload
if(request.headers.get("X-Reload") === "true") { let servedETag = undefined
return evt.waitUntil(evt.respondWith(refresh.then(response => {
let onResponse = response => {
servedETag = response.headers.get("ETag") servedETag = response.headers.get("ETag")
ETAGS.set(request.url, servedETag) ETAGS.set(request.url, servedETag)
return response 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 // Try to serve cache first and fall back to network response
let networkOrCache = fromCache(request).then(response => { let networkOrCache = this.fromCache(request).then(onResponse).catch(error => {
// 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) // console.log("Cache MISS:", request.url)
return refresh return refresh
}) })
return evt.waitUntil(evt.respondWith(networkOrCache)) return evt.respondWith(networkOrCache)
}) }
self.addEventListener("push", (evt: PushEvent) => { 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
})
// Save in map
RELOADS.set(fullPage.url, fullPageRefresh)
}
if(!refresh || !servedETag) {
return Promise.resolve()
}
return refresh.then((response: Response) => {
// 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.
if(response.bodyUsed) {
return
}
// Get ETag
let eTag = response.headers.get("ETag")
// Update ETag
ETAGS.set(url, eTag)
// Get CSP
let oldCSP = this.currentCSP
let csp = response.headers.get("Content-Security-Policy")
if(csp != oldCSP) {
this.currentCSP = csp
if(oldCSP !== "") {
return this.forceClientReloadPage(url, evt.source)
}
}
// 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(eTag !== servedETag) {
return this.forceClientReloadContent(url, evt.source)
}
// Do nothing
return Promise.resolve()
})
}
onPush(evt: PushEvent) {
var payload = evt.data ? evt.data.json() : {} var payload = evt.data ? evt.data.json() : {}
evt.waitUntil( return (self as any).registration.showNotification(payload.title, {
(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...")
@ -242,15 +260,14 @@ self.addEventListener("pushsubscriptionchange", (evt: any) => {
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,21 +283,50 @@ 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 = {
type: "new content",
url
}
this.postMessageAfterPromise(message, CACHEREFRESH.get(url), eventSource)
}
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([ return cache.addAll([
"./", "./",
"./scripts", "./scripts",
"https://fonts.gstatic.com/s/ubuntu/v10/2Q-AW1e_taO6pHwMXcXW5w.ttf" "https://fonts.gstatic.com/s/ubuntu/v10/2Q-AW1e_taO6pHwMXcXW5w.ttf"
]) ])
}) })
} }
function fromCache(request) { fromCache(request) {
return caches.open(CACHE).then(cache => { return caches.open(this.cache.version).then(cache => {
return cache.match(request).then(matching => { return cache.match(request).then(matching => {
if(matching) { if(matching) {
// console.log("Cache HIT:", request.url) // console.log("Cache HIT:", request.url)
@ -290,4 +336,7 @@ function fromCache(request) {
return Promise.reject("no-match") return Promise.reject("no-match")
}) })
}) })
}
} }
const serviceWorker = new MyServiceWorker()