1 // In production, we register a service worker to serve assets from local cache.

     2 

     3 // This lets the app load faster on subsequent visits in production, and gives

     4 // it offline capabilities. However, it also means that developers (and users)

     5 // will only see deployed updates on the "N+1" visit to a page, since previously

     6 // cached resources are updated in the background.

     7 

     8 // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.

     9 // This link also includes instructions on opting out of this behavior.

    10 

    11 const isLocalhost = Boolean(

    12   window.location.hostname === 'localhost' ||

    13     // [::1] is the IPv6 localhost address.

    14     window.location.hostname === '[::1]' ||

    15     // 127.0.0.1/8 is considered localhost for IPv4.

    16     window.location.hostname.match(

    17       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/

    18     )

    19 );

    20 

    21 export default function register() {

    22   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {

    23     // The URL constructor is available in all browsers that support SW.

    24     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);

    25     if (publicUrl.origin !== window.location.origin) {

    26       // Our service worker won't work if PUBLIC_URL is on a different origin

    27       // from what our page is served on. This might happen if a CDN is used to

    28       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374

    29       return;

    30     }

    31 

    32     window.addEventListener('load', () => {

    33       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

    34 

    35       if (isLocalhost) {

    36         // This is running on localhost. Lets check if a service worker still exists or not.

    37         checkValidServiceWorker(swUrl);

    38 

    39         // Add some additional logging to localhost, pointing developers to the

    40         // service worker/PWA documentation.

    41         navigator.serviceWorker.ready.then(() => {

    42           console.log(

    43             'This web app is being served cache-first by a service ' +

    44               'worker. To learn more, visit https://goo.gl/SC7cgQ'

    45           );

    46         });

    47       } else {

    48         // Is not local host. Just register service worker

    49         registerValidSW(swUrl);

    50       }

    51     });

    52   }

    53 }

    54 

    55 function registerValidSW(swUrl) {

    56   navigator.serviceWorker

    57     .register(swUrl)

    58     .then((registration) => {

    59       registration.onupdatefound = () => {

    60         const installingWorker = registration.installing;

    61         installingWorker.onstatechange = () => {

    62           if (installingWorker.state === 'installed') {

    63             if (navigator.serviceWorker.controller) {

    64               // At this point, the old content will have been purged and

    65               // the fresh content will have been added to the cache.

    66               // It's the perfect time to display a "New content is

    67               // available; please refresh." message in your web app.

    68               console.log('New content is available; please refresh.');

    69             } else {

    70               // At this point, everything has been precached.

    71               // It's the perfect time to display a

    72               // "Content is cached for offline use." message.

    73               console.log('Content is cached for offline use.');

    74             }

    75           }

    76         };

    77       };

    78     })

    79     .catch(error => {

    80       console.error('Error during service worker registration:', error);

    81     });

    82 }

    83 

    84 function checkValidServiceWorker(swUrl) {

    85   // Check if the service worker can be found. If it can't reload the page.

    86   fetch(swUrl)

    87     .then(response => {

    88       // Ensure service worker exists, and that we really are getting a JS file.

    89       if (

    90         response.status === 404 ||

    91         response.headers.get('content-type').indexOf('javascript') === -1

    92       ) {

    93         // No service worker found. Probably a different app. Reload the page.

    94         navigator.serviceWorker.ready.then(registration => {

    95           registration.unregister().then(() => {

    96             window.location.reload();

    97           });

    98         });

    99       } else {

   100         // Service worker found. Proceed as normal.

   101         registerValidSW(swUrl);

   102       }

   103     })

   104     .catch(() => {

   105       console.log(

   106         'No internet connection found. App is running in offline mode.'

   107       );

   108     });

   109 }

   110 

   111 export function unregister() {

   112   if ('serviceWorker' in navigator) {

   113     navigator.serviceWorker.ready.then(registration => {

   114       registration.unregister();

   115     });

   116   }

   117 }