ServiceWorkers那些事儿 #131
Comments
|
Service Workers解决什么问题？用户断网导致的离线问题。 Service Workers哪里好？
尝试service workers前的准备
service workers的限制是什么？
service worker与Promise的关系？service worker基于Promise，这样可以做到不阻塞main thread。 service worker与XMR的关系？XMLHttpRequest API是不推荐的API，service worker推荐使用caching和onfetch，所以最好将重心放在对Promise的理解上。 有没有service-worker的demo可以感受一下？在线demo：https://mdn.github.io/sw-test/ service worker是真正的操作系统线程吗？Worker interface繁衍出来真正的操作系统级别的线程，所以可能会有线程并发导致的问题。 service worker可以调用window对象的方法吗？不完全可以。 service worker可以操作DOM吗？不可以。 如何从开发者工具查看service worker
|
基础架构1.注册 Service Worker生命周期图
Service Worker事件图
|
注册一个workerif ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
.then(function(reg) {
// registration worked
console.log('Registration succeeded. Scope is ' + reg.scope);
}).catch(function(error) {
// registration failed
console.log('Registration failed with ' + error);
});
}
偶尔会注册失败会是什么原因？
其他注意事项：
|
安装和激活：填充你的缓存
self.addEventListener('install', (event)=>{
event.waitUntil(
caches.open('v1').then((cache)=>{
return cache.addAll([
'./sw-test/',
'./sw-test/index.html',
'./sw-test/style.css',
'./sw-test/app.js',
'./sw-test/image-list.js',
'./sw-test/star-wars-logo.jpg',
'./sw-test/gallery',
'./sw-test/gallery/bountryHunters.jpg',
'./sw-test/gallery/myLittleVader.jpg',
'./sw-test/gallery/snowTroppers.jpg'
])
})
)
})
注意：
|
请求自定义响应
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
);
});
一个关于fetch和service worker很好的例子
new Response('Hello from your friendly neighbourhood service worker!');
new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
headers: { 'Content-Type': 'text/html' }
});
fetch(event.request);
caches.match('./fallback.html');
event.request.url
event.request.method
event.request.headers
event.request.body |
恢复错误请求
可以像下面这样处理异常： self.addEventListener('fetch', (event)=>{
event.respondWith(
caches.match(event.request).then((response)=>{
return response || fetch(event.request).then((response) => {
return caches.open('v1').then((cache) => {
cache.put(event.request, response.clone());
return response;
});
});
}).catch(()=> {
return caches.match('./sw-test/gallery/myLittleVader.jpg');
})
)
}) |
更新service worker
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v2').then((cache) => {
return cache.addAll([
'./sw-test/',
'./sw-test/index.html',
'./sw-test/style.css',
'./sw-test/app.js',
'./sw-test/image-list.js',
…
// include other new resources for the new version...
]);
})
);
});删除旧cache
self.addEventListener('activate', (event) => {
var cacheKeeplist = ['v2'];
event.waitUntil(
caches.keys().then((keyList) => {
return Promise.all(keyList.map((key) => {
if (cacheKeeplist.indexOf(key) === -1) {
return caches.delete(key);
}
}));
})
);
}); |
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
The text was updated successfully, but these errors were encountered: