/* Copyright 2019 Google LLC Use of this source code is governed by an MIT-style license that can be found in the LICENSE file or at https://opensource.org/licenses/MIT. */ import {Deferred} from 'workbox-core/_private/Deferred.js'; import {dontWaitFor} from 'workbox-core/_private/dontWaitFor.js'; import {logger} from 'workbox-core/_private/logger.js'; import {TrustedScriptURL} from 'trusted-types/lib'; import {messageSW} from './messageSW.js'; import {WorkboxEventTarget} from './utils/WorkboxEventTarget.js'; import {urlsMatch} from './utils/urlsMatch.js'; import {WorkboxEvent, WorkboxLifecycleEventMap} from './utils/WorkboxEvent.js'; import './_version.js'; // The time a SW must be in the waiting phase before we can conclude // `skipWaiting()` wasn't called. This 200 amount wasn't scientifically // chosen, but it seems to avoid false positives in my testing. const WAITING_TIMEOUT_DURATION = 200; // The amount of time after a registration that we can reasonably conclude // that the registration didn't trigger an update. const REGISTRATION_TIMEOUT_DURATION = 60000; // The de facto standard message that a service worker should be listening for // to trigger a call to skipWaiting(). const SKIP_WAITING_MESSAGE = {type: 'SKIP_WAITING'}; /** * A class to aid in handling service worker registration, updates, and * reacting to service worker lifecycle events. * * @fires {@link workbox-window.Workbox#message} * @fires {@link workbox-window.Workbox#installed} * @fires {@link workbox-window.Workbox#waiting} * @fires {@link workbox-window.Workbox#controlling} * @fires {@link workbox-window.Workbox#activated} * @fires {@link workbox-window.Workbox#redundant} * @memberof workbox-window */ class Workbox extends WorkboxEventTarget { private readonly _scriptURL: string | TrustedScriptURL; private readonly _registerOptions: RegistrationOptions = {}; private _updateFoundCount = 0; // Deferreds we can resolve later. private readonly _swDeferred: Deferred = new Deferred(); private readonly _activeDeferred: Deferred = new Deferred(); private readonly _controllingDeferred: Deferred = new Deferred(); private _registrationTime: DOMHighResTimeStamp = 0; private _isUpdate?: boolean; private _compatibleControllingSW?: ServiceWorker; private _registration?: ServiceWorkerRegistration; private _sw?: ServiceWorker; private readonly _ownSWs: Set = new Set(); private _externalSW?: ServiceWorker; private _waitingTimeout?: number; /** * Creates a new Workbox instance with a script URL and service worker * options. The script URL and options are the same as those used when * calling [navigator.serviceWorker.register(scriptURL, options)](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register). * * @param {string|TrustedScriptURL} scriptURL The service worker script * associated with this instance. Using a * [`TrustedScriptURL`](https://web.dev/trusted-types/) is supported. * @param {Object} [registerOptions] The service worker options associated * with this instance. */ // eslint-disable-next-line @typescript-eslint/ban-types constructor(scriptURL: string | TrustedScriptURL, registerOptions: {} = {}) { super(); this._scriptURL = scriptURL; this._registerOptions = registerOptions; // Add a message listener immediately since messages received during // page load are buffered only until the DOMContentLoaded event: // https://github.com/GoogleChrome/workbox/issues/2202 navigator.serviceWorker.addEventListener('message', this._onMessage); } /** * Registers a service worker for this instances script URL and service * worker options. By default this method delays registration until after * the window has loaded. * * @param {Object} [options] * @param {Function} [options.immediate=false] Setting this to true will * register the service worker immediately, even if the window has * not loaded (not recommended). */ async register({immediate = false} = {}): Promise< ServiceWorkerRegistration | undefined > { if (process.env.NODE_ENV !== 'production') { if (this._registrationTime) { logger.error( 'Cannot re-register a Workbox instance after it has ' + 'been registered. Create a new instance instead.', ); return; } } if (!immediate && document.readyState !== 'complete') { await new Promise((res) => window.addEventListener('load', res)); } // Set this flag to true if any service worker was controlling the page // at registration time. this._isUpdate = Boolean(navigator.serviceWorker.controller); // Before registering, attempt to determine if a SW is already controlling // the page, and if that SW script (and version, if specified) matches this // instance's script. this._compatibleControllingSW = this._getControllingSWIfCompatible(); this._registration = await this._registerScript(); // If we have a compatible controller, store the controller as the "own" // SW, resolve active/controlling deferreds and add necessary listeners. if (this._compatibleControllingSW) { this._sw = this._compatibleControllingSW; this._activeDeferred.resolve(this._compatibleControllingSW); this._controllingDeferred.resolve(this._compatibleControllingSW); this._compatibleControllingSW.addEventListener( 'statechange', this._onStateChange, {once: true}, ); } // If there's a waiting service worker with a matching URL before the // `updatefound` event fires, it likely means that this site is open // in another tab, or the user refreshed the page (and thus the previous // page wasn't fully unloaded before this page started loading). // https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#waiting const waitingSW = this._registration.waiting; if ( waitingSW && urlsMatch(waitingSW.scriptURL, this._scriptURL.toString()) ) { // Store the waiting SW as the "own" Sw, even if it means overwriting // a compatible controller. this._sw = waitingSW; // Run this in the next microtask, so any code that adds an event // listener after awaiting `register()` will get this event. dontWaitFor( Promise.resolve().then(() => { this.dispatchEvent( new WorkboxEvent('waiting', { sw: waitingSW, wasWaitingBeforeRegister: true, }), ); if (process.env.NODE_ENV !== 'production') { logger.warn( 'A service worker was already waiting to activate ' + 'before this script was registered...', ); } }), ); } // If an "own" SW is already set, resolve the deferred. if (this._sw) { this._swDeferred.resolve(this._sw); this._ownSWs.add(this._sw); } if (process.env.NODE_ENV !== 'production') { logger.log( 'Successfully registered service worker.', this._scriptURL.toString(), ); if (navigator.serviceWorker.controller) { if (this._compatibleControllingSW) { logger.debug( 'A service worker with the same script URL ' + 'is already controlling this page.', ); } else { logger.debug( 'A service worker with a different script URL is ' + 'currently controlling the page. The browser is now fetching ' + 'the new script now...', ); } } const currentPageIsOutOfScope = () => { const scopeURL = new URL( this._registerOptions.scope || this._scriptURL.toString(), document.baseURI, ); const scopeURLBasePath = new URL('./', scopeURL.href).pathname; return !location.pathname.startsWith(scopeURLBasePath); }; if (currentPageIsOutOfScope()) { logger.warn( 'The current page is not in scope for the registered ' + 'service worker. Was this a mistake?', ); } } this._registration.addEventListener('updatefound', this._onUpdateFound); navigator.serviceWorker.addEventListener( 'controllerchange', this._onControllerChange, ); return this._registration; } /** * Checks for updates of the registered service worker. */ async update(): Promise { if (!this._registration) { if (process.env.NODE_ENV !== 'production') { logger.error( 'Cannot update a Workbox instance without ' + 'being registered. Register the Workbox instance first.', ); } return; } // Try to update registration await this._registration.update(); } /** * Resolves to the service worker registered by this instance as soon as it * is active. If a service worker was already controlling at registration * time then it will resolve to that if the script URLs (and optionally * script versions) match, otherwise it will wait until an update is found * and activates. * * @return {Promise} */ get active(): Promise { return this._activeDeferred.promise; } /** * Resolves to the service worker registered by this instance as soon as it * is controlling the page. If a service worker was already controlling at * registration time then it will resolve to that if the script URLs (and * optionally script versions) match, otherwise it will wait until an update * is found and starts controlling the page. * Note: the first time a service worker is installed it will active but * not start controlling the page unless `clients.claim()` is called in the * service worker. * * @return {Promise} */ get controlling(): Promise { return this._controllingDeferred.promise; } /** * Resolves with a reference to a service worker that matches the script URL * of this instance, as soon as it's available. * * If, at registration time, there's already an active or waiting service * worker with a matching script URL, it will be used (with the waiting * service worker taking precedence over the active service worker if both * match, since the waiting service worker would have been registered more * recently). * If there's no matching active or waiting service worker at registration * time then the promise will not resolve until an update is found and starts * installing, at which point the installing service worker is used. * * @return {Promise} */ getSW(): Promise { // If `this._sw` is set, resolve with that as we want `getSW()` to // return the correct (new) service worker if an update is found. return this._sw !== undefined ? Promise.resolve(this._sw) : this._swDeferred.promise; } /** * Sends the passed data object to the service worker registered by this * instance (via {@link workbox-window.Workbox#getSW}) and resolves * with a response (if any). * * A response can be set in a message handler in the service worker by * calling `event.ports[0].postMessage(...)`, which will resolve the promise * returned by `messageSW()`. If no response is set, the promise will never * resolve. * * @param {Object} data An object to send to the service worker * @return {Promise} */ // We might be able to change the 'data' type to Record in the future. // eslint-disable-next-line @typescript-eslint/ban-types async messageSW(data: object): Promise { const sw = await this.getSW(); return messageSW(sw, data); } /** * Sends a `{type: 'SKIP_WAITING'}` message to the service worker that's * currently in the `waiting` state associated with the current registration. * * If there is no current registration or no service worker is `waiting`, * calling this will have no effect. */ messageSkipWaiting(): void { if (this._registration && this._registration.waiting) { void messageSW(this._registration.waiting, SKIP_WAITING_MESSAGE); } } /** * Checks for a service worker already controlling the page and returns * it if its script URL matches. * * @private * @return {ServiceWorker|undefined} */ private _getControllingSWIfCompatible() { const controller = navigator.serviceWorker.controller; if ( controller && urlsMatch(controller.scriptURL, this._scriptURL.toString()) ) { return controller; } else { return undefined; } } /** * Registers a service worker for this instances script URL and register * options and tracks the time registration was complete. * * @private */ private async _registerScript() { try { // this._scriptURL may be a TrustedScriptURL, but there's no support for // passing that to register() in lib.dom right now. // https://github.com/GoogleChrome/workbox/issues/2855 const reg = await navigator.serviceWorker.register( this._scriptURL as string, this._registerOptions, ); // Keep track of when registration happened, so it can be used in the // `this._onUpdateFound` heuristic. Also use the presence of this // property as a way to see if `.register()` has been called. this._registrationTime = performance.now(); return reg; } catch (error) { if (process.env.NODE_ENV !== 'production') { logger.error(error); } // Re-throw the error. throw error; } } /** * @private */ private readonly _onUpdateFound = () => { // `this._registration` will never be `undefined` after an update is found. const registration = this._registration!; const installingSW = registration.installing as ServiceWorker; // If the script URL passed to `navigator.serviceWorker.register()` is // different from the current controlling SW's script URL, we know any // successful registration calls will trigger an `updatefound` event. // But if the registered script URL is the same as the current controlling // SW's script URL, we'll only get an `updatefound` event if the file // changed since it was last registered. This can be a problem if the user // opens up the same page in a different tab, and that page registers // a SW that triggers an update. It's a problem because this page has no // good way of knowing whether the `updatefound` event came from the SW // script it registered or from a registration attempt made by a newer // version of the page running in another tab. // To minimize the possibility of a false positive, we use the logic here: const updateLikelyTriggeredExternally = // Since we enforce only calling `register()` once, and since we don't // add the `updatefound` event listener until the `register()` call, if // `_updateFoundCount` is > 0 then it means this method has already // been called, thus this SW must be external this._updateFoundCount > 0 || // If the script URL of the installing SW is different from this // instance's script URL, we know it's definitely not from our // registration. !urlsMatch(installingSW.scriptURL, this._scriptURL.toString()) || // If all of the above are false, then we use a time-based heuristic: // Any `updatefound` event that occurs long after our registration is // assumed to be external. performance.now() > this._registrationTime + REGISTRATION_TIMEOUT_DURATION ? // If any of the above are not true, we assume the update was // triggered by this instance. true : false; if (updateLikelyTriggeredExternally) { this._externalSW = installingSW; registration.removeEventListener('updatefound', this._onUpdateFound); } else { // If the update was not triggered externally we know the installing // SW is the one we registered, so we set it. this._sw = installingSW; this._ownSWs.add(installingSW); this._swDeferred.resolve(installingSW); // The `installing` state isn't something we have a dedicated // callback for, but we do log messages for it in development. if (process.env.NODE_ENV !== 'production') { if (navigator.serviceWorker.controller) { logger.log('Updated service worker found. Installing now...'); } else { logger.log('Service worker is installing...'); } } } // Increment the `updatefound` count, so future invocations of this // method can be sure they were triggered externally. ++this._updateFoundCount; // Add a `statechange` listener regardless of whether this update was // triggered externally, since we have callbacks for both. installingSW.addEventListener('statechange', this._onStateChange); }; /** * @private * @param {Event} originalEvent */ private readonly _onStateChange = (originalEvent: Event) => { // `this._registration` will never be `undefined` after an update is found. const registration = this._registration!; const sw = originalEvent.target as ServiceWorker; const {state} = sw; const isExternal = sw === this._externalSW; const eventProps: { sw: ServiceWorker; originalEvent: Event; isUpdate?: boolean; isExternal: boolean; } = { sw, isExternal, originalEvent, }; if (!isExternal && this._isUpdate) { eventProps.isUpdate = true; } this.dispatchEvent( new WorkboxEvent(state as keyof WorkboxLifecycleEventMap, eventProps), ); if (state === 'installed') { // This timeout is used to ignore cases where the service worker calls // `skipWaiting()` in the install event, thus moving it directly in the // activating state. (Since all service workers *must* go through the // waiting phase, the only way to detect `skipWaiting()` called in the // install event is to observe that the time spent in the waiting phase // is very short.) // NOTE: we don't need separate timeouts for the own and external SWs // since they can't go through these phases at the same time. this._waitingTimeout = self.setTimeout(() => { // Ensure the SW is still waiting (it may now be redundant). if (state === 'installed' && registration.waiting === sw) { this.dispatchEvent(new WorkboxEvent('waiting', eventProps)); if (process.env.NODE_ENV !== 'production') { if (isExternal) { logger.warn( 'An external service worker has installed but is ' + 'waiting for this client to close before activating...', ); } else { logger.warn( 'The service worker has installed but is waiting ' + 'for existing clients to close before activating...', ); } } } }, WAITING_TIMEOUT_DURATION); } else if (state === 'activating') { clearTimeout(this._waitingTimeout); if (!isExternal) { this._activeDeferred.resolve(sw); } } if (process.env.NODE_ENV !== 'production') { switch (state) { case 'installed': if (isExternal) { logger.warn( 'An external service worker has installed. ' + 'You may want to suggest users reload this page.', ); } else { logger.log('Registered service worker installed.'); } break; case 'activated': if (isExternal) { logger.warn('An external service worker has activated.'); } else { logger.log('Registered service worker activated.'); if (sw !== navigator.serviceWorker.controller) { logger.warn( 'The registered service worker is active but ' + 'not yet controlling the page. Reload or run ' + '`clients.claim()` in the service worker.', ); } } break; case 'redundant': if (sw === this._compatibleControllingSW) { logger.log('Previously controlling service worker now redundant!'); } else if (!isExternal) { logger.log('Registered service worker now redundant!'); } break; } } }; /** * @private * @param {Event} originalEvent */ private readonly _onControllerChange = (originalEvent: Event) => { const sw = this._sw; const isExternal = sw !== navigator.serviceWorker.controller; // Unconditionally dispatch the controlling event, with isExternal set // to distinguish between controller changes due to the initial registration // vs. an update-check or other tab's registration. // See https://github.com/GoogleChrome/workbox/issues/2786 this.dispatchEvent( new WorkboxEvent('controlling', { isExternal, originalEvent, sw, isUpdate: this._isUpdate, }), ); if (!isExternal) { if (process.env.NODE_ENV !== 'production') { logger.log('Registered service worker now controlling this page.'); } this._controllingDeferred.resolve(sw); } }; /** * @private * @param {Event} originalEvent */ private readonly _onMessage = async (originalEvent: MessageEvent) => { // Can't change type 'any' of data. // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment const {data, ports, source} = originalEvent; // Wait until there's an "own" service worker. This is used to buffer // `message` events that may be received prior to calling `register()`. await this.getSW(); // If the service worker that sent the message is in the list of own // service workers for this instance, dispatch a `message` event. // NOTE: we check for all previously owned service workers rather than // just the current one because some messages (e.g. cache updates) use // a timeout when sent and may be delayed long enough for a service worker // update to be found. if (this._ownSWs.has(source as ServiceWorker)) { this.dispatchEvent( new WorkboxEvent('message', { // Can't change type 'any' of data. // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment data, originalEvent, ports, sw: source as ServiceWorker, }), ); } }; } export {Workbox}; // The jsdoc comments below outline the events this instance may dispatch: // ----------------------------------------------------------------------- /** * The `message` event is dispatched any time a `postMessage` is received. * * @event workbox-window.Workbox#message * @type {WorkboxEvent} * @property {*} data The `data` property from the original `message` event. * @property {Event} originalEvent The original [`message`]{@link https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent} * event. * @property {string} type `message`. * @property {MessagePort[]} ports The `ports` value from `originalEvent`. * @property {Workbox} target The `Workbox` instance. */ /** * The `installed` event is dispatched if the state of a * {@link workbox-window.Workbox} instance's * {@link https://developers.google.com/web/tools/workbox/modules/workbox-precaching#def-registered-sw|registered service worker} * changes to `installed`. * * Then can happen either the very first time a service worker is installed, * or after an update to the current service worker is found. In the case * of an update being found, the event's `isUpdate` property will be `true`. * * @event workbox-window.Workbox#installed * @type {WorkboxEvent} * @property {ServiceWorker} sw The service worker instance. * @property {Event} originalEvent The original [`statechange`]{@link https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker/onstatechange} * event. * @property {boolean|undefined} isUpdate True if a service worker was already * controlling when this `Workbox` instance called `register()`. * @property {boolean|undefined} isExternal True if this event is associated * with an [external service worker]{@link https://developers.google.com/web/tools/workbox/modules/workbox-window#when_an_unexpected_version_of_the_service_worker_is_found}. * @property {string} type `installed`. * @property {Workbox} target The `Workbox` instance. */ /** * The `waiting` event is dispatched if the state of a * {@link workbox-window.Workbox} instance's * [registered service worker]{@link https://developers.google.com/web/tools/workbox/modules/workbox-precaching#def-registered-sw} * changes to `installed` and then doesn't immediately change to `activating`. * It may also be dispatched if a service worker with the same * [`scriptURL`]{@link https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker/scriptURL} * was already waiting when the {@link workbox-window.Workbox#register} * method was called. * * @event workbox-window.Workbox#waiting * @type {WorkboxEvent} * @property {ServiceWorker} sw The service worker instance. * @property {Event|undefined} originalEvent The original * [`statechange`]{@link https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker/onstatechange} * event, or `undefined` in the case where the service worker was waiting * to before `.register()` was called. * @property {boolean|undefined} isUpdate True if a service worker was already * controlling when this `Workbox` instance called `register()`. * @property {boolean|undefined} isExternal True if this event is associated * with an [external service worker]{@link https://developers.google.com/web/tools/workbox/modules/workbox-window#when_an_unexpected_version_of_the_service_worker_is_found}. * @property {boolean|undefined} wasWaitingBeforeRegister True if a service worker with * a matching `scriptURL` was already waiting when this `Workbox` * instance called `register()`. * @property {string} type `waiting`. * @property {Workbox} target The `Workbox` instance. */ /** * The `controlling` event is dispatched if a * [`controllerchange`]{@link https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/oncontrollerchange} * fires on the service worker [container]{@link https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer} * and the [`scriptURL`]{@link https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker/scriptURL} * of the new [controller]{@link https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/controller} * matches the `scriptURL` of the `Workbox` instance's * [registered service worker]{@link https://developers.google.com/web/tools/workbox/modules/workbox-precaching#def-registered-sw}. * * @event workbox-window.Workbox#controlling * @type {WorkboxEvent} * @property {ServiceWorker} sw The service worker instance. * @property {Event} originalEvent The original [`controllerchange`]{@link https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/oncontrollerchange} * event. * @property {boolean|undefined} isUpdate True if a service worker was already * controlling when this service worker was registered. * @property {boolean|undefined} isExternal True if this event is associated * with an [external service worker]{@link https://developers.google.com/web/tools/workbox/modules/workbox-window#when_an_unexpected_version_of_the_service_worker_is_found}. * @property {string} type `controlling`. * @property {Workbox} target The `Workbox` instance. */ /** * The `activated` event is dispatched if the state of a * {@link workbox-window.Workbox} instance's * {@link https://developers.google.com/web/tools/workbox/modules/workbox-precaching#def-registered-sw|registered service worker} * changes to `activated`. * * @event workbox-window.Workbox#activated * @type {WorkboxEvent} * @property {ServiceWorker} sw The service worker instance. * @property {Event} originalEvent The original [`statechange`]{@link https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker/onstatechange} * event. * @property {boolean|undefined} isUpdate True if a service worker was already * controlling when this `Workbox` instance called `register()`. * @property {boolean|undefined} isExternal True if this event is associated * with an [external service worker]{@link https://developers.google.com/web/tools/workbox/modules/workbox-window#when_an_unexpected_version_of_the_service_worker_is_found}. * @property {string} type `activated`. * @property {Workbox} target The `Workbox` instance. */ /** * The `redundant` event is dispatched if the state of a * {@link workbox-window.Workbox} instance's * [registered service worker]{@link https://developers.google.com/web/tools/workbox/modules/workbox-precaching#def-registered-sw} * changes to `redundant`. * * @event workbox-window.Workbox#redundant * @type {WorkboxEvent} * @property {ServiceWorker} sw The service worker instance. * @property {Event} originalEvent The original [`statechange`]{@link https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker/onstatechange} * event. * @property {boolean|undefined} isUpdate True if a service worker was already * controlling when this `Workbox` instance called `register()`. * @property {string} type `redundant`. * @property {Workbox} target The `Workbox` instance. */