[英]Progressive Web App - Service Worker not serving start_URL
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_url
after I debugging using Lighthouse (Picture below).我试图使 Web 应用程序安装横幅正常工作,但在我使用 Lighthouse(下图)进行调试后,我一直收到service worker does not successfully serve the manifest's start_url
。 Currently I'm hosting my website using azure.目前我正在使用 azure 托管我的网站。
NEW: I checked all my cache, start_url, and also my service worker to see everything match.新:我检查了我的所有缓存、start_url 以及我的服务工作者,以查看所有内容是否匹配。 But it still gives me the same error.但它仍然给我同样的错误。
I'm not sure if it's my start_url
or my service-worker
problem.我不确定这是我的start_url
还是我的service-worker
问题。 Below is my code.下面是我的代码。
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
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
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 :我的浏览器缓存:
Noted from Register A service worker ,从注册服务工作者注意到,
If we register the service worker file at
/example/sw.js
, then the service worker would only seefetch
events for pages whose URL starts with/example/
(ie/example/page1/
,/example/page2/
).如果我们在/example/sw.js
注册 service worker 文件,那么 service worker 只会看到 URL 以/example/
开头的页面的fetch
事件(即/example/page1/
,/example/page2/
)。
Inline with the shown error and given in this documentation , check the following:根据显示的错误并在本文档中给出,请检查以下内容:
- Define a
start_url
property in yourmanifest.json
file.在manifest.json
文件中定义一个start_url
属性。- Ensure that your service worker properly caches a resource that matches the value of
start_url
.确保您的 Service Worker 正确缓存了与start_url
值匹配的资源。
Also, check this tutorial and see if it will help you.另外,请查看本教程,看看它是否对您有所帮助。
您应该在"start_url"
提供 url,如果您使用的是本地主机,它应该包含下一个: "start_url": "http://localhost:8080/index.html"
,
Just a note... you notice above that the pages are being served over "https."请注意……您在上面注意到页面是通过“https”提供的。 But, if you have everything else right, and are not using https, you will get this same error message.但是,如果其他一切都正确,并且没有使用 https,您将收到相同的错误消息。
伙计们,一直在为同样的问题苦苦挣扎,只是发现我的 html 链接标签丢失了,请确保您指示您的清单文件位于网站标题的位置:
<link rel="manifest" href="/manifest.json">
"start_url": "/",
to the json object.现在将"start_url": "/",
到 json 对象。 { "name": "Occasionally Frustrated", "short_name": "Occasionally Frustrated", "start_url": "/", "display": "standalone" }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.