Javascript 渐进式 Web 应用程序 - Service Worker 不提供 start_URL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46726966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Progressive Web App - Service Worker not serving start_URL
提问by Azrie Bakri
Was playing around with the progressive web app. I've trying to make web app install banner working but I keep receiving service worker does not successfully serve the manifest's start_urlafter I debugging using Lighthouse (Picture below). Currently I'm hosting my website using azure.
正在玩渐进式网络应用程序。我试图使 Web 应用程序安装横幅正常工作，但service worker does not successfully serve the manifest's start_url在使用 Lighthouse（下图）进行调试后，我一直收到消息。目前我正在使用 azure 托管我的网站。
NEW:I checked all my cache, start_url, and also my service worker to see everything match. But it still gives me the same error.
新：我检查了我的所有缓存、start_url 以及我的服务工作者，以查看所有内容是否匹配。但它仍然给我同样的错误。
I'm not sure if it's my start_urlor my service-workerproblem. Below is my code.
我不确定这是start_url我的service-worker问题还是我的问题。下面是我的代码。
manifest.json
manifest.json
{
"short_name": "MY EXPERTS",
"name": "MYEXPERT",
"icons": [
{
"src": "Images/petronas_logo_192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "Images/petronas_logo_192.png",
"type": "image/png",
"sizes": "512x512"
}
],
"background_color": "#FFFFFF",
"theme_color": "#67BCFF",
"display": "standalone",
"start_url": "/Home/Index"
}
AddServiceWorker.js
AddServiceWorker.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').
then(function (registration) {
// Registration was successful``
console.log('ServiceWorker registration successful with scope: ',
registration.scope);
}).catch(function (err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
}
service-worker.js
service-worker.js
self.addEventListener('install', e => {
e.waitUntil(
caches.open('airhorner').then(cache => {
return cache.addAll([
'/',
'/?utm_source=homescreen',
'/Home/About',
'/Home/Index',
'/Home/Contact'
])
.then(() => self.skipWaiting());
})
)
});
self.addEventListener('activate', event => {
event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
My Browser Cache :
我的浏览器缓存：
回答by Teyam
Noted from Register A service worker,
从注册服务工作者注意到，
If we register the service worker file at
/example/sw.js, then the service worker would only seefetchevents for pages whose URL starts with/example/(i.e./example/page1/,/example/page2/).
如果我们在 处注册 Service Worker 文件
/example/sw.js，那么 Service Worker 将只会看到fetchURL 以/example/（即/example/page1/,/example/page2/）开头的页面的事件。
Inline with the shown error and given in this documentation, check the following:
根据显示的错误并在本文档中给出，请检查以下内容：
- Define a
start_urlproperty in yourmanifest.jsonfile.- Ensure that your service worker properly caches a resource that matches the value of
start_url.
start_url在您的manifest.json文件中定义一个属性。- 确保您的 Service Worker 正确缓存了与 值匹配的资源
start_url。
Also, check this tutorialand see if it will help you.
另外，请查看本教程，看看它是否对您有所帮助。
回答by Ruslan Korkin
You should provide the url in "start_url", if you are using the localhost it should containg the next: "start_url": "http://localhost:8080/index.html",
您应该在 中提供 url "start_url"，如果您使用的是 localhost，它应该包含下一个："start_url": "http://localhost:8080/index.html"，
回答by seveninstl
Just a note... you notice above that the pages are being served over "https." But, if you have everything else right, and are not using https, you will get this same error message.
请注意……您在上面注意到页面是通过“https”提供的。但是，如果其他一切都正确，并且没有使用 https，您将收到相同的错误消息。
