diff options
| -rw-r--r-- | modern/src/index.js | 4 | ||||
| -rw-r--r-- | modern/src/serviceWorker.js (renamed from modern/src/registerServiceWorker.js) | 80 |
2 files changed, 54 insertions, 30 deletions
diff --git a/modern/src/index.js b/modern/src/index.js index f501a08..3c52b23 100644 --- a/modern/src/index.js +++ b/modern/src/index.js @@ -5,7 +5,7 @@ import { BrowserRouter } from 'react-router-dom' import { Provider } from 'react-redux'; import App from './App'; -import registerServiceWorker from './registerServiceWorker'; +import * as serviceWorker from './serviceWorker'; import store from './store'; ReactDOM.render(( @@ -16,4 +16,4 @@ ReactDOM.render(( </Provider> ), document.getElementById('root')); -registerServiceWorker(); +serviceWorker.register(); diff --git a/modern/src/registerServiceWorker.js b/modern/src/serviceWorker.js index a3e6c0c..f59f199 100644 --- a/modern/src/registerServiceWorker.js +++ b/modern/src/serviceWorker.js @@ -1,31 +1,33 @@ -// In production, we register a service worker to serve assets from local cache. +// This optional code is used to register a service worker. +// register() is not called by default. // This lets the app load faster on subsequent visits in production, and gives // it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on the "N+1" visit to a page, since previously -// cached resources are updated in the background. +// will only see deployed updates on subsequent visits to a page, after all the +// existing tabs open on the page have been closed, since previously cached +// resources are updated in the background. -// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. -// This link also includes instructions on opting out of this behavior. +// To learn more about the benefits of this model and instructions on how to +// opt-in, read https://bit.ly/CRA-PWA const isLocalhost = Boolean( window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. window.location.hostname === '[::1]' || - // 127.0.0.1/8 is considered localhost for IPv4. + // 127.0.0.0/8 are considered localhost for IPv4. window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) ); -export default 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); + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); if (publicUrl.origin !== window.location.origin) { // Our service worker won't work if PUBLIC_URL is on a different origin // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 return; } @@ -33,44 +35,59 @@ export default function register() { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; if (isLocalhost) { - // This is running on localhost. Lets check if a service worker still exists or not. - checkValidServiceWorker(swUrl); + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); // Add some additional logging to localhost, pointing developers to the // service worker/PWA documentation. navigator.serviceWorker.ready.then(() => { console.log( 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://goo.gl/SC7cgQ' + 'worker. To learn more, visit https://bit.ly/CRA-PWA' ); }); } else { - // Is not local host. Just register service worker - registerValidSW(swUrl); + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); } }); } } -function registerValidSW(swUrl) { +function registerValidSW(swUrl, config) { navigator.serviceWorker .register(swUrl) .then(registration => { registration.onupdatefound = () => { const installingWorker = registration.installing; + if (installingWorker == null) { + return; + } installingWorker.onstatechange = () => { if (installingWorker.state === 'installed') { if (navigator.serviceWorker.controller) { - // At this point, the old content will have been purged and - // the fresh content will have been added to the cache. - // 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.'); + // 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 https://bit.ly/CRA-PWA.' + ); + + // Execute callback + if (config && 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 && config.onSuccess) { + config.onSuccess(registration); + } } } }; @@ -81,14 +98,17 @@ 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) + fetch(swUrl, { + headers: { 'Service-Worker': 'script' }, + }) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get('content-type'); if ( response.status === 404 || - response.headers.get('content-type').indexOf('javascript') === -1 + (contentType != null && contentType.indexOf('javascript') === -1) ) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { @@ -98,7 +118,7 @@ function checkValidServiceWorker(swUrl) { }); } else { // Service worker found. Proceed as normal. - registerValidSW(swUrl); + registerValidSW(swUrl, config); } }) .catch(() => { @@ -110,8 +130,12 @@ function checkValidServiceWorker(swUrl) { export function unregister() { if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); + navigator.serviceWorker.ready + .then(registration => { + registration.unregister(); + }) + .catch(error => { + console.error(error.message); + }); } -} +}
\ No newline at end of file |