渐进式Web应用-Service Worker不提供start_URL [英] Progressive Web App - Service Worker not serving start_URL

问题描述

正在使用渐进式Web应用程序.我试图使Web应用程序安装横幅能够正常工作，但是在使用Lighthouse调试后，我仍然收到service worker does not successfully serve the manifest's start_url(下图).目前，我正在使用azure托管我的网站.

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). Currently I'm hosting my website using azure.

新: 我检查了所有缓存，start_url和服务工作者，以查看所有匹配项.但这仍然给我同样的错误.

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还是我的service-worker问题.下面是我的代码.

I'm not sure if it's my start_url or my service-workerproblem. 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);
    })
  );
});

我的浏览器缓存:

推荐答案

从

如果我们在/example/sw.js注册服务工作者文件，则服务工作者只会看到URL以/example/开头(即/example/page1/，/example/page2/)的页面的fetch事件.

If we register the service worker file at /example/sw.js, then the service worker would only see fetch events for pages whose URL starts with /example/ (i.e. /example/page1/, /example/page2/).

内嵌显示的错误，并在此文档中给出，请检查以下内容:

Inline with the shown error and given in this documentation, check the following:

1. 在您的manifest.json文件中定义一个start_url属性.
2. 确保您的服务工作者正确缓存与start_url值匹配的资源.

1. Define a start_url property in your manifest.json file.
2. Ensure that your service worker properly caches a resource that matches the value of start_url.

此外，请检查此教程，看看它是否对您有帮助

Also, check this tutorial and see if it will help you.

这篇关于渐进式Web应用-Service Worker不提供start_URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！