部署 PWA 问题答案

【问题标题】：Deploy PWA problems部署 PWA 问题
【发布时间】：2021-10-09 21:36:23
【问题描述】：

我一直在阅读此处有关 PWA 部署的所有主题，但没有一个修复有效。

我有一个 Python Web 应用程序托管在任何地方的 Python 上，并希望将其部署为 PWA。

当我将 manifest.json 添加到我的根文件夹并在 index.html 文件中使用以下内容引用它时：

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

我收到以下错误：

manifest error

如果我随后将我的清单文件移动到我的 /assets 文件夹并将我的 index.html 中的 href 更新为：

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

我的清单开始工作 - 然后我收到服务人员不匹配的错误：

Service worker error in Manifest

我在我的根文件夹中测试了我的服务工作者，与上面的清单相同，我已将我的服务工作者移动到我的 /assets/ 文件夹并将我的 index.html 文件设置为：

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', ()=> {
      navigator
      .serviceWorker
      .register('/assets/sw01.js')
      .then(()=>console.log("Ready."))
      .catch(()=>console.log("Err..."));
    });
  }
</script>

我的 service worker 显示它正在 chrome 中运行：

Service Worker running

但是我的清单显示没有匹配的服务人员。

附加信息：

我的清单中的起始 URL 设置为“https://app.mywebsite.com/”
我没有范围，我测试了多个范围都没有运气“.”、“/”、“https://app.mywebsite.com/”
我已将 Manifest href 测试为“manifest.json”、“/manifest.json”、“./manifest.json”、“/%PUBLIC_URL%/manifest.json”，清单仅在分发到文件夹时才有效不在我的根文件夹中，与我的服务人员相同

任何帮助将不胜感激！

【问题讨论】：

标签： python progressive-web-apps service-worker manifest pythonanywhere

【解决方案1】：

这是一个服务工作者范围问题，类似于Understanding Service Worker scope。

如果您从/assets/sw01.js 为您的Service Worker 服务，它无法控制/。你应该将你的 service worker 移到顶层，比如/sw01.js。

【讨论】：

嗨，杰夫，感谢您回复我，我现在已将我的 sw01.js 移动到我的根文件夹，但是它只是显示多余，并且清单仍然找不到它，我看到了链接有人说我可以让服务在任何目录中工作，但是我需要添加服务工作者允许的自定义标头，你知道应该在哪里添加吗？
您不必添加该标题。像您已经完成的那样将服务工作者移动到顶级目录就足够了。如果它显示为冗余，则可能是由于代码中的编程错误 - 如果它在 install 期间引发异常，这就是它冗余的原因之一。
感谢 Jeff，我现在在 chrome 控制台中看到我收到错误 The script has an unsupported MIME type ('text/html'). 我假设这是冗余服务人员的原因，我的服务人员在 HTML
嗨，杰夫，仅供参考 - 我重新开始并按照 Workbox 的入门指南，我已将 console.log('Hello from service-worker.js'); 放在 service-worker.js 中，并将 JS 添加到我的 HTML 正文中我得到同样的错误：Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://app.mywebsite.com/') with script ('https://app.mywebsite.com/service-worker.js'): The script has an unsupported MIME type ('text/html').
这意味着您的网络服务器正在为您的service-worker.js 文件发送 HTML（可能是与自定义 404/未找到页面相关联的 HTML），而不是实际的 JavaScript。您需要检查您的网络服务器配置以找出原因。