diff --git a/scripts/Application.ts b/scripts/Application.ts index c6495724..f7159078 100644 --- a/scripts/Application.ts +++ b/scripts/Application.ts @@ -13,7 +13,6 @@ export class Application { loading: HTMLElement currentPath: string originalPath: string - lastRequest: XMLHttpRequest | null constructor() { this.currentPath = window.location.pathname @@ -35,28 +34,9 @@ export class Application { } get(url: string): Promise { - if(this.lastRequest) { - this.lastRequest.abort() - this.lastRequest = null - } - - return new Promise((resolve, reject) => { - let request = new XMLHttpRequest() - - 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.onload = () => { - if(request.status < 200 || request.status >= 400) - reject(request.responseText) - else - resolve(request.responseText) - } - - request.open("GET", url, true) - request.send() - - this.lastRequest = request - }) + return fetch(url, { + credentials: "same-origin" + }).then(response => response.text()) } load(url: string, options?: LoadOptions) { @@ -87,6 +67,11 @@ export class Application { return } + // Outdated response. + if(this.currentPath !== url) { + return + } + // Remove listener after we finally got the correct event. this.content.removeEventListener("transitionend", onTransitionEnd) diff --git a/sw/service-worker.ts b/sw/service-worker.ts index 637ddbba..df4c5adf 100644 --- a/sw/service-worker.ts +++ b/sw/service-worker.ts @@ -13,9 +13,17 @@ // If the style or script resources changed after being served, we need // to force a real page reload. +// Promises const RELOADS = new Map>() -const ETAGS = new Map() const CACHEREFRESH = new Map>() + +// E-Tags that we served for a given URL +const ETAGS = new Map() + +// 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. const EXCLUDECACHE = new Set([ // API requests "/api/", @@ -98,6 +106,8 @@ class MyServiceWorker { onRequest(evt: FetchEvent) { let request = evt.request as Request + console.log("fetch", request.url) + // If it's not a GET request, fetch it normally if(request.method !== "GET") { return evt.respondWith(fetch(request)) @@ -130,6 +140,10 @@ class MyServiceWorker { CACHEREFRESH.set(request.url, cacheRefresh) + if(request.url === "/styles") { + console.log("/styles fetched", response.headers.get("ETag")) + } + return response }) @@ -142,6 +156,11 @@ class MyServiceWorker { let onResponse = response => { servedETag = response.headers.get("ETag") ETAGS.set(request.url, servedETag) + + if(request.url === "/styles") { + console.log("/styles served", servedETag) + } + return response }