UNPKG

24.2 kBJavaScriptView Raw
1try {
2 self['workbox:window:4.3.0'] && _();
3} catch (e) {} // eslint-disable-line
4
5/*
6 Copyright 2019 Google LLC
7
8 Use of this source code is governed by an MIT-style
9 license that can be found in the LICENSE file or at
10 https://opensource.org/licenses/MIT.
11*/
12/**
13 * Sends a data object to a service worker via `postMessage` and resolves with
14 * a response (if any).
15 *
16 * A response can be set in a message handler in the service worker by
17 * calling `event.ports[0].postMessage(...)`, which will resolve the promise
18 * returned by `messageSW()`. If no response is set, the promise will not
19 * resolve.
20 *
21 * @param {ServiceWorker} sw The service worker to send the message to.
22 * @param {Object} data An object to send to the service worker.
23 * @return {Promise<Object|undefined>}
24 *
25 * @memberof module:workbox-window
26 */
27
28const messageSW = (sw, data) => {
29 return new Promise(resolve => {
30 let messageChannel = new MessageChannel();
31
32 messageChannel.port1.onmessage = evt => resolve(evt.data);
33
34 sw.postMessage(data, [messageChannel.port2]);
35 });
36};
37
38try {
39 self['workbox:core:4.3.0'] && _();
40} catch (e) {} // eslint-disable-line
41
42/*
43 Copyright 2018 Google LLC
44
45 Use of this source code is governed by an MIT-style
46 license that can be found in the LICENSE file or at
47 https://opensource.org/licenses/MIT.
48*/
49/**
50 * The Deferred class composes Promises in a way that allows for them to be
51 * resolved or rejected from outside the constructor. In most cases promises
52 * should be used directly, but Deferreds can be necessary when the logic to
53 * resolve a promise must be separate.
54 *
55 * @private
56 */
57
58class Deferred {
59 /**
60 * Creates a promise and exposes its resolve and reject functions as methods.
61 */
62 constructor() {
63 this.promise = new Promise((resolve, reject) => {
64 this.resolve = resolve;
65 this.reject = reject;
66 });
67 }
68
69}
70
71/*
72 Copyright 2019 Google LLC
73 Use of this source code is governed by an MIT-style
74 license that can be found in the LICENSE file or at
75 https://opensource.org/licenses/MIT.
76*/
77const logger = (() => {
78 let inGroup = false;
79 const methodToColorMap = {
80 debug: `#7f8c8d`,
81 // Gray
82 log: `#2ecc71`,
83 // Green
84 warn: `#f39c12`,
85 // Yellow
86 error: `#c0392b`,
87 // Red
88 groupCollapsed: `#3498db`,
89 // Blue
90 groupEnd: null // No colored prefix on groupEnd
91
92 };
93
94 const print = function (method, args) {
95 if (method === 'groupCollapsed') {
96 // Safari doesn't print all console.groupCollapsed() arguments:
97 // https://bugs.webkit.org/show_bug.cgi?id=182754
98 if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
99 console[method](...args);
100 return;
101 }
102 }
103
104 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.
105
106 const logPrefix = inGroup ? [] : ['%cworkbox', styles.join(';')];
107 console[method](...logPrefix, ...args);
108
109 if (method === 'groupCollapsed') {
110 inGroup = true;
111 }
112
113 if (method === 'groupEnd') {
114 inGroup = false;
115 }
116 };
117
118 const api = {};
119
120 for (const method of Object.keys(methodToColorMap)) {
121 api[method] = (...args) => {
122 print(method, args);
123 };
124 }
125
126 return api;
127})();
128
129/*
130 Copyright 2019 Google LLC
131
132 Use of this source code is governed by an MIT-style
133 license that can be found in the LICENSE file or at
134 https://opensource.org/licenses/MIT.
135*/
136/**
137 * A minimal `EventTarget` shim.
138 * This is necessary because not all browsers support constructable
139 * `EventTarget`, so using a real `EventTarget` will error.
140 * @private
141 */
142
143class EventTargetShim {
144 /**
145 * Creates an event listener registry
146 *
147 * @private
148 */
149 constructor() {
150 // A registry of event types to listeners.
151 this._eventListenerRegistry = {};
152 }
153 /**
154 * @param {string} type
155 * @param {Function} listener
156 * @private
157 */
158
159
160 addEventListener(type, listener) {
161 this._getEventListenersByType(type).add(listener);
162 }
163 /**
164 * @param {string} type
165 * @param {Function} listener
166 * @private
167 */
168
169
170 removeEventListener(type, listener) {
171 this._getEventListenersByType(type).delete(listener);
172 }
173 /**
174 * @param {Event} event
175 * @private
176 */
177
178
179 dispatchEvent(event) {
180 event.target = this;
181
182 this._getEventListenersByType(event.type).forEach(listener => listener(event));
183 }
184 /**
185 * Returns a Set of listeners associated with the passed event type.
186 * If no handlers have been registered, an empty Set is returned.
187 *
188 * @param {string} type The event type.
189 * @return {Set} An array of handler functions.
190 * @private
191 */
192
193
194 _getEventListenersByType(type) {
195 return this._eventListenerRegistry[type] = this._eventListenerRegistry[type] || new Set();
196 }
197
198}
199
200/*
201 Copyright 2019 Google LLC
202
203 Use of this source code is governed by an MIT-style
204 license that can be found in the LICENSE file or at
205 https://opensource.org/licenses/MIT.
206*/
207/**
208 * Returns true if two URLs have the same `.href` property. The URLS can be
209 * relative, and if they are the current location href is used to resolve URLs.
210 *
211 * @private
212 * @param {string} url1
213 * @param {string} url2
214 * @return {boolean}
215 */
216
217const urlsMatch = (url1, url2) => {
218 return new URL(url1, location).href === new URL(url2, location).href;
219};
220
221/*
222 Copyright 2019 Google LLC
223
224 Use of this source code is governed by an MIT-style
225 license that can be found in the LICENSE file or at
226 https://opensource.org/licenses/MIT.
227*/
228/**
229 * A minimal `Event` subclass shim.
230 * This doesn't *actually* subclass `Event` because not all browsers support
231 * constructable `EventTarget`, and using a real `Event` will error.
232 * @private
233 */
234
235class WorkboxEvent {
236 /**
237 * @param {string} type
238 * @param {Object} props
239 */
240 constructor(type, props) {
241 Object.assign(this, props, {
242 type
243 });
244 }
245
246}
247
248/*
249 Copyright 2019 Google LLC
250
251 Use of this source code is governed by an MIT-style
252 license that can be found in the LICENSE file or at
253 https://opensource.org/licenses/MIT.
254*/
255// `skipWaiting()` wasn't called. This 200 amount wasn't scientifically
256// chosen, but it seems to avoid false positives in my testing.
257
258const WAITING_TIMEOUT_DURATION = 200; // The amount of time after a registration that we can reasonably conclude
259// that the registration didn't trigger an update.
260
261const REGISTRATION_TIMEOUT_DURATION = 60000;
262/**
263 * A class to aid in handling service worker registration, updates, and
264 * reacting to service worker lifecycle events.
265 *
266 * @fires [message]{@link module:workbox-window.Workbox#message}
267 * @fires [installed]{@link module:workbox-window.Workbox#installed}
268 * @fires [waiting]{@link module:workbox-window.Workbox#waiting}
269 * @fires [controlling]{@link module:workbox-window.Workbox#controlling}
270 * @fires [activated]{@link module:workbox-window.Workbox#activated}
271 * @fires [redundant]{@link module:workbox-window.Workbox#redundant}
272 * @fires [externalinstalled]{@link module:workbox-window.Workbox#externalinstalled}
273 * @fires [externalwaiting]{@link module:workbox-window.Workbox#externalwaiting}
274 * @fires [externalactivated]{@link module:workbox-window.Workbox#externalactivated}
275 *
276 * @memberof module:workbox-window
277 */
278
279class Workbox extends EventTargetShim {
280 /**
281 * Creates a new Workbox instance with a script URL and service worker
282 * options. The script URL and options are the same as those used when
283 * calling `navigator.serviceWorker.register(scriptURL, options)`. See:
284 * https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register
285 *
286 * @param {string} scriptURL The service worker script associated with this
287 * instance.
288 * @param {Object} [registerOptions] The service worker options associated
289 * with this instance.
290 */
291 constructor(scriptURL, registerOptions = {}) {
292 super();
293 this._scriptURL = scriptURL;
294 this._registerOptions = registerOptions;
295 this._updateFoundCount = 0; // Deferreds we can resolve later.
296
297 this._swDeferred = new Deferred();
298 this._activeDeferred = new Deferred();
299 this._controllingDeferred = new Deferred(); // Bind event handler callbacks.
300
301 this._onMessage = this._onMessage.bind(this);
302 this._onStateChange = this._onStateChange.bind(this);
303 this._onUpdateFound = this._onUpdateFound.bind(this);
304 this._onControllerChange = this._onControllerChange.bind(this);
305 }
306 /**
307 * Registers a service worker for this instances script URL and service
308 * worker options. By default this method delays registration until after
309 * the window has loaded.
310 *
311 * @param {Object} [options]
312 * @param {Function} [options.immediate=false] Setting this to true will
313 * register the service worker immediately, even if the window has
314 * not loaded (not recommended).
315 */
316
317
318 async register({
319 immediate = false
320 } = {}) {
321 {
322 if (this._registrationTime) {
323 logger.error('Cannot re-register a Workbox instance after it has ' + 'been registered. Create a new instance instead.');
324 return;
325 }
326 }
327
328 if (!immediate && document.readyState !== 'complete') {
329 await new Promise(res => addEventListener('load', res));
330 } // Set this flag to true if any service worker was controlling the page
331 // at registration time.
332
333
334 this._isUpdate = Boolean(navigator.serviceWorker.controller); // Before registering, attempt to determine if a SW is already controlling
335 // the page, and if that SW script (and version, if specified) matches this
336 // instance's script.
337
338 this._compatibleControllingSW = this._getControllingSWIfCompatible();
339 this._registration = await this._registerScript(); // If we have a compatible controller, store the controller as the "own"
340 // SW, resolve active/controlling deferreds and add necessary listeners.
341
342 if (this._compatibleControllingSW) {
343 this._sw = this._compatibleControllingSW;
344
345 this._activeDeferred.resolve(this._compatibleControllingSW);
346
347 this._controllingDeferred.resolve(this._compatibleControllingSW);
348
349 this._reportWindowReady(this._compatibleControllingSW);
350
351 this._compatibleControllingSW.addEventListener('statechange', this._onStateChange, {
352 once: true
353 });
354 } // If there's a waiting service worker with a matching URL before the
355 // `updatefound` event fires, it likely means that this site is open
356 // in another tab, or the user refreshed the page (and thus the prevoius
357 // page wasn't fully unloaded before this page started loading).
358 // https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#waiting
359
360
361 const waitingSW = this._registration.waiting;
362
363 if (waitingSW && urlsMatch(waitingSW.scriptURL, this._scriptURL)) {
364 // Store the waiting SW as the "own" Sw, even if it means overwriting
365 // a compatible controller.
366 this._sw = waitingSW; // Run this in the next microtask, so any code that adds an event
367 // listener after awaiting `register()` will get this event.
368
369 Promise.resolve().then(() => {
370 this.dispatchEvent(new WorkboxEvent('waiting', {
371 sw: waitingSW,
372 wasWaitingBeforeRegister: true
373 }));
374
375 {
376 logger.warn('A service worker was already waiting to activate ' + 'before this script was registered...');
377 }
378 });
379 } // If an "own" SW is already set, resolve the deferred.
380
381
382 if (this._sw) {
383 this._swDeferred.resolve(this._sw);
384 }
385
386 {
387 logger.log('Successfully registered service worker.', this._scriptURL);
388
389 if (navigator.serviceWorker.controller) {
390 if (this._compatibleControllingSW) {
391 logger.debug('A service worker with the same script URL ' + 'is already controlling this page.');
392 } else {
393 logger.debug('A service worker with a different script URL is ' + 'currently controlling the page. The browser is now fetching ' + 'the new script now...');
394 }
395 }
396
397 const currentPageIsOutOfScope = () => {
398 const scopeURL = new URL(this._registerOptions.scope || this._scriptURL, document.baseURI);
399 const scopeURLBasePath = new URL('./', scopeURL.href).pathname;
400 return !location.pathname.startsWith(scopeURLBasePath);
401 };
402
403 if (currentPageIsOutOfScope()) {
404 logger.warn('The current page is not in scope for the registered ' + 'service worker. Was this a mistake?');
405 }
406 }
407
408 this._registration.addEventListener('updatefound', this._onUpdateFound);
409
410 navigator.serviceWorker.addEventListener('controllerchange', this._onControllerChange, {
411 once: true
412 }); // Add message listeners.
413
414 if ('BroadcastChannel' in self) {
415 this._broadcastChannel = new BroadcastChannel('workbox');
416
417 this._broadcastChannel.addEventListener('message', this._onMessage);
418 }
419
420 navigator.serviceWorker.addEventListener('message', this._onMessage);
421 return this._registration;
422 }
423 /**
424 * Resolves to the service worker registered by this instance as soon as it
425 * is active. If a service worker was already controlling at registration
426 * time then it will resolve to that if the script URLs (and optionally
427 * script versions) match, otherwise it will wait until an update is found
428 * and activates.
429 *
430 * @return {Promise<ServiceWorker>}
431 */
432
433
434 get active() {
435 return this._activeDeferred.promise;
436 }
437 /**
438 * Resolves to the service worker registered by this instance as soon as it
439 * is controlling the page. If a service worker was already controlling at
440 * registration time then it will resolve to that if the script URLs (and
441 * optionally script versions) match, otherwise it will wait until an update
442 * is found and starts controlling the page.
443 * Note: the first time a service worker is installed it will active but
444 * not start controlling the page unless `clients.claim()` is called in the
445 * service worker.
446 *
447 * @return {Promise<ServiceWorker>}
448 */
449
450
451 get controlling() {
452 return this._controllingDeferred.promise;
453 }
454 /**
455 * Resolves with a reference to a service worker that matches the script URL
456 * of this instance, as soon as it's available.
457 *
458 * If, at registration time, there's already an active or waiting service
459 * worker with a matching script URL, it will be used (with the waiting
460 * service worker taking precedence over the active service worker if both
461 * match, since the waiting service worker would have been registered more
462 * recently).
463 * If there's no matching active or waiting service worker at registration
464 * time then the promise will not resolve until an update is found and starts
465 * installing, at which point the installing service worker is used.
466 *
467 * @return {Promise<ServiceWorker>}
468 */
469
470
471 async getSW() {
472 // If `this._sw` is set, resolve with that as we want `getSW()` to
473 // return the correct (new) service worker if an update is found.
474 return this._sw || this._swDeferred.promise;
475 }
476 /**
477 * Sends the passed data object to the service worker registered by this
478 * instance (via [`getSW()`]{@link module:workbox-window.Workbox#getSW}) and resolves
479 * with a response (if any).
480 *
481 * A response can be set in a message handler in the service worker by
482 * calling `event.ports[0].postMessage(...)`, which will resolve the promise
483 * returned by `messageSW()`. If no response is set, the promise will never
484 * resolve.
485 *
486 * @param {Object} data An object to send to the service worker
487 * @return {Promise<Object>}
488 */
489
490
491 async messageSW(data) {
492 const sw = await this.getSW();
493 return messageSW(sw, data);
494 }
495 /**
496 * Checks for a service worker already controlling the page and returns
497 * it if its script URL matchs.
498 *
499 * @private
500 * @return {ServiceWorker|undefined}
501 */
502
503
504 _getControllingSWIfCompatible() {
505 const controller = navigator.serviceWorker.controller;
506
507 if (controller && urlsMatch(controller.scriptURL, this._scriptURL)) {
508 return controller;
509 }
510 }
511 /**
512 * Registers a service worker for this instances script URL and register
513 * options and tracks the time registration was complete.
514 *
515 * @private
516 */
517
518
519 async _registerScript() {
520 try {
521 const reg = await navigator.serviceWorker.register(this._scriptURL, this._registerOptions); // Keep track of when registration happened, so it can be used in the
522 // `this._onUpdateFound` heuristic. Also use the presence of this
523 // property as a way to see if `.register()` has been called.
524
525 this._registrationTime = performance.now();
526 return reg;
527 } catch (error) {
528 {
529 logger.error(error);
530 } // Re-throw the error.
531
532
533 throw error;
534 }
535 }
536 /**
537 * Sends a message to the passed service worker that the window is ready.
538 *
539 * @param {ServiceWorker} sw
540 * @private
541 */
542
543
544 _reportWindowReady(sw) {
545 messageSW(sw, {
546 type: 'WINDOW_READY',
547 meta: 'workbox-window'
548 });
549 }
550 /**
551 * @private
552 */
553
554
555 _onUpdateFound() {
556 const installingSW = this._registration.installing; // If the script URL passed to `navigator.serviceWorker.register()` is
557 // different from the current controlling SW's script URL, we know any
558 // successful registration calls will trigger an `updatefound` event.
559 // But if the registered script URL is the same as the current controlling
560 // SW's script URL, we'll only get an `updatefound` event if the file
561 // changed since it was last registered. This can be a problem if the user
562 // opens up the same page in a different tab, and that page registers
563 // a SW that triggers an update. It's a problem because this page has no
564 // good way of knowing whether the `updatefound` event came from the SW
565 // script it registered or from a registration attempt made by a newer
566 // version of the page running in another tab.
567 // To minimize the possibility of a false positive, we use the logic here:
568
569 let updateLikelyTriggeredExternally = // Since we enforce only calling `register()` once, and since we don't
570 // add the `updatefound` event listener until the `register()` call, if
571 // `_updateFoundCount` is > 0 then it means this method has already
572 // been called, thus this SW must be external
573 this._updateFoundCount > 0 || // If the script URL of the installing SW is different from this
574 // instance's script URL, we know it's definitely not from our
575 // registration.
576 !urlsMatch(installingSW.scriptURL, this._scriptURL) || // If all of the above are false, then we use a time-based heuristic:
577 // Any `updatefound` event that occurs long after our registration is
578 // assumed to be external.
579 performance.now() > this._registrationTime + REGISTRATION_TIMEOUT_DURATION ? // If any of the above are not true, we assume the update was
580 // triggered by this instance.
581 true : false;
582
583 if (updateLikelyTriggeredExternally) {
584 this._externalSW = installingSW;
585
586 this._registration.removeEventListener('updatefound', this._onUpdateFound);
587 } else {
588 // If the update was not triggered externally we know the installing
589 // SW is the one we registered, so we set it.
590 this._sw = installingSW;
591
592 this._swDeferred.resolve(installingSW); // The `installing` state isn't something we have a dedicated
593 // callback for, but we do log messages for it in development.
594
595
596 {
597 if (navigator.serviceWorker.controller) {
598 logger.log('Updated service worker found. Installing now...');
599 } else {
600 logger.log('Service worker is installing...');
601 }
602 }
603 } // Increment the `updatefound` count, so future invocations of this
604 // method can be sure they were triggered externally.
605
606
607 ++this._updateFoundCount; // Add a `statechange` listener regardless of whether this update was
608 // triggered externally, since we have callbacks for both.
609
610 installingSW.addEventListener('statechange', this._onStateChange);
611 }
612 /**
613 * @private
614 * @param {Event} originalEvent
615 */
616
617
618 _onStateChange(originalEvent) {
619 const sw = originalEvent.target;
620 const {
621 state
622 } = sw;
623 const isExternal = sw === this._externalSW;
624 const eventPrefix = isExternal ? 'external' : '';
625 const eventProps = {
626 sw,
627 originalEvent
628 };
629
630 if (!isExternal && this._isUpdate) {
631 eventProps.isUpdate = true;
632 }
633
634 this.dispatchEvent(new WorkboxEvent(eventPrefix + state, eventProps));
635
636 if (state === 'installed') {
637 // This timeout is used to ignore cases where the service worker calls
638 // `skipWaiting()` in the install event, thus moving it directly in the
639 // activating state. (Since all service workers *must* go through the
640 // waiting phase, the only way to detect `skipWaiting()` called in the
641 // install event is to observe that the time spent in the waiting phase
642 // is very short.)
643 // NOTE: we don't need separate timeouts for the own and external SWs
644 // since they can't go through these phases at the same time.
645 this._waitingTimeout = setTimeout(() => {
646 // Ensure the SW is still waiting (it may now be redundant).
647 if (state === 'installed' && this._registration.waiting === sw) {
648 this.dispatchEvent(new WorkboxEvent(eventPrefix + 'waiting', eventProps));
649
650 {
651 if (isExternal) {
652 logger.warn('An external service worker has installed but is ' + 'waiting for this client to close before activating...');
653 } else {
654 logger.warn('The service worker has installed but is waiting ' + 'for existing clients to close before activating...');
655 }
656 }
657 }
658 }, WAITING_TIMEOUT_DURATION);
659 } else if (state === 'activating') {
660 clearTimeout(this._waitingTimeout);
661
662 if (!isExternal) {
663 this._activeDeferred.resolve(sw);
664 }
665 }
666
667 {
668 switch (state) {
669 case 'installed':
670 if (isExternal) {
671 logger.warn('An external service worker has installed. ' + 'You may want to suggest users reload this page.');
672 } else {
673 logger.log('Registered service worker installed.');
674 }
675
676 break;
677
678 case 'activated':
679 if (isExternal) {
680 logger.warn('An external service worker has activated.');
681 } else {
682 logger.log('Registered service worker activated.');
683
684 if (sw !== navigator.serviceWorker.controller) {
685 logger.warn('The registered service worker is active but ' + 'not yet controlling the page. Reload or run ' + '`clients.claim()` in the service worker.');
686 }
687 }
688
689 break;
690
691 case 'redundant':
692 if (sw === this._compatibleControllingSW) {
693 logger.log('Previously controlling service worker now redundant!');
694 } else if (!isExternal) {
695 logger.log('Registered service worker now redundant!');
696 }
697
698 break;
699 }
700 }
701 }
702 /**
703 * @private
704 * @param {Event} originalEvent
705 */
706
707
708 _onControllerChange(originalEvent) {
709 const sw = this._sw;
710
711 if (sw === navigator.serviceWorker.controller) {
712 this.dispatchEvent(new WorkboxEvent('controlling', {
713 sw,
714 originalEvent
715 }));
716
717 {
718 logger.log('Registered service worker now controlling this page.');
719 }
720
721 this._controllingDeferred.resolve(sw);
722 }
723 }
724 /**
725 * @private
726 * @param {Event} originalEvent
727 */
728
729
730 _onMessage(originalEvent) {
731 const {
732 data
733 } = originalEvent;
734 this.dispatchEvent(new WorkboxEvent('message', {
735 data,
736 originalEvent
737 }));
738 }
739
740} // The jsdoc comments below outline the events this instance may dispatch:
741
742/*
743 Copyright 2019 Google LLC
744
745 Use of this source code is governed by an MIT-style
746 license that can be found in the LICENSE file or at
747 https://opensource.org/licenses/MIT.
748*/
749
750export { Workbox, messageSW };
751