clientjs/packages/annotation-dashboard-explorunivers/src/registerServiceWorker.js
author ymh <ymh.work@gmail.com>
Tue, 18 Sep 2018 10:36:57 +0200
changeset 10 28971cf04a91
parent 0 5f4fcbc80b37
permissions -rw-r--r--
Correct deploy script to take into account upstream names
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
0
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
// In production, we register a service worker to serve assets from local cache.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
// This lets the app load faster on subsequent visits in production, and gives
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
// it offline capabilities. However, it also means that developers (and users)
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
// will only see deployed updates on the "N+1" visit to a page, since previously
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
// cached resources are updated in the background.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
// This link also includes instructions on opting out of this behavior.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
const isLocalhost = Boolean(
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
  window.location.hostname === 'localhost' ||
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
    // [::1] is the IPv6 localhost address.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
    window.location.hostname === '[::1]' ||
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
    // 127.0.0.1/8 is considered localhost for IPv4.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
    window.location.hostname.match(
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
    )
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
);
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
export default function register() {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
    // The URL constructor is available in all browsers that support SW.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
    if (publicUrl.origin !== window.location.origin) {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
      // Our service worker won't work if PUBLIC_URL is on a different origin
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
      // from what our page is served on. This might happen if a CDN is used to
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
      return;
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
    }
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
    window.addEventListener('load', () => {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
      if (isLocalhost) {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
        // This is running on localhost. Lets check if a service worker still exists or not.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
        checkValidServiceWorker(swUrl);
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
        // Add some additional logging to localhost, pointing developers to the
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
        // service worker/PWA documentation.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
        navigator.serviceWorker.ready.then(() => {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
          console.log(
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
            'This web app is being served cache-first by a service ' +
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
              'worker. To learn more, visit https://goo.gl/SC7cgQ'
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
          );
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
        });
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
      } else {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
        // Is not local host. Just register service worker
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
        registerValidSW(swUrl);
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
      }
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
    });
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
  }
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
}
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
function registerValidSW(swUrl) {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
  navigator.serviceWorker
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
    .register(swUrl)
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
    .then((registration) => {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
      registration.onupdatefound = () => {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
        const installingWorker = registration.installing;
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
        installingWorker.onstatechange = () => {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
          if (installingWorker.state === 'installed') {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
            if (navigator.serviceWorker.controller) {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
              // At this point, the old content will have been purged and
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
              // the fresh content will have been added to the cache.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
              // It's the perfect time to display a "New content is
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
              // available; please refresh." message in your web app.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    68
              console.log('New content is available; please refresh.');
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    69
            } else {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    70
              // At this point, everything has been precached.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    71
              // It's the perfect time to display a
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    72
              // "Content is cached for offline use." message.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    73
              console.log('Content is cached for offline use.');
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    74
            }
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    75
          }
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    76
        };
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
      };
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    78
    })
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    79
    .catch(error => {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    80
      console.error('Error during service worker registration:', error);
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
    });
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    82
}
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    83
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    84
function checkValidServiceWorker(swUrl) {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    85
  // Check if the service worker can be found. If it can't reload the page.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    86
  fetch(swUrl)
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    87
    .then(response => {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    88
      // Ensure service worker exists, and that we really are getting a JS file.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    89
      if (
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    90
        response.status === 404 ||
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    91
        response.headers.get('content-type').indexOf('javascript') === -1
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    92
      ) {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    93
        // No service worker found. Probably a different app. Reload the page.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    94
        navigator.serviceWorker.ready.then(registration => {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    95
          registration.unregister().then(() => {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    96
            window.location.reload();
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    97
          });
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    98
        });
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
    99
      } else {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   100
        // Service worker found. Proceed as normal.
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   101
        registerValidSW(swUrl);
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   102
      }
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   103
    })
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   104
    .catch(() => {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   105
      console.log(
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   106
        'No internet connection found. App is running in offline mode.'
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   107
      );
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   108
    });
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   109
}
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   110
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   111
export function unregister() {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   112
  if ('serviceWorker' in navigator) {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   113
    navigator.serviceWorker.ready.then(registration => {
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   114
      registration.unregister();
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   115
    });
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   116
  }
5f4fcbc80b37 Create new repository to host all dashboard developments
ymh <ymh.work@gmail.com>
parents:
diff changeset
   117
}