From 13978b7e8cc229bb60093ebc1bce3ea2b720d490 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Wed, 19 Jul 2017 07:39:09 +0200 Subject: [PATCH] Improved service worker --- pages/dashboard/dashboard.pixy | 2 +- scripts/AnimeNotifier.ts | 23 ++++++++++------ sw/service-worker.ts | 48 ++++++++++++++++++++-------------- 3 files changed, 44 insertions(+), 29 deletions(-) diff --git a/pages/dashboard/dashboard.pixy b/pages/dashboard/dashboard.pixy index bb8f161b..eedd8f7e 100644 --- a/pages/dashboard/dashboard.pixy +++ b/pages/dashboard/dashboard.pixy @@ -3,7 +3,7 @@ component Dashboard(schedule []*arn.UpcomingEpisode, posts []arn.Postable, sound .widgets .widget.mountable - h3.widget-title Schedule + h3.widget-title Schedule 123 for i := 0; i <= 4; i++ if i < len(schedule) diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index d4082869..19232864 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -17,6 +17,7 @@ export class AnimeNotifier { visibilityObserver: IntersectionObserver pushManager: PushManager mainPageLoaded: boolean + lastReloadContentPath: string imageFound: MutationQueue imageNotFound: MutationQueue @@ -176,12 +177,7 @@ export class AnimeNotifier { console.log("register service worker") navigator.serviceWorker.register("/service-worker").then(registration => { - registration.update() - // if("sync" in registration) { - // registration.sync.register("background sync") - // } else { - // console.log("background sync not supported") - // } + // registration.update() }) navigator.serviceWorker.addEventListener("message", evt => { @@ -194,6 +190,13 @@ export class AnimeNotifier { return } + // A reloadContent call should never trigger another reload + if(this.app.currentPath === this.lastReloadContentPath) { + console.log("reload finished.") + this.lastReloadContentPath = "" + return + } + let message = { type: "loaded", url: "" @@ -207,7 +210,7 @@ export class AnimeNotifier { message.url = window.location.href } - console.log("Loaded", message.url) + console.log("checking for updates:", message.url) navigator.serviceWorker.controller.postMessage(JSON.stringify(message)) } @@ -316,10 +319,13 @@ export class AnimeNotifier { } reloadContent() { + console.log("reload content", "/_" + this.app.currentPath) + let headers = new Headers() headers.append("X-Reload", "true") let path = this.app.currentPath + this.lastReloadContentPath = path return fetch("/_" + path, { credentials: "same-origin", @@ -338,9 +344,10 @@ export class AnimeNotifier { } reloadPage() { - console.log("reload page") + console.log("reload page", this.app.currentPath) let path = this.app.currentPath + this.lastReloadContentPath = path return fetch(path, { credentials: "same-origin" diff --git a/sw/service-worker.ts b/sw/service-worker.ts index 42281ff8..ef88212d 100644 --- a/sw/service-worker.ts +++ b/sw/service-worker.ts @@ -4,9 +4,15 @@ const CACHE = "v-1" const RELOADS = new Map>() const ETAGS = new Map() const CACHEREFRESH = new Map>() +const EXCLUDECACHE = new Set([ + "/api/", + "/paypal/", + "/import/", + "chrome-extension" +]) self.addEventListener("install", (evt: InstallEvent) => { - console.log("Service worker install") + console.log("service worker install") evt.waitUntil( (self as any).skipWaiting().then(() => { @@ -16,7 +22,7 @@ self.addEventListener("install", (evt: InstallEvent) => { }) self.addEventListener("activate", (evt: any) => { - console.log("Service worker activate") + console.log("service worker activate") // Delete old cache let cacheWhitelist = [CACHE] @@ -94,35 +100,32 @@ self.addEventListener("message", (evt: any) => { 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("sync", (evt: any) => { -// console.log(evt.tag) - -// let fetches = new Array>() - -// for(let url of BACKGROUNDFETCHES.keys()) { - -// } - -// console.log("background fetching:", BACKGROUNDFETCHES.keys()) -// BACKGROUNDFETCHES.clear() - -// evt.waitUntil(Promise.all(fetches)) -// }) - self.addEventListener("fetch", async (evt: FetchEvent) => { let request = evt.request as Request let isAuth = request.url.includes("/auth/") || request.url.includes("/logout") - let ignoreCache = request.url.includes("/api/") || request.url.includes("/paypal/") || request.url.includes("chrome-extension") + 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 if(isAuth) { @@ -155,11 +158,16 @@ self.addEventListener("fetch", async (evt: FetchEvent) => { // Forced reload if(request.headers.get("X-Reload") === "true") { - return evt.waitUntil(refresh) + return evt.waitUntil(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 @@ -187,7 +195,7 @@ self.addEventListener("push", (evt: PushEvent) => { self.addEventListener("pushsubscriptionchange", (evt: any) => { evt.waitUntil((self as any).registration.pushManager.subscribe(evt.oldSubscription.options) .then(async subscription => { - console.log("Send subscription to server...") + console.log("send subscription to server...") let rawKey = subscription.getKey("p256dh") let key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : ""