在Github Pages上使用PWA

Question

我正在开发我的网页上的PWA，并且完全遵循这个简单的codelab - https://codelabs.developers.google.com/codelabs/add-to-home-screen/#0，一切都正常（在使用示例代码和我的网页上），但只有在本地主机上测试时才有效。在部署到GitHub页面后，我遇到了许多错误：

1. GET https://[myusername].github.io/manifest.json 404 () (即存在路径问题，我猜在清单文件之前应该有项目名称)
2. Manifest: Line: 1, column: 1, Unexpected token. (在开发工具中，我可以看到有一个错误标记，尽管它是正常的json文件，并且在我的本地主机上运行良好)
3. TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
4. 在点击“添加到主屏幕”后，在开发工具中出现：Manifest: Line: 1, column: 1, Unexpected token. 和 Site cannot be installed: the manifest could not be fetched, is empty, or could not be parsed.

有什么想法吗？ 我不知道是否有做错的地方还是github页面出了问题...

- Majka

Answer 1

似乎 service-worker.js 和 manifest.json 文件已经某种方式损坏了，因为即使我多次下载，也无法在我的电脑上打开这两个文件。（我正在查看 /final 文件夹）

我还建议查看已经在Github上的其他PWA，例如 pwarocks，以了解他们如何使用Github Pages实现PWA。

- user5393970

---

对我来说，这些文件本身很好用（包括基于这个教程的我自己项目中的新文件），但是只有在本地主机测试时才能正常工作，而在发布到Github后却不能正常工作。也许我应该再找一个来源，但这似乎是最简单的。 - Majka

Answer 2

Github Pages的根路径是用户名称^{https://{github_username}.github.io/{repository}}，这意味着如果您的存储库要成为PWA，则应相应调整manifest.json中的start_url，并且指向根路径的其他路径，如/，也应该加上存储库名称/repo/以正常工作。

例如： manifest.json

{
  // ...
  "id": "/repository/", // not "/"
  "start_url": "/repository/", // if you set "/" that means: `https://{github_username}.github.io/` not `https://{github_username}.github.io/repository`
}

app.js

navigator.serviceWorker.register('/repository/sw.js') // not '/sw.js'

完整示例

• 源代码：https://github.com/CarsonSlovoka/twenty48/tree/gh-pages/docs
• 演示地址：https://carsonslovoka.github.io/twenty48/

- Carson