Github 頁面上的 PWA

Question

我正在我的頁面上處理 PWA，我 100% 關注這個簡單的代碼實驗室 - 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. （在 devtools 中我可以看到雖然它是普通的 json 文件，但它在我的本地主機上工作正常）；
3. TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
4. 在devtools中單擊“添加到主屏幕”后，我得到： 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頁面有問題...

Answer 1

看起來service-worker.js和manifest.json文件可能已經以某種方式損壞，因為即使有多次下載，我也無法在我的計算機上打開任何一個文件。 （我正在查看/final文件夾）

我還建議查看 Github 上已有的其他 PWA，例如pwarocks ，看看他們是如何使用 Github Pages 完成 PWA 的。

Answer 2

Github Pages的根路徑是用戶名^{https://{github_username}.github.io/{repository}} ，也就是說如果你的repository要變成PWA，那么manifest.json中的start_url也要做相應的調整，以及指向根路徑的其他路徑，例如/也應該被賦予存儲庫名稱/repo/以正常工作。

例如

清單.json

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

應用程序.js

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

完整示例

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