try { self['workbox:window:4.3.1'] && _(); } catch (e) {} // eslint-disable-line /* 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. */ /** * Sends a data object to a service worker via `postMessage` 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 not * resolve. * * @param {ServiceWorker} sw The service worker to send the message to. * @param {Object} data An object to send to the service worker. * @return {Promise} * * @memberof module:workbox-window */ const messageSW = (sw, data) => { return new Promise(resolve => { let messageChannel = new MessageChannel(); messageChannel.port1.onmessage = evt => resolve(evt.data); sw.postMessage(data, [messageChannel.port2]); }); }; try { self['workbox:core:4.3.1'] && _(); } catch (e) {} // eslint-disable-line /* Copyright 2018 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. */ /** * The Deferred class composes Promises in a way that allows for them to be * resolved or rejected from outside the constructor. In most cases promises * should be used directly, but Deferreds can be necessary when the logic to * resolve a promise must be separate. * * @private */ class Deferred { /** * Creates a promise and exposes its resolve and reject functions as methods. */ constructor() { this.promise = new Promise((resolve, reject) => { this.resolve = resolve; this.reject = reject; }); } } /* 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. */ const logger = (() => { let inGroup = false; const methodToColorMap = { debug: `#7f8c8d`, // Gray log: `#2ecc71`, // Green warn: `#f39c12`, // Yellow error: `#c0392b`, // Red groupCollapsed: `#3498db`, // Blue groupEnd: null // No colored prefix on groupEnd }; const print = function (method, args) { if (method === 'groupCollapsed') { // Safari doesn't print all console.groupCollapsed() arguments: // https://bugs.webkit.org/show_bug.cgi?id=182754 if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) { console[method](...args); return; } } const styles = [`background: ${methodToColorMap[method]}`, `border-radius: 0.5em`, `color: white`, `font-weight: bold`, `padding: 2px 0.5em`]; // When in a group, the workbox prefix is not displayed. const logPrefix = inGroup ? [] : ['%cworkbox', styles.join(';')]; console[method](...logPrefix, ...args); if (method === 'groupCollapsed') { inGroup = true; } if (method === 'groupEnd') { inGroup = false; } }; const api = {}; for (const method of Object.keys(methodToColorMap)) { api[method] = (...args) => { print(method, args); }; } return api; })(); /* 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. */ /** * A minimal `EventTarget` shim. * This is necessary because not all browsers support constructable * `EventTarget`, so using a real `EventTarget` will error. * @private */ class EventTargetShim { /** * Creates an event listener registry * * @private */ constructor() { // A registry of event types to listeners. this._eventListenerRegistry = {}; } /** * @param {string} type * @param {Function} listener * @private */ addEventListener(type, listener) { this._getEventListenersByType(type).add(listener); } /** * @param {string} type * @param {Function} listener * @private */ removeEventListener(type, listener) { this._getEventListenersByType(type).delete(listener); } /** * @param {Event} event * @private */ dispatchEvent(event) { event.target = this; this._getEventListenersByType(event.type).forEach(listener => listener(event)); } /** * Returns a Set of listeners associated with the passed event type. * If no handlers have been registered, an empty Set is returned. * * @param {string} type The event type. * @return {Set} An array of handler functions. * @private */ _getEventListenersByType(type) { return this._eventListenerRegistry[type] = this._eventListenerRegistry[type] || new Set(); } } /* 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. */ /** * Returns true if two URLs have the same `.href` property. The URLS can be * relative, and if they are the current location href is used to resolve URLs. * * @private * @param {string} url1 * @param {string} url2 * @return {boolean} */ const urlsMatch = (url1, url2) => { return new URL(url1, location).href === new URL(url2, location).href; }; /* 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. */ /** * A minimal `Event` subclass shim. * This doesn't *actually* subclass `Event` because not all browsers support * constructable `EventTarget`, and using a real `Event` will error. * @private */ class WorkboxEvent { /** * @param {string} type * @param {Object} props */ constructor(type, props) { Object.assign(this, props, { type }); } } /* 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. */ // `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; /** * A class to aid in handling service worker registration, updates, and * reacting to service worker lifecycle events. * * @fires [message]{@link module:workbox-window.Workbox#message} * @fires [installed]{@link module:workbox-window.Workbox#installed} * @fires [waiting]{@link module:workbox-window.Workbox#waiting} * @fires [controlling]{@link module:workbox-window.Workbox#controlling} * @fires [activated]{@link module:workbox-window.Workbox#activated} * @fires [redundant]{@link module:workbox-window.Workbox#redundant} * @fires [externalinstalled]{@link module:workbox-window.Workbox#externalinstalled} * @fires [externalwaiting]{@link module:workbox-window.Workbox#externalwaiting} * @fires [externalactivated]{@link module:workbox-window.Workbox#externalactivated} * * @memberof module:workbox-window */ class Workbox extends EventTargetShim { /** * 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)`. See: * https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register * * @param {string} scriptURL The service worker script associated with this * instance. * @param {Object} [registerOptions] The service worker options associated * with this instance. */ constructor(scriptURL, registerOptions = {}) { super(); this._scriptURL = scriptURL; this._registerOptions = registerOptions; this._updateFoundCount = 0; // Deferreds we can resolve later. this._swDeferred = new Deferred(); this._activeDeferred = new Deferred(); this._controllingDeferred = new Deferred(); // Bind event handler callbacks. this._onMessage = this._onMessage.bind(this); this._onStateChange = this._onStateChange.bind(this); this._onUpdateFound = this._onUpdateFound.bind(this); this._onControllerChange = this._onControllerChange.bind(this); } /** * 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 } = {}) { { 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 => 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._reportWindowReady(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 prevoius // 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)) { // 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. Promise.resolve().then(() => { this.dispatchEvent(new WorkboxEvent('waiting', { sw: waitingSW, wasWaitingBeforeRegister: true })); { 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); } { logger.log('Successfully registered service worker.', this._scriptURL); 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, 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, { once: true }); // Add message listeners. if ('BroadcastChannel' in self) { this._broadcastChannel = new BroadcastChannel('workbox'); this._broadcastChannel.addEventListener('message', this._onMessage); } navigator.serviceWorker.addEventListener('message', this._onMessage); return this._registration; } /** * 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() { 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() { 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} */ async getSW() { // 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 || this._swDeferred.promise; } /** * Sends the passed data object to the service worker registered by this * instance (via [`getSW()`]{@link module: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} */ async messageSW(data) { const sw = await this.getSW(); return messageSW(sw, data); } /** * Checks for a service worker already controlling the page and returns * it if its script URL matchs. * * @private * @return {ServiceWorker|undefined} */ _getControllingSWIfCompatible() { const controller = navigator.serviceWorker.controller; if (controller && urlsMatch(controller.scriptURL, this._scriptURL)) { return controller; } } /** * Registers a service worker for this instances script URL and register * options and tracks the time registration was complete. * * @private */ async _registerScript() { try { const reg = await navigator.serviceWorker.register(this._scriptURL, 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) { { logger.error(error); } // Re-throw the error. throw error; } } /** * Sends a message to the passed service worker that the window is ready. * * @param {ServiceWorker} sw * @private */ _reportWindowReady(sw) { messageSW(sw, { type: 'WINDOW_READY', meta: 'workbox-window' }); } /** * @private */ _onUpdateFound() { const installingSW = this._registration.installing; // 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: let 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) || // 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; this._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._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 (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 */ _onStateChange(originalEvent) { const sw = originalEvent.target; const { state } = sw; const isExternal = sw === this._externalSW; const eventPrefix = isExternal ? 'external' : ''; const eventProps = { sw, originalEvent }; if (!isExternal && this._isUpdate) { eventProps.isUpdate = true; } this.dispatchEvent(new WorkboxEvent(eventPrefix + state, 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 = setTimeout(() => { // Ensure the SW is still waiting (it may now be redundant). if (state === 'installed' && this._registration.waiting === sw) { this.dispatchEvent(new WorkboxEvent(eventPrefix + 'waiting', eventProps)); { 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); } } { 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 */ _onControllerChange(originalEvent) { const sw = this._sw; if (sw === navigator.serviceWorker.controller) { this.dispatchEvent(new WorkboxEvent('controlling', { sw, originalEvent })); { logger.log('Registered service worker now controlling this page.'); } this._controllingDeferred.resolve(sw); } } /** * @private * @param {Event} originalEvent */ _onMessage(originalEvent) { const { data } = originalEvent; this.dispatchEvent(new WorkboxEvent('message', { data, originalEvent })); } } // The jsdoc comments below outline the events this instance may dispatch: /* 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. */ export { Workbox, messageSW }; //# sourceMappingURL=workbox-window.dev.mjs.map