-
Notifications
You must be signed in to change notification settings - Fork 0
/
ppt.html
164 lines (141 loc) · 8.43 KB
/
ppt.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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1024" />
<title>Jacen`s PPT</title>
<meta name="author" content="Jacen Shi" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/ppt.css">
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version
of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<div id="impress">
<div class="step" data-x="0" data-y="-1000">
<h3 style="margin-bottom: 20px;">Service Worker 的背景</h3>
<p style="font-size: 25px;margin-bottom: 10px;">前生：AppCache</p>
<p style="font-size: 20px;margin: 0 0 5px 20px;">AppCache 最初是作为 HTML5 规范的一部分引入，用以解决离线 web 应用程序的问题。</p>
<p style="font-size: 20px;margin: 0 0 5px 20px;">AppCache 最终被发现是不实用的和充满陷阱的。因此它已被废弃，被 Service Workers 有效的取代。</p>
<p style="font-size: 25px;margin: 10px 0;">今世：Service worker</p>
<p style="font-size: 20px;margin: 0 0 5px 20px;">Service worker 提供了一个更具前瞻性的离线应用解决方案，通过更加程序化的语言书写规则替代 AppCache 的声明式书写方式。</p>
<p style="font-size: 20px;margin: 0 0 5px 20px;">Service Worker 在浏览器后台进程中持续的执行其代码。它是事件驱动的，这意味着在 Service Worker 的作用域范围内触发的事件会驱动其行为。</p>
</div>
<div class="step" data-x="1000" data-y="-1000">
<h3 style="margin-bottom: 30px;font-size:30px;"> 注册 Service Worker </h3>
<p style="font-size: 20px;margin: 0 0 5px 20px;">在前端代码中某一处执行以下代码即可</p>
<pre style="font-size: 20px;margin: 0 0 5px ;background-color:bisque;color:#333;padding:20px 10px 10px;border-radius: 10px;">
if (navigator.serviceWorker) {
navigator.serviceWorker.register('./service-worker.js', {scope: './'})
.then(function (registration) {
console.log(registration);
})
.catch(function (e) {
console.error(e);
})
} else {
console.log('Service Worker is not supported in this browser.')
}
</pre>
<p style="font-size: 20px;margin: 0 0 5px 20px;">这将告诉浏览器在哪里找到你的 Service Worker 的实现，浏览器将查找对应的（/service-worker.js）文件，并将它保存在你正在访问的域名下，这个文件将包含所有你自己定义的 Service Worker 事件处理程序</p>
</div>
<div class="step" data-x="2000" data-y="-1000">
<h3 style="margin-bottom: 30px;font-size:30px;">注意:</h3>
<p style="font-size: 25px;margin: 10px 0;">在执行注册的操作的同时也确认了你的ServiceWorker的作用范围是在URL的根路径下。这意味着在你的根路径下的任何请求，都将通过触发事件的方式告诉 Service Worker。一个文件路径为/js/service-worker.js的文件就仅仅可以捕获http://{host}/js该链接下的请求。</p>
<p style="font-size: 25px;margin: 10px 0;">另外，你也可以通过将第二个参数传入给register方法来明确地设置 Service Worker 的作用域范围：</p>
<pre style="font-size: 20px;margin: 0 0 5px ;background-color:bisque;color:#333;padding:20px 10px 0;border-radius: 10px;">
navigator.serviceWorker.register('/sw.js', { scope: '/js' })
</pre>
</div>
<div class="step" data-x="3000" data-y="-1000">
<h3 style="margin-bottom: 30px;font-size:30px;">Service Worker 的生命周期</h3>
<image src="./images/serviceWorker.png" style="width: 80%;height: 80%;" />
</div>
<div class="step" data-x="3000" data-y="0" data-rotate="90">
<h3 style="margin-bottom: 30px;font-size:35px;">使用 service worker 实现离线缓存</h3>
<p style="margin-bottom: 30px;font-size:30px;">
实际上离线缓存功能，就是我们根据WebApp的需要，事先将缓存策略写入到service-worker.js中。接下来通过分析service-worker.js的代码来介绍该功能的实现。
</p>
</div>
<div class="step" data-x="3000" data-y="1000" data-rotate="90">
<h3 style="margin-bottom: 30px;font-size:35px;">缓存网页资源</h3>
<pre style="font-size: 20px;margin: 0 0 5px ;background-color:bisque;color:#333;padding:20px 10px 0;border-radius: 10px;">
var CACHE_VERSION = 'app-v1';
var CACHE_FILES = [ ... ];
self.addEventListener('install', function (event) {
console.log('install', event)
event.waitUntil(
caches.open(CACHE_VERSION)
.then(function (cache) {
console.log('Opened cache');
return cache.addAll(CACHE_FILES);
})
);
});
</pre>
</div>
<div class="step" data-x="3000" data-y="2000" data-rotate="90">
<h3 style="margin-bottom: 30px;font-size:35px;">更新缓存资源</h3>
<pre style="font-size: 20px;margin: 0 0 5px ;background-color:bisque;color:#333;padding:20px 10px 0;border-radius: 10px;">
self.addEventListener('activate', function (event) {
console.log('activate', event)
event.waitUntil(
caches.keys().then(function (keys) {
return Promise.all(keys.map(function (key, i) {
if (key !== CACHE_VERSION) {
return caches.delete(keys[i]);
}
}))
})
)
});
</pre>
</div>
<div class="step" data-x="3000" data-y="3000" data-rotate="90">
<h3 style="margin-bottom: 30px;font-size:35px;">监听Fetch事件</h3>
<pre style="font-size: 20px;margin: 0 0 5px ;background-color:bisque;color:#333;padding:20px 10px 0;border-radius: 10px;">
self.addEventListener('fetch', function (event) {
console.log('fetch', event)
event.respondWith(
caches.match(event.request).then(function (res) {
if (res) return res;
requestBackend(event);
})
)
});
function requestBackend (event) {
console.log('requestBackend', event)
var url = event.request.clone();
return fetch(url).then(function (res) {
//if not a valid response send the error
if (!res || res.status !== 200 || res.type !== 'basic') return res;
var response = res.clone();
caches.open(CACHE_VERSION).then(function (cache) {
cache.put(event.request, response);
});
return res;
})
}
</pre>
</div>
<div class="step" data-x="3000" data-y="4000" data-rotate="90">
<h3 style="margin-bottom: 30px;font-size:30px;">推送（ Push API ）</h3>
<p style="font-size: 25px;margin: 10px 0;"> Push API 让推送服务具备了向 web 应用推送消息的能力；</p>
<p style="font-size: 25px;margin: 10px 0;"> 它定义了 web 应用如何向推送服务发起订阅、如何响应推送消息、web 应用和服务器与推送服务之间的鉴权与加密机制；</p>
<p style="font-size: 25px;margin: 10px 0;"> 由于 Push API 并不依赖 web 应用与浏览器 UI 存活，所以即使是在 web 应用与浏览器未被用户打开的时候，也可以通过后台进程接受推送消息并调用 Notification API 向用户发出通知</p>
<h3 style="margin: 30px 0;font-size:30px;">通知（ Notification API ）</h3>
<p style="font-size: 25px;margin: 10px 0;"> 负责所有与通知本身相关的机制，如通知权限管理、向操作系统发起通知、通知类型与音效，以及提供通知被点击或关闭时的回调等；</p>
</div>
<div class="step" data-x="0" data-y="0" data-scale="10">
End
</div>
</div>
<script src="js/impress.js"></script>
<script>
impress().init();
</script>
</body>
</html>