diff --git a/scripts/ServiceWorkerManager.ts b/scripts/ServiceWorkerManager.ts index 3b362fc9..3312bfb6 100644 --- a/scripts/ServiceWorkerManager.ts +++ b/scripts/ServiceWorkerManager.ts @@ -85,13 +85,27 @@ export class ServiceWorkerManager { this.arn.reloadPage() }) } - + break - + case "reload page": console.log("service worker instructed to reload page...disobeying in test mode") // location.reload(true) break + + case "reload styles": + console.log("service worker instructed to reload styles") + const links = document.getElementsByTagName("link") + + for(const x in links) { + const link = links[x] + + if(link.getAttribute("rel") === "stylesheet") { + link.href = link.href + } + } + + break } } } \ No newline at end of file diff --git a/sw/index.d.ts b/sw/index.d.ts index 2278ea56..0fb62d00 100644 --- a/sw/index.d.ts +++ b/sw/index.d.ts @@ -1,4 +1,656 @@ -type NotificationEvent = any; -type InstallEvent = any; -type FetchEvent = any; -type PushEvent = any; \ No newline at end of file +// type NotificationEvent = any; +// type InstallEvent = any; +// type FetchEvent = any; +// type PushEvent = any; +// type ServiceWorkerGlobalScope = any; + +// Type definitions for service_worker_api 0.0 +// Project: https://developer.mozilla.org/fr/docs/Web/API/ServiceWorker_API +// Definitions by: Tristan Caron +// Definitions: https://github.com/borisyankov/DefinitelyTyped +// TypeScript Version: 2.1 + +/** + * An CacheOptions object allowing you to set specific control options for the + * matching done in the match operation. + * + * @property [ignoreSearch] A Boolean that specifies whether the matching + * process should ignore the query string in the url. If set to true, + * the ?value=bar part of http://foo.com/?value=bar would be ignored when + * performing a match. It defaults to false. + * + * @property [ignoreMethod] A Boolean that, when set to true, prevents matching + * operations from validating the Request http method (normally only GET + * and HEAD are allowed.) It defaults to false. + * + * @property [ignoreVary] A Boolean that when set to true tells the matching + * operation not to perform VARY header matching — i.e. if the URL matches you + * will get a match regardless of the Response object having a VARY header or + * not. It defaults to false. + * + * @property [cacheName] A DOMString that represents a specific cache to search + * within. Note that this option is ignored by Cache.match(). + */ +interface CacheOptions { + ignoreSearch?: boolean; + ignoreMethod?: boolean; + ignoreVary?: boolean; + cacheName?: string; +} + +/** + * Represents the storage for Request / Response object pairs that are cached as + * part of the ServiceWorker life cycle. + */ +interface Cache { + /** + * Returns a Promise that resolves to the response associated with the first + * matching request in the Cache object. + * + * @param request The Request you are attempting to find in the Cache. + * @param [options] An object that sets options for the match operation. + */ + match(request: Request | string, options?: CacheOptions): Promise; + + /** + * Returns a Promise that resolves to an array of all matching responses in + * the Cache object. + * + * @param request The Request you are attempting to find in the Cache. + * @param [options] An object that sets options for the match operation. + */ + matchAll(request: Request | string, options?: CacheOptions): Promise; + + /** + * Returns a Promise that resolves to a new Cache entry whose key + * is the request. + * + * @param request The Request you want to add to the cache. + */ + add(request: Request | string): Promise; + + /** + * Returns a Promise that resolves to a new array of Cache entries whose + * keys are the requests. + * + * @param request An array of Request objects you want to add to the cache. + */ + addAll(requests: Array): Promise; + + /** + * Adds additional key/value pairs to the current Cache object. + * + * @param request The Request you want to add to the cache. + * @param response The response you want to match up to the request. + */ + put(request: Request, response: Response): Promise; + + /** + * Finds the Cache entry whose key is the request, and if found, deletes the + * Cache entry and returns a Promise that resolves to true. If no Cache + * entry is found, it returns false. + * + * @param request The Request you are looking to delete. + * @param [options] An object that sets options for the match operation. + */ + delete(request: Request | string, options?: CacheOptions): Promise; + + /** + * Returns a Promise that resolves to an array of Cache keys. + * + * @param request The Request want to return, if a specific key is desired. + * @param [options] An object that sets options for the match operation. + */ + keys(request?: Request, options?: CacheOptions): Promise; +} + +/** + * Represents the storage for Cache objects. It provides a master directory of + * all the named caches that a ServiceWorker can access and maintains a mapping + * of string names to corresponding Cache objects. + */ +interface CacheStorage { + /** + * Checks if a given Request is a key in any of the Cache objects that the + * CacheStorage object tracks and returns a Promise that resolves + * to that match. + * + * @param request The Request you are looking for a match for in the CacheStorage. + * @param [options] An object that sets options for the match operation. + */ + match(request: Request | string, options?: CacheOptions): Promise; + + /** + * Returns a Promise that resolves to true if a Cache object matching + * the cacheName exists. + * + * @param cacheName The Request you are looking for a match for in the + * CacheStorage. + */ + has(cacheName: string): Promise; + + /** + * Returns a Promise that resolves to the Cache object matching + * the cacheName. + * + * @param cacheName The name of the cache you want to open. + */ + open(cacheName: string): Promise; + + /** + * Finds the Cache object matching the cacheName, and if found, deletes the + * Cache object and returns a Promise that resolves to true. If no + * Cache object is found, it returns false. + * + * @param cacheName The name of the cache you want to delete. + */ + delete(cacheName: string): Promise; + + /** + * Returns a Promise that will resolve with an array containing strings + * corresponding to all of the named Cache objects tracked by the + * CacheStorage. Use this method to iterate over a list of all the + * Cache objects. + */ + keys(): Promise; +} + +/** + * Represents the scope of a service worker client. A service worker client is + * either a document in a browser context or a SharedWorker, which is controlled + * by an active worker. + */ +interface ServiceWorkerClient { + /** + * Allows a service worker client to send a message to a ServiceWorker. + * + * @param message The message to send to the service worker. + * @param [transfer] A transferable object such as, for example, a reference + * to a port. + */ + postMessage(message: any, transfer?: any): void; + + /** + * Indicates the type of browsing context of the current client. + * This value can be one of auxiliary, top-level, nested, or none. + */ + readonly frameType: string; + + /** + * Returns the id of the Client object. + */ + readonly id: string; + + /** + * The URL of the current service worker client. + */ + readonly url: string; +} + +interface WindowClient extends ServiceWorkerClient { + /** + * Gives user input focus to the current client. + */ + focus(): Promise; + + /** + * A boolean that indicates whether the current client has focus. + */ + readonly focused: boolean; + + /** + * Indicates the visibility of the current client. This value can be one of + * hidden, visible, prerender, or unloaded. + */ + readonly visibilityState: string; +} + +interface ServiceWorkerClientsMatchOptions { + includeUncontrolled?: boolean; + type?: string; +} + +/** + * Represents a container for a list of Client objects; the main way to access + * the active service worker clients at the current origin. + */ +interface ServiceWorkerClients { + /** + * Gets a service worker client matching a given id and returns it in a Promise. + * @param clientId The ID of the client you want to get. + */ + get(clientId: string): Promise; + + /** + * Gets a list of service worker clients and returns them in a Promise. + * Include the options parameter to return all service worker clients whose + * origin is the same as the associated service worker's origin. If options + * are not included, the method returns only the service worker clients + * controlled by the service worker. + * + * @param [options] An options object allowing you to set options for the matching operation. + */ + matchAll(options?: ServiceWorkerClientsMatchOptions): Promise; + + /** + * Opens a service worker Client in a new browser window. + * + * @param url A string representing the URL of the client you want to open + * in the window. + */ + openWindow(url: string): Promise; + + /** + * Allows an active Service Worker to set itself as the active worker for a + * client page when the worker and the page are in the same scope. + */ + claim(): Promise; +} + +/** + * Represents a service worker. Multiple browsing contexts (e.g. pages, workers, + * etc.) can be associated with the same ServiceWorker object. + */ +interface ServiceWorker extends Worker { + /** + * Returns the ServiceWorker serialized script URL defined as part of + * ServiceWorkerRegistration. The URL must be on the same origin as the + * document that registers the ServiceWorker. + */ + readonly scriptURL: string; +} + +/** + * The PushMessageData interface of the Push API provides + * methods which let you retrieve the push data sent by a server in various formats. + */ +interface PushMessageData { + /** + * Extracts the data as an ArrayBuffer object. + */ + arrayBuffer(): ArrayBuffer; + + /** + * Extracts the data as a Blob object. + */ + blob(): Blob; + + /** + * Extracts the data as a JSON object. + */ + json(): any; + json(): T; + + /** + * Extracts the data as a plain text string. + */ + text(): string; +} + +/** + * The PushSubscription interface provides a subcription's URL endpoint and + * subscription ID. + */ +interface PushSubscription { + /** + * The endpoint associated with the push subscription. + */ + readonly endpoint: string; + + /** + * The subscription ID associated with the push subscription. + */ + readonly subscriptionId: any; +} + +/** + * Object containing optional subscribe parameters. + */ +interface PushSubscriptionOptions { + /** + * A boolean indicating that the returned push subscription will only be used for + * messages whose effect is made visible to the user. + */ + readonly userVisibleOnly: boolean; +} + +/** + * The PushManager interface provides a way to receive notifications from + * third-party servers as well as request URLs for push notifications. + * This interface has replaced functionality offered by the obsolete + * PushRegistrationManager. + */ +interface PushManager { + /** + * Returns a promise that resolves to a PushSubscription with details of a + * new push subscription. + * + * @param [options] An object containing optional configuration parameters. + */ + subscribe(options?: PushSubscriptionOptions): Promise; + + /** + * Returns a promise that resolves to a PushSubscription details of + * the retrieved push subscription. + */ + getSubscription(): Promise; + + /** + * Returns a promise that resolves to the PushPermissionStatus of the + * requesting webapp, which will be one of granted, denied, or default. + */ + hasPermission(): Promise; +} + +/////// Service Worker Events /////// + +/** + * Extends the lifetime of the install and activate events dispatched on the + * ServiceWorkerGlobalScope as part of the service worker lifecycle. This + * ensures that any functional events (like FetchEvent) are not dispatched to + * the ServiceWorker until it upgrades database schemas, deletes outdated cache + * entries, etc. + */ +interface ExtendableEvent extends Event { + /** + * Extends the lifetime of the event. + * It is intended to be called in the install EventHandler for the + * installing worker and on the active EventHandler for the active worker. + * + * @param promise + */ + waitUntil(promise: Promise): void; +} + +/** + * The parameter passed into the ServiceWorkerGlobalScope.onfetch handler, + * FetchEvent represents a fetch action that is dispatched on the + * ServiceWorkerGlobalScope of a ServiceWorker. It contains information about + * the request and resulting response, and provides the FetchEvent.respondWith() + * method, which allows us to provide an arbitrary response back to the + * controlled page. + */ +interface FetchEvent extends Event { + /** + * Returns a Boolean that is true if the event was dispatched with the + * user's intention for the page to reload, and false otherwise. Typically, + * pressing the refresh button in a browser is a reload, while clicking a + * link and pressing the back button is not. + */ + readonly isReload: boolean; + + /** + * Returns the Request that triggered the event handler. + */ + readonly request: Request; + + /** + * Returns the id of the client that the current service worker is controlling. + */ + readonly clientId: string; + + /** + * Resolves by returning a Response or a network error to Fetch. + * + * @param all Any custom response-generating code. + */ + respondWith(all: any): any; + + waitUntil(promise: Promise): void; +} + +/** + * The ExtendableMessageEvent interface of the ServiceWorker API represents + * the event object of a message event fired on + * a service worker (when a channel message is received on + * the ServiceWorkerGlobalScope from another context) + * — extends the lifetime of such events. + */ +interface ExtendableMessageEvent extends ExtendableEvent { + /** + * Returns the event's data. It can be any data type. + */ + readonly data: any; + + /** + * Returns the origin of the ServiceWorkerClient that sent the message + */ + readonly origin: string; + + /** + * Represents, in server-sent events, the last event ID of the event source. + */ + readonly lastEventId: string; + + /** + * Returns a reference to the service worker that sent the message. + */ + readonly source: ServiceWorkerClient; + + /** + * Returns the array containing the MessagePort objects + * representing the ports of the associated message channel. + */ + readonly ports: MessagePort[]; +} + +/** + * The parameter passed into the oninstall handler, the InstallEvent interface + * represents an install action that is dispatched on the + * ServiceWorkerGlobalScope of a ServiceWorker. As a child of ExtendableEvent, + * it ensures that functional events such as FetchEvent are not dispatched + * during installation. + */ +interface InstallEvent extends ExtendableEvent { + /** + * Returns the ServiceWorker that is currently actively controlling the page. + */ + readonly activeWorker: ServiceWorker; +} + +/** + * The parameter passed into the onnotificationclick handler, + * the NotificationEvent interface represents + * a notification click event that is dispatched on + * the ServiceWorkerGlobalScope of a ServiceWorker. + */ +interface NotificationEvent extends ExtendableEvent { + /** + * Returns a Notification object representing + * the notification that was clicked to fire the event. + */ + notification: any; // need to be replaced with `Notification` when possible + + /** + * Returns the string ID of the notification button the user clicked. + * This value returns undefined if the user clicked + * the notification somewhere other than an action button, + * or the notification does not have a button. + */ + action: string; +} + +/** + * The PushEvent interface of the Push API represents + * a push message that has been received. + * This event is sent to the global scope of a ServiceWorker. + * It contains the information sent from an application server to a PushSubscription. + */ +interface PushEvent extends ExtendableEvent { + /** + * Returns a reference to a PushMessageData object containing + * data sent to the PushSubscription. + */ + readonly data: PushMessageData; +} + +interface ServiceWorkerContainerEventMap { + "error": ErrorEvent; + "controllerchange": Event; +} + +interface ServiceWorkerEventMap { + "activate": ExtendableEvent; + "fetch": FetchEvent; + "install": InstallEvent; + // "message": ExtendableMessageEvent; + "message": MessageEvent; + "notificationclick": NotificationEvent; + "push": PushEvent; + "pushsubscriptionchang": PushEvent; +} + +/** + * An options object to provide options upon a ServiceWorkerRegistration. + * @param [scope] A USVString representing a URL that defines a service worker's registration scope; what range of + * URLs a service worker can control. This is usually a relative URL, and it defaults to '/' when not specified. + */ +interface ServiceWorkerRegisterOptions { + scope: string; +} + +/** + * Action to display in a notification. + * @param [action] A DOMString identifying a user action to be displayed on the notification. + * @param [title] A DOMString containing action text to be shown to the user. + * @param [icon] A USVString containg the URL of an icon to display with the action. + */ +interface NotificationAction { // TODO: Maybe need to moved if NotificationApi types are defined + action: string; + title: string; + icon?: string; +} + +/** + * Object that allows to configure a notification. + * @param [actions] An array of actions to display in the notification. + * Appropriate responses are built using event.action within the notificationclick event. + * @param [badge] The URL of an image to represent the notification when there is not enough space to display the + * notification itself such as, for example, the Android Notification Bar. On Android devices, the badge should + * accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked. + * @param [body] A string representing an extra content to display within the notification. + * @param [dir] The direction of the notification; it can be auto, ltr, or rtl. + * @param [icon] The URL of an image to be used as an icon by the notification. + * @param [image] A USVSTring containing the URL of an image to be displayed in the notification. + * @param [lang] Specify the lang used within the notification. This string must be a valid BCP 47 language tag. + * @param [renotify] A boolean that indicates whether to supress vibrations and audible alerts when resusing a tag + * value. The default is false. + * @param [requireInteraction] Indicates that on devices with sufficiently large screens, a notification should remain + * active until the user clicks or dismisses it. If this value is absent or false, the desktop version of Chrome + * will auto-minimize notifications after approximately twenty seconds. The default value is false. + * @param [tag] An ID for a given notification that allows you to find, replace, or remove the notification using + * script if necessary. + * @param [vibrate] A vibration pattern to run with the display of the notification. A vibration pattern can be an + * array with as few as one member. The values are times in milliseconds where the even indices (0, 2, 4, etc.) indicate + * how long to vibrate and the odd indices indicate how long to pause. For example [300, 100, 400] would vibrate + * 300ms, pause 100ms, then vibrate 400ms. + * @param [data] Arbitrary data that you want associated with the notification. This can be of any data type. + */ +interface ServiceWorkerNotificationOptions { + actions?: NotificationAction[]; + badge?: string; + body?: string; + dir?: 'auto' | 'ltr' | 'rtl'; + icon?: string; + lang?: string; + renotify?: boolean; + requireInteraction?: boolean; + tag?: string; + vibrate?: number[]; + data?: any; +} + +/** + * An options object that can contain options to filter notifications. + * @param [tag] A DOMString representing a notification tag. If specified, only notifications that have this tag + * will be returned. + */ +interface ServiceWorkerGetNotificationOptions { + tag: string; +} + +interface ServiceWorkerGlobalScope extends EventTarget { + /** + * Contains the CacheStorage object associated with the service worker. + */ + readonly caches: CacheStorage; + /** + * Contains the Clients object associated with the service worker. + */ + readonly clients: ServiceWorkerClients; + + /** + * Contains the ServiceWorkerRegistration object that represents the + * service worker's registration. + */ + readonly registration: ServiceWorkerRegistration; + + /** + * An event handler fired whenever an activate event occurs — when a + * ServiceWorkerRegistration acquires a new ServiceWorkerRegistration.active + * worker. + */ + onactivate: (activateevent: ExtendableEvent) => void; + + /** + * An event handler fired whenever a fetch event occurs — when a fetch() + * is called. + */ + onfetch: (fetchevent: FetchEvent) => void; + + /** + * An event handler fired whenever an install event occurs — when a + * ServiceWorkerRegistration acquires a new + * ServiceWorkerRegistration.installing worker. + */ + oninstall: (installevent: InstallEvent) => void; + + /** + * An event handler fired whenever a message event occurs — when incoming + * messages are received. Controlled pages can use the + * MessagePort.postMessage() method to send messages to service workers. + * The service worker can optionally send a response back via the + * MessagePort exposed in event.data.port, corresponding to the controlled + * page. + * + * `onmessage` is actually fired with `ExtendableMessageEvent`, but + * since we are merging the interface into `Window`, we should + * make sure it's compatible with `window.onmessage` + */ + // onmessage: (messageevent: ExtendableMessageEvent) => void; + onmessage: (messageevent: MessageEvent) => void; + + /** + * An event handler fired whenever a notificationclick event occurs — when + * a user clicks on a displayed notification. + */ + onnotificationclick: (notificationclickevent: NotificationEvent) => void; + + /** + * An event handler fired whenever a push event occurs — when a server + * push notification is received. + */ + onpush: (onpushevent: PushEvent) => void; + + /** + * An event handler fired whenever a pushsubscriptionchange event occurs — + * when a push subscription has been invalidated, or is about to be + * invalidated (e.g. when a push service sets an expiration time). + */ + onpushsubscriptionchange: (pushsubscriptionchangeevent: PushEvent) => void; + + /** + * Allows the current service worker registration to progress from waiting + * to active state while service worker clients are using it. + */ + skipWaiting(): Promise; + + addEventListener( + type: K, + listener: (event: ServiceWorkerEventMap[K]) => any, + useCapture?: boolean + ): void; +} + +// tslint:disable-next-line no-empty-interface +interface Window extends ServiceWorkerGlobalScope {} \ No newline at end of file diff --git a/sw/service-worker.ts b/sw/service-worker.ts index 9924538c..4aaa4695 100644 --- a/sw/service-worker.ts +++ b/sw/service-worker.ts @@ -58,6 +58,140 @@ class MyCache { } } +class MyClient { + client: ServiceWorkerClient + + constructor(client: ServiceWorkerClient) { + this.client = client + } + + onMessage(message: any) { + switch(message.type) { + case "loaded": + this.onDOMContentLoaded(message.url) + break + } + } + + postMessage(message: object) { + this.client.postMessage(JSON.stringify(message)) + } + + // onDOMContentLoaded is called when the client sent this service worker + // a message that the page has been loaded. + onDOMContentLoaded(url: string) { + 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("/_/") && !url.includes("/_/search/")) { + var prefetch = true + + for(let pattern of EXCLUDECACHE.keys()) { + if(url.includes(pattern)) { + prefetch = false + break + } + } + + if(prefetch) { + this.prefetchFullPage(url) + } + } + + if(!refresh || !servedETag) { + return Promise.resolve() + } + + return refresh.then(async (response: Response) => { + // When the actual network request was used by the client, response.bodyUsed is set. + // In that case the client is already up to date and we don"t need to tell the client to do a refresh. + if(response.bodyUsed) { + return + } + + // Get the ETag of the cached response we sent to the client earlier. + let eTag = response.headers.get("ETag") + + // Update ETag + ETAGS.set(url, eTag) + + // If the ETag changed, we need to do a reload. + if(eTag !== servedETag) { + return this.reloadContent(url) + } + + // Do nothing + return Promise.resolve() + }) + } + + prefetchFullPage(url: string) { + 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(serviceWorker.cache.version).then(cache => { + return cache.put(fullPage, response) + }) + + CACHEREFRESH.set(fullPage.url, cacheRefresh) + return response + }) + + // Save in map + RELOADS.set(fullPage.url, fullPageRefresh) + } + + async reloadContent(url: string) { + let cacheRefresh = CACHEREFRESH.get(url) + + if(cacheRefresh) { + await cacheRefresh + } + + return this.postMessage({ + type: "new content", + url + }) + } + + async reloadPage(url: string) { + let networkFetch = RELOADS.get(url.replace("/_/", "/")) + + if(networkFetch) { + await networkFetch + } + + return this.postMessage({ + type: "reload page", + url + }) + } + + reloadStyles() { + return this.postMessage({ + type: "reload styles" + }) + } + + // Map of clients + static idToClient = new Map() + + static async get(id: string): Promise { + let client = MyClient.idToClient.get(id) + + if(!client) { + client = new MyClient(await self.clients.get(id)) + MyClient.idToClient.set(id, client) + } + + return client + } +} + class MyServiceWorker { cache: MyCache @@ -96,7 +230,7 @@ class MyServiceWorker { }) // Immediate claim helps us gain control over a new client immediately - let immediateClaim = (self as any).clients.claim() + let immediateClaim = self.clients.claim() return Promise.all([ deleteOldCache, @@ -107,8 +241,6 @@ 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)) @@ -144,8 +276,19 @@ class MyServiceWorker { CACHEREFRESH.set(request.url, cacheRefresh) + // Force reload page if styles changed if(request.url.endsWith("/styles")) { - console.log("/styles fetched", response.headers.get("ETag")) + let servedETag = ETAGS.get(request.url) + let newETag = response.headers.get("ETag") + console.log("/styles fetched", servedETag, newETag) + + if(servedETag && servedETag !== newETag) { + cacheRefresh.then(async () => { + console.log("tell client to reload style") + let client = await MyClient.get(evt.clientId) + client.reloadStyles() + }) + } } return response @@ -160,11 +303,6 @@ class MyServiceWorker { let onResponse = response => { servedETag = response.headers.get("ETag") ETAGS.set(request.url, servedETag) - - if(request.url.endsWith("/styles")) { - console.log("/styles served", servedETag) - } - return response } @@ -181,82 +319,12 @@ class MyServiceWorker { return evt.respondWith(networkOrCache) } - onMessage(evt: any) { + async onMessage(evt: ServiceWorkerMessageEvent) { let message = JSON.parse(evt.data) + let clientId = (evt.source as any).id + let client = await MyClient.get(clientId) - switch(message.type) { - case "loaded": - this.onDOMContentLoaded(evt, message.url) - break - } - } - - // onDOMContentLoaded is called when the client sent this service worker - // a message that the page has been loaded. - onDOMContentLoaded(evt: any, url: string) { - 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("/_/") && !url.includes("/_/search/")) { - var prefetch = true - - for(let pattern of EXCLUDECACHE.keys()) { - if(url.includes(pattern)) { - prefetch = false - break - } - } - - if(prefetch) { - this.prefetchFullPage(url) - } - } - - if(!refresh || !servedETag) { - return Promise.resolve() - } - - return refresh.then((response: Response) => { - // When the actual network request was used by the client, response.bodyUsed is set. - // In that case the client is already up to date and we don"t need to tell the client to do a refresh. - if(response.bodyUsed) { - return - } - - // Get the ETag of the cached response we sent to the client earlier. - let eTag = response.headers.get("ETag") - - // Update ETag - ETAGS.set(url, eTag) - - // If the ETag changed, we need to do a reload. - if(eTag !== servedETag) { - return this.forceClientReloadContent(url, evt.source) - } - - // Do nothing - return Promise.resolve() - }) - } - - prefetchFullPage(url: string) { - 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) + client.onMessage(message) } onPush(evt: PushEvent) { @@ -312,51 +380,21 @@ class MyServiceWorker { let notification = evt.notification notification.close() - return (self as any).clients.matchAll().then(function(clientList) { + return self.clients.matchAll().then(function(clientList) { // If we have a link, use that link to open a new window. let url = notification.data if(url) { - return (self as any).clients.openWindow(url) + return self.clients.openWindow(url) } // If there is at least one client, focus it. if(clientList.length > 0) { - return clientList[0].focus() + return (clientList[0] as WindowClient).focus() } // Otherwise open a new window - return (self as any).clients.openWindow("https://notify.moe") - }) - } - - forceClientReloadContent(url: string, eventSource: any) { - 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, 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)) + return self.clients.openWindow("https://notify.moe") }) }