pwa之serviceworker离线文件处置惩罚

1. 建立offline.svg文件

1. 翻开index.html页面。

1. 勾上network->offline：革新页面，显现如图

完成道理

运用cache Api，预先缓存offline.html和offline.svg。当收集不通时，html要求走到cache要领内里去，然后相应的是缓存好的offline.html。offline.html又要求已缓存好的offline.svg。所以一般显现。

1. 建立index.html

Registration status:

1. 建立index.js

'use strict';
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(
'service-worker.js',
{ scope: './' }
).then( function(serviceWorker) {
document.getElementById('status').innerHTML = 'successful';
}).catch(function(error) {
document.getElementById('status').innerHTML = error;
});
} else {
document.getElementById('status').innerHTML = 'unavailable';
}


1. 建立service-worker.js

var version = 1;
var cacheName = 'static-' + version;
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll([
'index.html',
'packt-logo.png'
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request));
});


接见/Chapter%202/02/index.html，然后翻开offline。页面依然能够一般显现。

记着一定要加上index.html。大部分的服务器会把
/指向到
index.html。这模样我们的页面缓存不会见效。

1. 建立index.html

Registration status:

1. 建立service-worker.js

var version = 1;
var cacheName = 'static-' + version;
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll([
'index.html',
'style-2.css'
]);
})
);
});
self.addEventListener('fetch', function(event) {
if (/index/.test(event.request.url) || /style-2/.test(event.request.url)) {
event.respondWith(caches.match(event.request));
}
});


1. 建立style-1.css

body {
background-color: lightgreen;
}


1. 建立style-2.css

body {
background-color: red;
}


一样接见html能够看到绿色的背景，offline以后显现的赤色的背景。

一定要接见
index.html啊，不然不会胜利

fetch事宜和js其他事宜一样都是能够注册屡次的。

1. 建立index.html

Registration status:

1. 建立service-worker.js

var cookFetchHandler = function(event) {
console.log('DEBUG: Inside the /cook handler.');
if (event.request.url.indexOf('/cook/') > 0) {
event.respondWith(new Response('Fetch handler for /cook'));
}
};
var cookBookFetchHandler = function(event) {
console.log('DEBUG: Inside the /cook/book handler.');
if (event.request.url.endsWith('/cook/book')) {
event.respondWith(new Response('Fetch handler for /cook/book'));
}
};
var fetchHandlers = [cookBookFetchHandler, cookFetchHandler];
fetchHandlers.forEach(function(fetchHandler) {
self.addEventListener('fetch', fetchHandler);
});


浏览器内里接见

然后接见/cook/,是/cook/不是/cook

接见/cook/book

关注我的微信民众号，更多优良文章定时推送