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

我想测试服务工作者，但是我有一个虚拟主机设置，我似乎不能在本地主机上启用 https。

如何将本地虚拟主机 URL 列入白名单以测试服务工作者 当我尝试在本地主机上注册服务工作者的时候？Chrome 表示，服务工作者需要使用 https。至少在本地测试中，我如何才能通过这个限制。

107897 次浏览
小开

通常，为了使用服务工作者，需要通过 HTTPS 同时提供页面和服务工作者脚本。基本原理在 为强大的新特性选择安全的原产地中描述。

为了方便本地开发，HTTPS 需求有一个例外: 如果您通过 http://localhost[:port]或者 http://127.x.y.z[:port]访问页面和服务工作者脚本，那么应该启用服务工作者，而不需要进一步的操作。

在最新版本的 Chrome 中，您可以通过 chrome://flags/#unsafely-treat-insecure-origin-as-secure、 正如这个答案中所解释的在本地开发过程中解决这个问题。

Firefox 提供类似的功能，通过 devtools.serviceWorkers.testing.enabled设置。

请注意，这个功能是 只有，意在促进测试，否则无法进行，您应该始终计划使用 HTTPS 时，服务于您的网站的生产版本。不要要求真正的用户完成启用这些标志的步骤！

小开

我经常想在真正的设备上进行调试和测试。我想到的一个方法是在本地开发期间通过 Charles Proxy路由手机的网络流量。与所有 Chrome 特有的解决方案不同，它可以适用于手机上的任何浏览器。

  1. 在我的笔记本电脑上运行 Charles (它也为我的网站和 ServiceWorker 提供服务)。一旦 Charles 运行，注意步骤2的 IP/端口。
  2. 将移动设备配置为使用我的笔记本电脑作为代理。
    • 对于 Android 系统，只需点击并按住你的 WiFi 设置 > 修改网络 > 高级设置 > 代理。使用 手册设置 IP/端口。
    • 对于 iOS，单击(i)图标 > HTTP 代理部分。选择 手册，然后设置 IP/端口。
  3. 在我的移动设备上访问 localhost现在允许 ServiceWorker 进行注册和测试。
小开

正如 Jeff 在第一个响应中提到的，您不需要本地主机级别的 https 来测试 ServiceWorkers。只要您访问本地主机域(不使用 HTTPS) ，服务工作者就可以注册并正常工作。

一旦您在 localhost 上测试了应用程序，并且希望了解它是如何与 https 真正协同工作的，最简单的方法就是将您的应用程序上传到 GitHub。您可以免费创建公共域(并使用 HTTPS!).

这里是说明: https://pages.github.com/

小开

如果您想测试不能在本地主机上运行 Web 服务器的客户机设备上的服务工作者，一般技术如下:

  1. 给服务器一个主机名。
  2. 给这个主机名一个证书。
  3. 使 IP 信任颁发此证书的 CA。

但这说起来容易做起来难。在2016年11月 Reddit 上的 AMA 上，Let’s Encrypt 的代表 知道了认为私有局域网上的 HTTPS“是一个非常棘手的问题，我认为到目前为止还没有人提出一个令人满意的答案。”

给你的计算机一个主机名的常见方法包括给它一个稳定的内部 IP 地址，而不是每天或每次你的互联网网关设备的电力周期变化。您需要在您的网络上配置 DHCP 服务器，通常是在您的网关中，设置一个“预订”，将特定的私有地址(通常在 10/8或 192.168/16内)与您的开发工作站的以太网卡的 MAC 地址关联起来。为此，请阅读入门手册。

既然您的开发工作站已经有了一个稳定的 IP 地址，那么就需要进行时间/金钱的权衡。如果你愿意学习高级域名系统和 OpenSSL 的使用方法，并在所有你计划测试的设备上安装一个根证书:

  1. 在您的网络上运行一个内部 DNS 服务器。这可能在您的网关或开发工作站上。
  2. 将您的 DNS 服务器配置为对某些虚构 TLD 具有权威性，对其他 TLD 具有递归性。
  3. 为开发工作站的私有 IP 地址提供一个稳定的名称。这给了它一个内部名称。
  4. 将您的 DHCP 服务器配置为将此 DNS 服务器的地址提供给获得租约的其他设备。
  5. 在您的开发工作站上，使用 OpenSSL 为 私人证书颁发机构和 Web 服务器生成密钥对。
  6. 使用 OpenSSL，为 CA 发出根证书，并为 web 服务器的内部名称发出证书。
  7. 使用此证书在开发工作站上的 Web 服务器中配置 HTTPS。
  8. 将通讯局的根证书安装为所有设备的可信根证书。
  9. 在所有设备上，访问此内部名称。

如果你不能添加一个根证书或者控制本地域名系统，比如你计划用别人拥有的设备(BYOD)进行测试，或者使用更多不允许用户添加可信根证书的锁定浏览器，比如那些主要的视频游戏控制台，你需要一个完全限定的域名(FQDN) :

  1. 从 提供具有 API 的 DNS 的注册商购买域名。这可能是直接在一个 TLD 或从其中一个动态 DNS 提供商，使其成为公共后缀列表。(由于 让我们加密所规定的利率限制，非 PSL 动态 DNS 提供程序是不可接受的。)
  2. 在此域的区域文件中，将 A记录指向开发工作站的私有 IP 地址。这将为您的开发工作站提供一个 FQDN。
  3. 使用支持 dns-01质询的 ACME 客户端 脱水了从 Let’s Encrypt 证书颁发机构获得此 FQDN 的证书。
  4. 使用此证书在开发工作站上的 Web 服务器中配置 HTTPS。
  5. 在所有设备上，访问此名称。
小开

如果你想 调试插入式移动设备的服务工作者进行一个真正的行为测试的进步的 Web 应用程序，ssl 铬启动选项没有帮助，你肯定不需要购买证书。

@ chris-ruppel 提到安装代理软件，但实际上有一个 使用端口转发更容易的方法:

假设你使用 Chrome 连接和调试你的设备:

  • 在 Chrome 开发工具“远程设备”中打开 “设定”并添加 “端口转发”规则。
  • 如果在 localhost: 80上运行本地主机安装程序,
  • 只需添加一个规则 “设备端口8080”(可以是任何 > 1024的非特权端口)
  • 和本地地址“ localhost: 80”(或 mytestserver.some testdomainwithout ssl.company: 8181或其他)

这样做之后，您可以 在你的移动设备上打电话给这个网址(http://localhost: 8080”rel = “ norefrer”> http://localhost:8080 )，它将由您的 实际 PC/测试服务器上的“ localhost: 80”回答。与服务人员完美地工作，就好像它是你的本地机器在你的手机上运行。

也适用于多端口转发和不同的目标域，只要你记得在你的移动设备上使用非特权端口。见截图: See screenshot for some configured ports which will call the PC when called on the mobile

这些信息的来源是谷歌远程设备文档: < a href = “ https://developers.google.com/web/tools/chrome-devtools/remote-debug/local-server”rel = “ norefrer”> https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server (但截至2017年4月，还不清楚是否能从中读出这个简单的答案)

小开

在我的例子中，测试 pwa 最简单的方法是使用 ngrok。 Https://ngrok.com/download 登录，获取您的令牌并设置它！

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

你也可以使用 https://surge.sh，它是一个静态网页的主机，如果你访问这里: < a href = “ https://surge.sh/help/security-your-custom- domain-with-ssl”rel = “ norefrer”> https://surge.sh/help/securing-your-custom-domain-with-ssl 将能够看到如何设置 ssl 证书

小开

我认为测试服务工作者最简单的方法是找到一个免费的托管服务提供商。 现在，有很多网站提供免费托管。你可以很容易地在这个免费的服务器上托管你的应用程序。

我大多使用 你好和 Netlify。这是免费的，易于使用。

小开

我使用 ngrok 将本地 IP (实际上并非如此，因为它在 GoogleColab 上)隧道到一个公共 IP。

走到 Ngrok 控制台，我可以看到所有的隧道建成。我只为 localhost: port 创建了一个隧道，但这里有2个，一个用于 HTTP，另一个用于 HTTPS (这不是很好吗?).

https://i.imgur.com/4v01j7k.png

如果我转到 Web 应用程序的 https 地址，我将在控制台上看到 https://i.imgur.com/5KKak9Y.png

但是如果我去 http 地址，在控制台上我得到 https://i.imgur.com/4oFUK1n.png

问: 您能与需要通过隧道连接到远程机器的 HTTP 的服务工作者一起工作吗？

显然是的！

该注册背后的代码是(了解注册失败的地方很重要) :

// Here we register the SERVICE WORKER
IndexController.prototype._registerServiceWorker = function() {


console.log("1.Starting SW function.");


if (!navigator.serviceWorker) {
console.log("2.Browser is NOT compatible with SW or something is not working.");
return; }


console.log("2.Browser is compatible with SW.");


navigator.serviceWorker.register('/sw.js').then(function() {
console.log('3.Registration worked!');
}).catch(function() {
console.log('3.Registration failed!');
});
};

为了使它更加复杂，我的 Web 应用程序使用服务工作者是在 Colab (谷歌 Colab)内运行。这个 web 应用程序在 Colab 的 Node.js 上运行。

如果您在本地主机上工作，那么对您来说应该更容易，因为在连接到本地主机时(根据理论)没有强制执行 https 要求。[ A ]和 [ B ]

https://i.imgur.com/wAAZQFU.png

这并不是说浏览器仅仅因为运行在本地主机上就适合你的应用程序。

注: 我上面的实验. 。

  • Firefox: 使用和不使用下面的设置。
  • Chrome: 没有添加地址到白名单和重新启动我得到

使用 https 网络应用程序:

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.
IndexController._openSocket @ IndexController.js:49
IndexController @ IndexController.js:10
(anonymous) @ index.js:16
loadScripts @ loadScripts.js:5
46.../utils/loadScripts @ index.js:15
s @ _prelude.js:1
e @ _prelude.js:1
(anonymous) @ _prelude.js:1
IndexController.js:49 Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
    at IndexController._openSocket (https://0a4e1e0095b0.ngrok.io/js/main.js:2251:12)

访问 http://http://http://http://http://http://http://http://http://http://http://http://http://http://http://http://http

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

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

有些人已经解释过这个问题了，但是现在它又来了。

Chrome:

  1. 转到 chrome://Flag/# unsafe-treat-security-source-as-security
  2. 添加您想要列入白名单的 url。
  3. 重启铬合金

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

https://i.imgur.com/3n4gMoR.png

Firefox/Waterfox

  1. 开放式开发工具
  2. 打开设置
  3. 标记“ Enable service worker over HTTP (when toolbox is open)”

https://giphy.com/gifs/oA6ZoXqqzdFnxLrZmQ

Firefox/Waterfox 您可能不需要做下面的更改，但我做了(我的浏览器可能有点旧)。更多信息 给你。

在 about: config 中

https://i.imgur.com/CjboKnK.png 我启动了

dom.serviceWorkers.testing.enabled
dom.serviceWorkers.enabled

我强烈推荐在同一个网站上查看这个 https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers和相关页面。

如果有人对 ngrok 设置感兴趣，那么它非常简单(python 版本)。

#   Install pyngrok python package on your Google Colab Session
!pip install pyngrok


#    Set up your ngrok Authtoken (requires free registration)
!ngrok authtoken YOUR_TOKEN_HERE




#    Invoke ngrok from Python and start tunneling/connecting
from pyngrok import ngrok


# Open a HTTP tunnel on the default port 80 if not specified
ngrok_tunnel = ngrok.connect('8888')


# You can print it, or go to the ngrok console on https://dashboard.ngrok.com/status/tunnels
print (ngrok_tunnel.public_url)
小开

对于 Android 通过普通 HTTP 网络进行的移动测试，一个简单的解决方案是在手机上安装 Termux，然后使用 socat从本地端口转发到开发主机:

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

这将在终端运行时在后台运行。然后在 Chrome 中你可以通过普通的 HTTP 连接到 http://127.0.0.1:8000。

在本地网络上运行良好，不需要任何证书、应用程序或服务。


提交答案