通过HTTP测试服务工作者的选项

Question

我想测试服务工作者,但我有一个虚拟主机设置,我似乎无法在localhost上启用https.

每当我尝试在localhost上注册服务工作者时,如何将本地虚拟主机URL列入白名单以测试服务工作者？Chrome表示https是启用服务工作者所必需的.如何至少在本地测试中超越此限制.

Answer 1

通常,您需要通过HTTPS为您的页面和服务工作者脚本提供服务,以便使用服务工作者.理由是在Prefer Secure Origins For Powerful New Features中描述的.

对于促进本地开发的HTTPS要求有一个例外:如果您通过http://localhost[:port]或通过访问您的页面和服务工作者脚本http://127.x.y.z[:port],那么应该启用服务工作者而无需任何进一步的操作.

如果由于某种原因,您需要通过除chrome://flags/#unsafely-treat-insecure-origin-as-secure或之外的主机名访问本地Web服务器devtools.serviceWorkers.testing.enabled,或者如果您需要在不支持HTTPS的远程Web服务器上进行测试,则可以使用手动解决方法.它涉及通过命令行启动Chrome,并使用http://localhost[:port]和http://127.x.y.z[:port]标志.

此错误包含更多详细信息,包括如何启动Chrome 的完整示例.

Firefox 通过设置提供类似的功能chrome://flags/#unsafely-treat-insecure-origin-as-secure.

请注意,此功能仅用于促进无法进行的测试,并且在提供站点的生产版本时应始终计划使用HTTPS.不要让真实用户完成启用这些标志的步骤!

Answer 2

如果您想调试插件移动设备的服务工作者以进行渐进式Web应用程序的真实行为测试,则ssl chrome启动选项无效,您绝对不需要购买证书.

@ chris-ruppel提到安装代理软件,但实际上有一种更简单的方法使用端口转发:

假设您使用Chrome连接并调试设备:

• 在Chrome开发工具"远程设备"中打开"设置"并添加"端口转发"规则.
• 如果您的localhost安装程序在localhost:80上运行,
• 只需添加规则"设备端口8080"(可以是任何无特权的端口> 1024)
• 和本地地址"localhost:80"(或mytestserver.sometestdomainwithoutssl.company:8181或其他)

执行此操作后,您可以在移动设备上调用URL" http:// localhost:8080 ",它将在您的实际PC /测试服务器上由"localhost:80"应答.与服务工作人员完美配合,就好像是您的移动设备上运行的本地计算机一样.

只要您记得在移动设备上使用非特权端口,也可用于多个端口转发和不同的目标域.看截图:

此信息的来源是google远程设备文档:https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server (但截至2017年4月,此内容尚不清楚简单的回答吧)

Answer 3

我经常想在真实设备上进行调试和测试.我提出的一种方法是在本地开发期间通过Charles Proxy路由电话的网络流量.与所有特定于Chrome的解决方案不同,这适用于手机上的任何浏览器.

1. 在我的笔记本电脑上运行Charles(也可以通过Service Worker为我的网站服务).Charles运行后,请注意步骤2的IP /端口.
2. 配置移动设备以将我的笔记本电脑用作代理.
   • 对于Android,只需在设置> 修改网络 > 高级设置 > 代理中点击并按住WiFi即可.使用手动设置IP /端口.
   • 对于iOS,请单击(i)图标> HTTP代理部分.选择手动,然后设置IP /端口.
3. localhost现在,在我的移动设备上访问可以让服务工作者进行注册和测试.

Answer 4

就我而言，测试 pwa 的最简单方法是使用 ngrok。 https://ngrok.com/download登录，获取你的令牌并设置它！

当您运行时，请./ngrok http {your server port}确保您使用 https，在您运行上述命令后，它将显示在终端中。

您也可以使用https://surge.sh，它用于托管静态网页，如果您访问这里：https : //surge.sh/help/securing-your-custom-domain-with-ssl 将能够查看如何设置 ssl 证书

Answer 5

我使用 ngrok 将本地 IP（实际上不是这样，因为它在 Google Colab 上）隧道到公共 IP。

\n

转到ngrok 控制台，我可以看到创建的所有隧道。我只为 localhost:port 创建了一个隧道，但这里有 2 个，一个用于 HTTP，另一个用于 HTTPS（不是很好吗？）。

\n

\n

如果我转到 Web 应用程序的 https 地址，我会在控制台上看到\n

\n

但是如果我访问 http 地址，在控制台上我会得到\n

\n\n

问：您可以与需要通过隧道连接到远程计算机的 HTTP 的 Service Worker 合作吗？

\n

答：显然是的！

\n\n

该注册背后的代码是（重要的是要知道它在哪里失败）：

\n

// Here we register the SERVICE WORKER\nIndexController.prototype._registerServiceWorker = function() { \n\n    console.log("1.Starting SW function."); \n\n    if (!navigator.serviceWorker) { \n        console.log("2.Browser is NOT compatible with SW or something is not working."); \n        return; } \n\n    console.log("2.Browser is compatible with SW.");\n\n    navigator.serviceWorker.register(\'/sw.js\').then(function() {\n        console.log(\'3.Registration worked!\');\n    }).catch(function() {\n        console.log(\'3.Registration failed!\');\n    });\n};\n

\n\n

更复杂的是，我使用 Service Workers 的 Web 应用程序在 Colab ( Google Colab ) 内运行。Web 应用程序在 Colab 内的 Node.js 上运行。

\n

如果您从本地主机工作，这对您来说应该更容易，因为连接到本地主机时不会强制执行 https 要求（根据理论）。[A] 和[B]

\n

\n

这与浏览器对您的应用程序很好的处理是不同的，因为它在本地主机上运行。

\n\n

注意：上面是我的实验..

\n

\n
• Firefox：使用和不使用以下设置均有效。
\n
• Chrome：无需将网址添加到白名单并重新启动，我得到了
\n

\n

转到 https web 应用程序我得到：

\n

IndexController.js:49 Mixed Content: The page at \'https://0a4e1e0095b0.ngrok.io/\' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint \'ws://0a4e1e0095b0.ngrok.io/updates?since=1602934673264&\'. This request has been blocked; this endpoint must be available over WSS.\nIndexController._openSocket @ IndexController.js:49\nIndexController @ IndexController.js:10\n(anonymous) @ index.js:16\nloadScripts @ loadScripts.js:5\n46.../utils/loadScripts @ index.js:15\ns @ _prelude.js:1\ne @ _prelude.js:1\n(anonymous) @ _prelude.js:1\nIndexController.js:49 Uncaught DOMException: Failed to construct \'WebSocket\': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.\n\xc2\xa0 \xc2\xa0 at IndexController._openSocket (https://0a4e1e0095b0.ngrok.io/js/main.js:2251:12)\n

\n

转到 http web 应用程序我得到：

\n

Navigated to http://0a4e1e0095b0.ngrok.io/\nIndexController.js:17 1.Starting SW function.\nIndexController.js:19 2.Browser is NOT compatible with SW or something is not working.\n

\n\n

如果您不在本地主机上并且无法使用 https，那么您可能需要更改浏览器上的这些设置。

\n\n

有些人已经解释过这一点，但这里又重复了。

\n

铬合金：

\n

\n
1. 转到 chrome://flags/#unsafely-treat-insecure-origin-as-secure
\n
2. 添加您想要列入白名单的网址。
\n
3. 重新启动铬
\n

\n

请注意，这将重新启动所有Chrome 窗口。这对我来说不是一个解决方案，因为我的隧道每次创建时都会更改名称，而且我不能每次都重新启动一堆窗口。

\n

\n\n

火狐/水狐

\n

\n
1. 打开开发者工具
\n
2. 打开设置
\n
3. 标记“通过 HTTP 启用服务工作线程（工具箱打开时）”
\n

\n

\n\n

Firefox/Waterfox \n您可能不需要进行以下更改，但我做了（我的浏览器可能有点旧）。更多信息请点击这里。

\n

在关于：配置

\n

\n我启用了

\n

dom.serviceWorkers.testing.enabled\ndom.serviceWorkers.enabled\n

\n

我强烈建议您查看此https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers以及同一网站上的相关页面。

\n\n

如果有人对 ngrok 设置感兴趣，它非常简单（python 版本）。

\n

#   Install pyngrok python package on your Google Colab Session\n!pip install pyngrok\n\n#    Set up your ngrok Authtoken (requires free registration)\n!ngrok authtoken YOUR_TOKEN_HERE\n\n\n#    Invoke ngrok from Python and start tunneling/connecting\nfrom pyngrok import ngrok \n\n# Open a HTTP tunnel on the default port 80 if not specified\nngrok_tunnel = ngrok.connect(\'8888\')\n\n# You can print it, or go to the ngrok console on https://dashboard.ngrok.com/status/tunnels\nprint (ngrok_tunnel.public_url)\n

\n\n