渐进式 Web 应用程序 - Service Worker 不提供 start_URL

Posted 2023-02-16

【中文标题】渐进式 Web 应用程序 - Service Worker 不提供 start_URL

【英文标题】：Progressive Web App - Service Worker not serving start_URL

【发布时间】：2018-03-25 09:58:54

【问题描述】：

正在玩渐进式网络应用。我试图让网络应用程序安装横幅工作，但在我使用 Lighthouse 进行调试后，我一直收到service worker does not successfully serve the manifest's start_url（下图）。目前我正在使用 azure 托管我的网站。

新： 我检查了所有缓存、start_url 以及我的服务人员，以查看所有内容是否匹配。但它仍然给我同样的错误。

我不确定是我的start_url 还是我的service-worker问题。下面是我的代码。

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);
    )
  );
);

我的浏览器缓存：

【参考方案1】：

来自Register A service worker，

如果我们在 /example/sw.js 注册 service worker 文件，那么 service worker 只会看到 URL 以 /example/ 开头的页面的 fetch 事件（即/example/page1/、/example/page2/）。

与显示的错误内联并在此documentation 中给出，请检查以下内容：

在manifest.json 文件中定义start_url 属性。 确保您的 Service Worker 正确缓存与 start_url 的值匹配的资源。

另外，请查看tutorial，看看它是否对您有帮助。

【讨论】：

我浏览了你所有的链接。检查了我的缓存，做了一些试验和错误，但我仍然收到同样的错误。我用缓存的屏幕截图更新了我的问题。

我的服务人员在一个子目录中。这导致了这个问题。谢谢

在隐身模式下运行审核为我解决了这个问题。不知道为什么

此外，当我将路由添加到不存在的缓存时，错误消失了。它的魔力，但也很差。

天啊。我已经花了两天的时间来解决这个问题，问题是......那！？！？！？！？！嘎！

【参考方案2】：

您应该在"start_url" 中提供网址，如果您使用的是本地主机，它应该包含下一个："start_url": "http://localhost:8080/index.html"，

【参考方案3】：

请注意...您注意到上面的页面是通过“https”提供的。但是，如果您一切正常，并且没有使用 https，您将收到同样的错误消息。

【参考方案4】：

伙计们，为了发现我的 html 链接标签丢失而一直在努力解决同样的问题，请确保您指出您的清单文件在您的网站标题上的位置：

<link rel="manifest" href="/manifest.json">

【参考方案5】：

已回答

转到您的

public

文件夹， 转到您的

ma​​nifest.json

文件， 现在将"start_url": "/", 添加到 json 对象中。 请参见下面的示例。

"name": "Occasionally Frustrated", "short_name": "Occasionally Frustrated", "start_url": "/", "display": "standalone"