https://111586.xyz/js/sw-registration.js

1/* ===========================================================
2 * sw-registration.js
3 * ===========================================================
4 * Copyright 2016 @huxpro
5 * Licensed under Apache 2.0
6 * Register service worker.
7 * ========================================================== */
8
9// SW Version Upgrade Ref: <https://youtu.be/Gb9uI67tqV0>
10
11function handleRegistration(registration){
12  console.log('Service Worker Registered. ', registration)
13  /**
14   * ServiceWorkerRegistration.onupdatefound
15   * The service worker registration's installing worker changes.
16   */
17  registration.onupdatefound = (e) => {
18    const installingWorker = registration.installing;
19    installingWorker.onstatechange = (e) => {
20      if (installingWorker.state !== 'installed') return;
21      if (navigator.serviceWorker.controller) {
22        console.log('SW is updated');
23      } else {
24        console.log('A Visit without previous SW');
25        createSnackbar({
26          message: 'App ready for offline use.',
27          duration: 3000
28        })
29      }
30    };
31  }
32}
33
34if(navigator.serviceWorker){
35  // For security reasons, a service worker can only control the pages
36  // that are in the same directory level or below it. That's why we put sw.js at ROOT level.
37  navigator.serviceWorker
38    .register('/sw.js')
39    .then((registration) => handleRegistration(registration))
40    .catch((error) => {console.log('ServiceWorker registration failed: ', error)})
41
42  // register message receiver
43  // https://dbwriteups.wordpress.com/2015/11/16/service-workers-part-3-communication-between-sw-and-pages/
44  navigator.serviceWorker.onmessage = (e) => {
45    console.log('SW: SW Broadcasting:', event);
46    const data = e.data
47    
48    if(data.command == "UPDATE_FOUND"){
49      console.log("UPDATE_FOUND_BY_SW", data);
50      createSnackbar({
51        message: "Content updated.",
52        actionText:"refresh",
53        action: function(e){location.reload()}
54      })
55    }
56  }
57}