Javascript 即使我有一名服务人员且我的PWA工作正常,也未检测到匹配的服务人员
我一直在做一个用HTML、CSS和JS编写的项目,在屏幕上随机显示不同的视频。我希望它是一个PWA,它就是这样做的。它工作正常,但当我打开Chrome DevTools和“应用程序”页面时,在“清单”部分会抛出一条警告:“没有匹配的服务工作者检测到。您可能需要重新加载页面,或者检查当前页面的服务工作者是否也控制清单中的开始URL。” 我对服务人员了解不多,我想知道为什么它能起作用,但似乎不起作用。另一个问题是,我从来没有得到“添加到主屏幕”弹出窗口。但是如果我手动添加它,它工作得很好。它也可以脱机工作 网站链接: My main.js中的我的服务人员代码:Javascript 即使我有一名服务人员且我的PWA工作正常,也未检测到匹配的服务人员,javascript,service,progressive-web-apps,worker,Javascript,Service,Progressive Web Apps,Worker,我一直在做一个用HTML、CSS和JS编写的项目,在屏幕上随机显示不同的视频。我希望它是一个PWA,它就是这样做的。它工作正常,但当我打开Chrome DevTools和“应用程序”页面时,在“清单”部分会抛出一条警告:“没有匹配的服务工作者检测到。您可能需要重新加载页面,或者检查当前页面的服务工作者是否也控制清单中的开始URL。” 我对服务人员了解不多,我想知道为什么它能起作用,但似乎不起作用。另一个问题是,我从来没有得到“添加到主屏幕”弹出窗口。但是如果我手动添加它,它工作得很好。它也可以脱
window.addEventListener("load", () => {
registerSW();
});
async function registerSW() {
if ('serviceWorker' in navigator) {
try {
await navigator.serviceWorker.register('./sw.js');
} catch (e) {
console.log(`SW registration failed`);
}
}
}
我的软件:
//CACHING FILES//
const filesToCache = [
'./',
'./offline.html',
'./css/offline.css',
];
const staticCacheName = 'pages-cache-v2';
self.addEventListener('install', event => {
console.log('Attempting to install service worker and cache static assets');
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return cache.addAll(filesToCache);
})
);
});
//LOADING FILES WHEN OFFLINE//
self.addEventListener('fetch', event => {
console.log('Fetch event for ', event.request.url);
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
console.log('Found ', event.request.url, ' in cache');
return response;
}
console.log('Network request for ', event.request.url);
return fetch(event.request)
.then(response => {
// TODO 5 - Respond with custom 404 page
return caches.open(staticCacheName).then(cache => {
cache.put(event.request.url, response.clone());
return response;
});
});
}).catch(error => {
console.log('Error, ', error);
return caches.match('./offline.html');
})
);
});
// TODO 6 - Respond with custom offline page
self.addEventListener('activate', event => {
console.log('Activating new service worker...');
const cacheWhitelist = [staticCacheName];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
我的网站清单:
{
"short_name": "Vinematik",
"name": "Vinematik",
"description": "Rastgele ve sınırsız vine izleme uygulaması!",
"icons": [
{
"src": "images/android-chrome-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "images/android-chrome-512x512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "images/apple-touch-icon.png",
"type": "image/png",
"sizes": "180x180"
},
{
"src": "images/favicon-16x16.png",
"type": "image/png",
"sizes": "16x16"
},
{
"src": "images/favicon-32x32.png",
"type": "image/png",
"sizes": "32x32"
}
],
"start_url": "https://ondersumer07.github.io/vinematik/",
"background_color": "#00adb5",
"display": "standalone",
"scope": "/",
"theme_color": "#00adb5"
}
解决方案是我没有将
范围
和开始url
放在manifest.json中,这需要作为网站地址。因此,我将代码更改为:
"start_url": "https://ondersumer07.github.io/vinematik/",
"background_color": "#00adb5",
"display": "standalone",
"scope": "https://ondersumer07.github.io/vinematik/",
"theme_color": "#00adb5"
问题就解决了。真奇怪。我也看到了同样的事情。一个疯狂的猜测-可能玩开始的url。尝试“/vinematik”之类的方法非常感谢因为你,我才想出了答案,我现在就发布解决方案