如何使用自簽名 OpenSSL 證書在 HTTPS 上測試 PWA？

Question

我可以使用 localhost 通過 http 測試 serviceworkers，但我想在移動瀏覽器上測試。 因為它是一個單獨的設備，所以我不能使用 localhost，所以我使用了 PC 的名稱。 所以現在我需要使用 https，這會導致我的 Service Worker 出現 SSL 相關錯誤：

Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope (' https://xxx:5500/app/ ') with script (' https://xxx:5500/app/service_worker.js '): An SSL獲取腳本時發生證書錯誤。

我已正確配置 liveServer 以使用自簽名證書，並且已成功啟用“edge://flags/#unsafely-treat-insecure-origin-as-secure”，但這還不夠。

我還擔心如何在移動設備上測試 PWA，因為我認為我無法在移動設備上使用“不安全”功能。 我認為這是一個常見的情況，但我沒有找到任何答案。

Answer 1

您可以通過 chrome 開發人員工具在移動設備上測試您的 PWA：稱為遠程調試的方法（僅適用於 android）

1. 在移動設備中打開開發人員工具 - 允許 USB 調試

2. 通過 USB 連接到筆記本電腦或個人電腦

3. 轉到 chrome 開發工具打開遠程設備

4. 在遠程設備中設置端口轉發

5. 在移動 Chrome 瀏覽器中運行本地主機。

有關詳細信息，請參閱： https : //developers.google.com/web/tools/chrome-devtools/remote-debugging

這在移動設備中提供了本地主機，因此不需要 https 或 ssl。

我認為這是測試您的 PWA 的最佳方式，我親自使用過。

Answer 2

另一個可行的解決方案是使用ngrok ，它將為您想要的項目創建一個實時 https 服務器（然后您將能夠在您的移動設備上訪問它）

Answer 3

一個非常簡單的解決方案是在您的 Android 手機上安裝Termux ，然后使用socat從本地端口轉發到您的開發主機：

socat tcp-l:8000,fork,reuseaddr tcp:192.168.1.170:8000

這將在終端打開時在后台運行。 然后在 Chrome 中，您可以通過普通 HTTP 連接到http://127.0.0.1:8000 ，您應該會收到“將 x 添加到主屏幕”通知。

在本地網絡上運行良好，無需證書、應用程序或服務。