diff --git a/packages/react-scripts/template/src/serviceWorker.js b/packages/react-scripts/template/src/serviceWorker.js index 2edbdd420ea..de30bc7c666 100644 --- a/packages/react-scripts/template/src/serviceWorker.js +++ b/packages/react-scripts/template/src/serviceWorker.js @@ -18,7 +18,7 @@ const isLocalhost = Boolean( ) ); -export function register() { +export function register(config) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL(process.env.PUBLIC_URL, window.location); @@ -34,7 +34,7 @@ export function register() { if (isLocalhost) { // This is running on localhost. Lets check if a service worker still exists or not. - checkValidServiceWorker(swUrl); + checkValidServiceWorker(swUrl, config); // Add some additional logging to localhost, pointing developers to the // service worker/PWA documentation. @@ -46,13 +46,13 @@ export function register() { }); } else { // Is not local host. Just register service worker - registerValidSW(swUrl); + registerValidSW(swUrl, config); } }); } } -function registerValidSW(swUrl) { +function registerValidSW(swUrl, config) { navigator.serviceWorker .register(swUrl) .then(registration => { @@ -66,11 +66,21 @@ function registerValidSW(swUrl) { // It's the perfect time to display a "New content is // available; please refresh." message in your web app. console.log('New content is available; please refresh.'); + + // Execute callback + if (config.onUpdate) { + config.onUpdate(registration); + } } else { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. console.log('Content is cached for offline use.'); + + // Execute callback + if (config.onSuccess) { + config.onSuccess(registration); + } } } }; @@ -81,7 +91,7 @@ function registerValidSW(swUrl) { }); } -function checkValidServiceWorker(swUrl) { +function checkValidServiceWorker(swUrl, config) { // Check if the service worker can be found. If it can't reload the page. fetch(swUrl) .then(response => { @@ -98,7 +108,7 @@ function checkValidServiceWorker(swUrl) { }); } else { // Service worker found. Proceed as normal. - registerValidSW(swUrl); + registerValidSW(swUrl, config); } }) .catch(() => {