Я пытаюсь внедрить моего первого работника службы 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, как показано ниже.
Я хочу знать, что я что-то упустил или неправильно реализовал?Пожалуйста, предложите.