From 12d617f010fe00494623d43fc5dc2f2c47b5088c Mon Sep 17 00:00:00 2001 From: Adam Rackis Date: Fri, 19 Oct 2018 21:23:28 -0500 Subject: [PATCH 1/5] Tweak onUpdate callback to also fire when a new service worker is installed and waiting --- .../template/src/serviceWorker.js | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/packages/react-scripts/template/src/serviceWorker.js b/packages/react-scripts/template/src/serviceWorker.js index 0bece46ae65..c5c59864c24 100644 --- a/packages/react-scripts/template/src/serviceWorker.js +++ b/packages/react-scripts/template/src/serviceWorker.js @@ -58,23 +58,16 @@ function registerValidSW(swUrl, config) { navigator.serviceWorker .register(swUrl) .then(registration => { + //a new service worker has previously finished installing, and is now waiting + if (registration.waiting && registration.active) { + newerSwAvailable(); + } registration.onupdatefound = () => { const installingWorker = registration.installing; installingWorker.onstatechange = () => { if (installingWorker.state === 'installed') { if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' - ); - - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } + newerSwAvailable(); } else { // At this point, everything has been precached. // It's the perfect time to display a @@ -89,6 +82,18 @@ function registerValidSW(swUrl, config) { } }; }; + function newerSwAvailable(){ + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + 'New content is available and will be used when all ' + + 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' + ); + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } }) .catch(error => { console.error('Error during service worker registration:', error); From 86a30370db9e0ddd0c468d66ccf89982f28740b7 Mon Sep 17 00:00:00 2001 From: Adam Rackis Date: Tue, 6 Nov 2018 20:53:13 -0600 Subject: [PATCH 2/5] pass new sw to onUpdate callback, so client code can postMessage to it, as needed --- packages/react-scripts/template/src/serviceWorker.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/template/src/serviceWorker.js b/packages/react-scripts/template/src/serviceWorker.js index c5c59864c24..baa23abb776 100644 --- a/packages/react-scripts/template/src/serviceWorker.js +++ b/packages/react-scripts/template/src/serviceWorker.js @@ -60,14 +60,14 @@ function registerValidSW(swUrl, config) { .then(registration => { //a new service worker has previously finished installing, and is now waiting if (registration.waiting && registration.active) { - newerSwAvailable(); + newerSwAvailable(registration.waiting); } registration.onupdatefound = () => { const installingWorker = registration.installing; installingWorker.onstatechange = () => { if (installingWorker.state === 'installed') { if (navigator.serviceWorker.controller) { - newerSwAvailable(); + newerSwAvailable(installingWorker); } else { // At this point, everything has been precached. // It's the perfect time to display a @@ -82,7 +82,7 @@ function registerValidSW(swUrl, config) { } }; }; - function newerSwAvailable(){ + function newerSwAvailable(sw){ // At this point, the updated precached content has been fetched, // but the previous service worker will still serve the older // content until all client tabs are closed. @@ -91,7 +91,7 @@ function registerValidSW(swUrl, config) { 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' ); if (config && config.onUpdate) { - config.onUpdate(registration); + config.onUpdate(registration, sw); } } }) From 422e158d35c6bf2dc2aa3a6d3d01abb319e075fd Mon Sep 17 00:00:00 2001 From: Adam Rackis Date: Tue, 6 Nov 2018 20:57:48 -0600 Subject: [PATCH 3/5] update docs url --- packages/react-scripts/template/src/serviceWorker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/src/serviceWorker.js b/packages/react-scripts/template/src/serviceWorker.js index baa23abb776..b858dc5873d 100644 --- a/packages/react-scripts/template/src/serviceWorker.js +++ b/packages/react-scripts/template/src/serviceWorker.js @@ -88,7 +88,7 @@ function registerValidSW(swUrl, config) { // content until all client tabs are closed. console.log( 'New content is available and will be used when all ' + - 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' + 'tabs for this page are closed. See http://bit.ly/CRA2-PWA.' ); if (config && config.onUpdate) { config.onUpdate(registration, sw); From a2f0fa36cfd8865c68e534d330c4dfc5a6ee2672 Mon Sep 17 00:00:00 2001 From: Adam Rackis Date: Fri, 23 Nov 2018 18:09:34 -0600 Subject: [PATCH 4/5] Upgrade TypeScript as well --- .../template-typescript/src/serviceWorker.ts | 31 +++++++++++-------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/react-scripts/template-typescript/src/serviceWorker.ts b/packages/react-scripts/template-typescript/src/serviceWorker.ts index c0b13105198..7513b3683eb 100644 --- a/packages/react-scripts/template-typescript/src/serviceWorker.ts +++ b/packages/react-scripts/template-typescript/src/serviceWorker.ts @@ -22,7 +22,7 @@ const isLocalhost = Boolean( type Config = { onSuccess?: (registration: ServiceWorkerRegistration) => void; - onUpdate?: (registration: ServiceWorkerRegistration) => void; + onUpdate?: (registration: ServiceWorkerRegistration, sw: ServiceWorker) => void; }; export function register(config?: Config) { @@ -66,6 +66,10 @@ function registerValidSW(swUrl: string, config?: Config) { navigator.serviceWorker .register(swUrl) .then(registration => { + //a new service worker has previously finished installing, and is now waiting + if (registration.waiting && registration.active) { + newerSwAvailable(registration.waiting); + } registration.onupdatefound = () => { const installingWorker = registration.installing; if (installingWorker == null) { @@ -74,18 +78,7 @@ function registerValidSW(swUrl: string, config?: Config) { installingWorker.onstatechange = () => { if (installingWorker.state === 'installed') { if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See http://bit.ly/CRA-PWA.' - ); - - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } + newerSwAvailable(installingWorker); } else { // At this point, everything has been precached. // It's the perfect time to display a @@ -100,6 +93,18 @@ function registerValidSW(swUrl: string, config?: Config) { } }; }; + function newerSwAvailable(sw){ + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + 'New content is available and will be used when all ' + + 'tabs for this page are closed. See http://bit.ly/CRA2-PWA.' + ); + if (config && config.onUpdate) { + config.onUpdate(registration, sw); + } + } }) .catch(error => { console.error('Error during service worker registration:', error); From b42f9ee51cd21292a6f5072e1d4c56179f3efaa6 Mon Sep 17 00:00:00 2001 From: Daniel K Date: Sat, 24 Nov 2018 16:32:29 -0600 Subject: [PATCH 5/5] Update packages/react-scripts/template-typescript/src/serviceWorker.ts Co-Authored-By: arackaf --- packages/react-scripts/template-typescript/src/serviceWorker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template-typescript/src/serviceWorker.ts b/packages/react-scripts/template-typescript/src/serviceWorker.ts index 7513b3683eb..abe6dc0964d 100644 --- a/packages/react-scripts/template-typescript/src/serviceWorker.ts +++ b/packages/react-scripts/template-typescript/src/serviceWorker.ts @@ -93,7 +93,7 @@ function registerValidSW(swUrl: string, config?: Config) { } }; }; - function newerSwAvailable(sw){ + function newerSwAvailable(sw: ServiceWorker){ // At this point, the updated precached content has been fetched, // but the previous service worker will still serve the older // content until all client tabs are closed.