-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
119 lines (105 loc) · 3.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<head>
<title>PWA</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="icon" href="/e.png" type="image/png" />
</head>
<body>
<div class="revision">Revision 1</div>
<img src="pwa-fonts.png" />
<div class="network-message">
Network:
<span id="network-status" class="">Good</span>
</div>
<div id="model" style="display: none;">
<p>站点发生了更新</p>
<button onclick="skip()">立即更新</button>
</div>
<script type="text/javascript">
function changeModel() {
document.getElementById("model").style.display =
document.getElementById("model").style.display === "none"
? "block"
: "none";
}
function skip() {
try {
changeModel();
navigator.serviceWorker.getRegistration().then(reg => {
reg.waiting.postMessage("skipWaiting");
});
} catch (e) {
window.location.reload();
}
}
navigator.serviceWorker.addEventListener("controllerchange", () => {
window.location.reload();
});
// window.killSW = true;
window.addEventListener("load", function() {
const sw = window.navigator.serviceWorker;
const killSW = window.killSW || false;
if (!sw) {
return;
}
// fetch().then(function (status) {
// if (status) {
// // 注销所有已安装的 Service Worker
// } else {
// // 注册 Service Worker
// }
// });
if (!!killSW) {
sw.getRegistration("/sw.js").then(registration => {
// 手动注销
registration.unregister && registration.unregister();
// 清除缓存
window.caches &&
caches.keys &&
caches.keys().then(function(keys) {
keys.forEach(function(key) {
caches.delete(key);
});
});
});
} else {
// 表示该 sw 监听的是根域名下的请求
sw.register("/sw.js", { scope: "/" })
.then(registration => {
// 注册成功后会进入回调
console.log("Registered events at scope: ", registration.scope);
if (registration.waiting) {
// 通知提示栏显示
changeModel();
return;
}
// 每当Registration.Installing属性获取新的sw时都会调用该方法
registration.onupdatefound = function() {
const installingWorker = registration.installing;
installingWorker.onstatechange = function() {
switch (installingWorker.state) {
case "installed":
// 应为在sw第一次安装的时候也会调用onupdatefound，所以要检查是否已经被sw控制
if (navigator.serviceWorker.controller) {
changeModel();
// 通知提示栏显示
}
break;
}
};
};
})
.catch(err => {
console.error(err);
});
}
});
fetch("./data.json");
const statusEl = document.querySelector("#network-status");
if (!navigator.onLine) {
statusEl.classList = ["is-offline"];
statusEl.innerText = "Offline";
}
</script>
</body>