From d1603fad4029370b34618e9c4107fa621eaa8b86 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Wed, 19 Jul 2017 06:32:31 +0200 Subject: [PATCH] Improved service worker --- scripts/AnimeNotifier.ts | 27 +++++++++++++++++---------- sw/service-worker.ts | 40 ++++++++++++++++++++++++++++++++++------ 2 files changed, 51 insertions(+), 16 deletions(-) diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 50c58e6e..75df0498 100644 --- a/scripts/AnimeNotifier.ts +++ b/scripts/AnimeNotifier.ts @@ -16,6 +16,7 @@ export class AnimeNotifier { statusMessage: StatusMessage visibilityObserver: IntersectionObserver pushManager: PushManager + lastRequestURL: string imageFound: MutationQueue imageNotFound: MutationQueue @@ -176,12 +177,18 @@ export class AnimeNotifier { 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") + // } }) navigator.serviceWorker.addEventListener("message", evt => { this.onServiceWorkerMessage(evt) }) + // This will send a message to the service worker that the DOM has been loaded let sendContentLoadedEvent = () => { if(!navigator.serviceWorker.controller) { return @@ -192,14 +199,14 @@ export class AnimeNotifier { url: "" } - if(this.app.lastRequest) { + if(this.lastRequestURL) { + message.url = this.lastRequestURL + } else if(this.app.lastRequest) { message.url = this.app.lastRequest.responseURL } else { message.url = window.location.href } - console.log("send loaded event to service worker") - navigator.serviceWorker.controller.postMessage(JSON.stringify(message)) } @@ -311,8 +318,9 @@ export class AnimeNotifier { headers.append("X-Reload", "true") let path = this.app.currentPath + this.lastRequestURL = location.origin + "/_" + path - return fetch("/_" + path, { + return fetch(this.lastRequestURL, { credentials: "same-origin", headers }) @@ -330,15 +338,11 @@ export class AnimeNotifier { reloadPage() { console.log("reload page") - - let headers = new Headers() - headers.append("X-Reload", "true") let path = this.app.currentPath return fetch(path, { - credentials: "same-origin", - headers + credentials: "same-origin" }) .then(response => { if(this.app.currentPath !== path) { @@ -509,7 +513,10 @@ export class AnimeNotifier { return Promise.reject(null) } - let request = fetch("/_" + url, { + let path = "/_" + url + this.lastRequestURL = location.origin + "/_" + path + + let request = fetch(path, { credentials: "same-origin" }) .then(response => { diff --git a/sw/service-worker.ts b/sw/service-worker.ts index d952a77b..42281ff8 100644 --- a/sw/service-worker.ts +++ b/sw/service-worker.ts @@ -43,11 +43,29 @@ self.addEventListener("activate", (evt: any) => { // 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) { return } @@ -73,11 +91,6 @@ self.addEventListener("message", (evt: any) => { url } - // If a subpage has refreshed, refresh the main page cache, too. - // if(url.includes("/_/")) { - - // } - let cacheRefresh = CACHEREFRESH.get(url) if(!cacheRefresh) { @@ -91,6 +104,21 @@ self.addEventListener("message", (evt: any) => { ) }) +// 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")