我正在尝试实现我的第一个PWA服务工作者,并且我只引用了Google文档。到目前为止,我的manifest.json已经完成,服务人员是一个简单的代码,如下所示。
// sw.js
var CACHE_NAME = "MyFirstPWA";
var filesToCache = [
// some css and js files to cache
];
self.addEventListener('install', function (e) {
e.waitUntil(caches.open(CACHE_NAME).then(function (cache) {
return cache.addAll(filesToCache);;
}).then(function (e) {
return self.skipWaiting();
}));
});
self.addEventListener('activate', function (event) {
event.waitUntil(caches.keys().then(function (cacheNames) {
return Promise.all(cacheNames.map(function (cacheName) {
return caches.delete(cacheName);
}));
}));
});
self.addEventListener('fetch', function (event) {
event.respondWith(caches.match(event.request).then(function (response) {
return response || fetch(event.request);
}).catch(function (e) {
console.log(e);
}));
});
// Manifest.json
{
"name": "MyFirstPWA",
"short_name": "MyFirstPWA",
"icons": [
{
"src": "/images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/?utm_source=pwa&utm_medium=pwa",
"orientation": "portrait",
"display": "standalone",
"theme_color": "#0054a6",
"background_color": "#ffffff",
"scope": "/",
"splash_pages": null
}
Google的迷你信息栏功能的工作状态如下。
我想知道我是否缺少某些东西或执行错误? 请提出建议。