// manifest.json
{
"name": "Progressive Times web app",
"short_name": "Progressive Times",
"start_url": "./index.html",
"theme_color": "#FFDF00",
"background_color": "#58bc58",
"display": "standalone",
"icons": [
{
"src": "./images/homescreen.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./images/homescreen-144.png",
"sizes": "144x144",
"type": "image/png"
}
]
}
// index.html
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(function(registration) {
// Registration was successful
});
}
</script>
// sw.js
var cacheName = 'latestNews-v1';
// Cache our known resources during install
self.addEventListener('install', event => {
event.waitUntil(
caches.open(cacheName)
.then(cache => cache.addAll([
'./js/main.js',
'./js/article.js',
'./images/newspaper.svg',
'./css/site.css',
'./data/latest.json',
'./data/data-1.json',
'./article.html',
'./index.html'
]))
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, { ignoreSearch: true })
.then(function(response) {
if (response) {
return response;
}
var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
function(response) {
if(!response || response.status !== 200) {
return response;
}
var responseToCache = response.clone();
caches.open(cacheName)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
复制代码
一个很简单的demo程序,上传在github上面,通过github pages来做https访问,可是在手机上面测试,清单文件不起效,用的是ios chrome 68?
转载于:https://juejin.im/post/5b9084246fb9a05d1d2de7b6