Merge pull request #1 from azu/importScrtipts

azu · web-flow · commit d96bba10bbca · 2018-12-22T22:25:26.000+09:00
feat(src): support importScripts
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ Or
 
 Import from [unpkg.com](https://unpkg.com/):
 
-- UMD: https://unpkg.com/service-worker-updatefound-refresh-dialog/service-worker-updatefound-refresh-dialog.umd.js
+- UMD: https://unpkg.com/service-worker-updatefound-refresh-dialog/dist/service-worker-updatefound-refresh-dialog.umd.js
 - mjs: https://unpkg.com/service-worker-updatefound-refresh-dialog?module
 
 ## Usage
@@ -34,7 +34,7 @@ You should inject refresh dialog script to two place.
     <title>Example</title>
 </head>
 <body>
-<script src="https://unpkg.com/service-worker-updatefound-refresh-dialog/service-worker-updatefound-refresh-dialog.umd.js"></script>
+<script src="https://unpkg.com/service-worker-updatefound-refresh-dialog/dist/service-worker-updatefound-refresh-dialog.umd.js"></script>
 <script>
     window.addEventListener('load', function() {
         navigator.serviceWorker.register('/sw.js')
@@ -50,18 +50,10 @@ You should inject refresh dialog script to two place.
 **Add to your service worker**(sw.js):
 
 ```js
-self.addEventListener("message", event => {
-    if (!event.data) {
-        return;
-    }
-    if (event.data === "skipWaiting") {
-        self.skipWaiting();
-    }
-});
+// sw.js
+importScripts("https://unpkg.com/service-worker-updatefound-refresh-dialog/dist/service-worker-updatefound-refresh-dialog.umd.js");
 ```
 
-- 
-
 ### Options
 
 - `message`: Custom message
@@ -123,14 +115,7 @@ Do you forget to inject a script to service worker like `sw.js`?
 
 ```js
 // sw.js
-self.addEventListener("message", event => {
-    if (!event.data) {
-        return;
-    }
-    if (event.data === "skipWaiting") {
-        self.skipWaiting();
-    }
-});
+importScripts("https://unpkg.com/service-worker-updatefound-refresh-dialog/service-worker-updatefound-refresh-dialog.umd.js");
 ```
 
 ### `skipWaiting()` integration
@@ -145,6 +130,7 @@ These method trigger `statechange` event of the service worker without asking th
 ```diff
 // workbox init setting
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js");
++ importScripts("https://unpkg.com/service-worker-updatefound-refresh-dialog/service-worker-updatefound-refresh-dialog.umd.js")
 
 workbox.core.setCacheNameDetails({ prefix: "website-v1" });
 workbox.googleAnalytics.initialize();
diff --git a/mock/sw.js b/mock/sw.js
@@ -1,6 +1 @@
-self.addEventListener("install", function(event) {
-    event.waitUntil(self.skipWaiting());
-});
-self.addEventListener("activate", function(event) {
-    event.waitUntil(self.clients.claim());
-});
+importScripts("../dist/service-worker-updatefound-refresh-dialog.umd.js");
diff --git a/src/service-worker-updatefound-refresh-dialog.js b/src/service-worker-updatefound-refresh-dialog.js
@@ -1,13 +1,28 @@
 // Based on these receipts
 // https://github.com/deanhume/pwa-update-available
 // https://developers.google.com/web/tools/workbox/guides/advanced-recipes
+const isServiceWorker = 'ServiceWorkerGlobalScope' in self
+    && self instanceof ServiceWorkerGlobalScope;
+// *1 in sw.js
+// receive "skipWaiting" message and invoke `skipWaiting()`
+if (isServiceWorker) {
+    self.addEventListener("message", event => {
+        if (!event.data) {
+            return;
+        }
+        if (event.data === "skipWaiting") {
+            self.skipWaiting();
+        }
+    });
+}
 
 function defaultOnClickHandler(registration) {
     if (!registration.waiting) {
         // Just to ensure registration.waiting is available before
         // calling postMessage()
         return;
     }
+    // post message to sw.js ===> *1
     registration.waiting.postMessage("skipWaiting");
 }
 
@@ -28,11 +43,13 @@ function showRefreshUI(registration, { message, onClick }) {
       right: var(--sw-updatefound-refresh-dialog--right, 5%);
       top: var(--sw-updatefound-refresh-dialog--top, initial);
       bottom: var(--sw-updatefound-refresh-dialog--bottom, 30px);
+      transition: var(--sw-updatefound-refresh-dialog--transition, opacity 0.5s ease-out);
 `;
     dialog.textContent = message;
 
     var listener = function() {
         dialog.disabled = true;
+        dialog.style.opacity = 0;
         dialog.removeEventListener("click", listener);
         onClick(registration);
     };
