improve: use workbox-sw on service-work

aermin · Mar 25, 2019 · 3dd7191 · 3dd7191
1 parent dad1de7
commit 3dd7191
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 41 deletions.
diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>ghChat</title>
   <link rel="icon" href="https://cdn.aermin.top/ghChatIcon.png">
-  <link rel="manifest" href="./manifest.json">
+  <link rel="manifest" href="/manifest.json">
   <script src="https://at.alicdn.com/t/font_1043659_1zr2kparau1.js"></script>
   <!-- Add to home screen for Safari on iOS -->
   <meta name="apple-mobile-web-app-capable" content="yes">
@@ -34,13 +34,5 @@
 </style>
 <body>
   <div id="app"></div>
-  <script>
-    if (navigator.serviceWorker != null) {
-      navigator.serviceWorker.register('./service-worker.js')
-      .then(function(registration) {
-        console.log('Registered events at scope: ', registration.scope);
-      });
-    }
-  </script>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -7,6 +7,17 @@ import store from './redux/store';
 import App from './App';
 import AxiosHandle from './utils/request';
 
+
+if (
+  (window.location.protocol === 'https:' || window.location.hostname === 'localhost')
+    && navigator.serviceWorker
+) {
+  window.addEventListener('load', () => {
+    const sw = '/service-worker.js';
+    navigator.serviceWorker.register(sw);
+  });
+}
+
 console.log(process.env.NODE_ENV);
 function renderWithHotReload(RootElement) {
   ReactDom.render(

diff --git a/src/service-worker.js b/src/service-worker.js
@@ -1,36 +1,17 @@
-const cacheName = 'ghChat-step-6-1';
-const filesToCache = [
-  '/',
-  '/index.html',
-];
+// 用workbox-sw替代之前的实现方案，感谢碎碎酱@yinxin630的建议和方案
 
-self.addEventListener('install', (e) => {
-  console.log('[ServiceWorker] Install');
-  e.waitUntil(
-    caches.open(cacheName).then((cache) => {
-      console.log('[ServiceWorker] Caching app shell');
-      return cache.addAll(filesToCache);
-    })
-  );
-});
+importScripts('https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js');
 
-self.addEventListener('activate', (e) => {
-  console.log('[ServiceWorker] Activate');
-  e.waitUntil(
-    caches.keys().then(keyList => Promise.all(keyList.map((key) => {
-      if (key !== cacheName) {
-        console.log('[ServiceWorker] Removing old cache', key);
-        return caches.delete(key);
-      }
-    })))
-  );
-  return self.clients.claim();
-});
+if (workbox) {
+  workbox.setConfig({ modulePathPrefix: 'https://g.alicdn.com/kg/workbox/3.3.0/' });
 
+  workbox.precaching.precache(['/', '/index.html']);
 
-// self.addEventListener('fetch', (e) => {
-//   console.log('[ServiceWorker] Fetch', e.request.url);
-//   e.respondWith(
-//     caches.match(e.request).then(response => response || fetch(e.request))
-//   );
-// });
+  workbox.routing.registerRoute(new RegExp('^https?://im.aermin.top/?$'), workbox.strategies.networkFirst());
+
+  workbox.routing.registerRoute(new RegExp('.*.html'), workbox.strategies.networkFirst());
+
+  workbox.routing.registerRoute(new RegExp('.*.(?:js|css)'), workbox.strategies.staleWhileRevalidate());
+
+  workbox.routing.registerRoute(new RegExp('https://cdn.aremin.top/'), workbox.strategies.cacheFirst());
+}