Skip to content

Commit d96bba1

Browse files
authored
Merge pull request #1 from azu/importScrtipts
feat(src): support importScripts
2 parents 662f30f + ba00b71 commit d96bba1

File tree

3 files changed

+24
-26
lines changed

3 files changed

+24
-26
lines changed

README.md

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Or
1414

1515
Import from [unpkg.com](https://unpkg.com/):
1616

17-
- UMD: https://unpkg.com/service-worker-updatefound-refresh-dialog/service-worker-updatefound-refresh-dialog.umd.js
17+
- UMD: https://unpkg.com/service-worker-updatefound-refresh-dialog/dist/service-worker-updatefound-refresh-dialog.umd.js
1818
- mjs: https://unpkg.com/service-worker-updatefound-refresh-dialog?module
1919

2020
## Usage
@@ -34,7 +34,7 @@ You should inject refresh dialog script to two place.
3434
<title>Example</title>
3535
</head>
3636
<body>
37-
<script src="https://unpkg.com/service-worker-updatefound-refresh-dialog/service-worker-updatefound-refresh-dialog.umd.js"></script>
37+
<script src="https://unpkg.com/service-worker-updatefound-refresh-dialog/dist/service-worker-updatefound-refresh-dialog.umd.js"></script>
3838
<script>
3939
window.addEventListener('load', function() {
4040
navigator.serviceWorker.register('/sw.js')
@@ -50,18 +50,10 @@ You should inject refresh dialog script to two place.
5050
**Add to your service worker**(sw.js):
5151

5252
```js
53-
self.addEventListener("message", event => {
54-
if (!event.data) {
55-
return;
56-
}
57-
if (event.data === "skipWaiting") {
58-
self.skipWaiting();
59-
}
60-
});
53+
// sw.js
54+
importScripts("https://unpkg.com/service-worker-updatefound-refresh-dialog/dist/service-worker-updatefound-refresh-dialog.umd.js");
6155
```
6256

63-
-
64-
6557
### Options
6658

6759
- `message`: Custom message
@@ -123,14 +115,7 @@ Do you forget to inject a script to service worker like `sw.js`?
123115

124116
```js
125117
// sw.js
126-
self.addEventListener("message", event => {
127-
if (!event.data) {
128-
return;
129-
}
130-
if (event.data === "skipWaiting") {
131-
self.skipWaiting();
132-
}
133-
});
118+
importScripts("https://unpkg.com/service-worker-updatefound-refresh-dialog/service-worker-updatefound-refresh-dialog.umd.js");
134119
```
135120

136121
### `skipWaiting()` integration
@@ -145,6 +130,7 @@ These method trigger `statechange` event of the service worker without asking th
145130
```diff
146131
// workbox init setting
147132
importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js");
133+
+ importScripts("https://unpkg.com/service-worker-updatefound-refresh-dialog/service-worker-updatefound-refresh-dialog.umd.js")
148134

149135
workbox.core.setCacheNameDetails({ prefix: "website-v1" });
150136
workbox.googleAnalytics.initialize();

mock/sw.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1 @@
1-
self.addEventListener("install", function(event) {
2-
event.waitUntil(self.skipWaiting());
3-
});
4-
self.addEventListener("activate", function(event) {
5-
event.waitUntil(self.clients.claim());
6-
});
1+
importScripts("../dist/service-worker-updatefound-refresh-dialog.umd.js");

src/service-worker-updatefound-refresh-dialog.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
11
// Based on these receipts
22
// https://github.com/deanhume/pwa-update-available
33
// https://developers.google.com/web/tools/workbox/guides/advanced-recipes
4+
const isServiceWorker = 'ServiceWorkerGlobalScope' in self
5+
&& self instanceof ServiceWorkerGlobalScope;
6+
// *1 in sw.js
7+
// receive "skipWaiting" message and invoke `skipWaiting()`
8+
if (isServiceWorker) {
9+
self.addEventListener("message", event => {
10+
if (!event.data) {
11+
return;
12+
}
13+
if (event.data === "skipWaiting") {
14+
self.skipWaiting();
15+
}
16+
});
17+
}
418

519
function defaultOnClickHandler(registration) {
620
if (!registration.waiting) {
721
// Just to ensure registration.waiting is available before
822
// calling postMessage()
923
return;
1024
}
25+
// post message to sw.js ===> *1
1126
registration.waiting.postMessage("skipWaiting");
1227
}
1328

@@ -28,11 +43,13 @@ function showRefreshUI(registration, { message, onClick }) {
2843
right: var(--sw-updatefound-refresh-dialog--right, 5%);
2944
top: var(--sw-updatefound-refresh-dialog--top, initial);
3045
bottom: var(--sw-updatefound-refresh-dialog--bottom, 30px);
46+
transition: var(--sw-updatefound-refresh-dialog--transition, opacity 0.5s ease-out);
3147
`;
3248
dialog.textContent = message;
3349

3450
var listener = function() {
3551
dialog.disabled = true;
52+
dialog.style.opacity = 0;
3653
dialog.removeEventListener("click", listener);
3754
onClick(registration);
3855
};

0 commit comments

Comments
 (0)