我想测试服务工作者，但我有一个虚拟主机设置，我似乎无法在本地主机上启用 https。
每当我尝试在本地主机上注册 Service Worker 时，如何将我的本地虚拟主机 url 列入白名单以测试 Service Worker？Chrome 表示需要 https 才能启用 Service Worker。我怎样才能至少在本地测试中克服这个限制。
通过 HTTP 测试 Service Worker 的选项
IT技术
javascript
google-chrome
service-worker
progressive-web-apps
2021-01-30 12:18:04
6个回答
通常，您需要通过 HTTPS 为您的页面和 Service Worker 脚本提供服务才能使用 Service Worker。原理在Prefer Secure Origins For强大的新功能中有所描述。
为了促进本地开发，HTTPS 要求有一个例外：如果您通过http://localhost[:port]或 via访问您的页面和 Service Worker 脚本，http://127.x.y.z[:port]则应启用 Service Worker，而无需任何进一步操作。
在最新版本的 Chrome 中，您可以在本地开发期间通过 解决此要求chrome://flags/#unsafely-treat-insecure-origin-as-secure，如本答案中所述。
Firefox通过设置提供了类似的功能devtools.serviceWorkers.testing.enabled。
请注意，此功能仅用于促进原本无法进行的测试，并且在为网站的生产版本提供服务时，您应该始终计划使用 HTTPS。不要要求真正的用户完成启用这些标志的步骤！
如果您想调试插入式移动设备的 Service Worker以进行渐进式 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”应答。与 Service Worker 完美配合，就好像它是在您的移动设备上运行的本地机器一样。
只要您记得在移动设备上使用非特权端口，它也适用于多个端口转发和不同的目标域。看截图：
此信息的来源是 google 远程设备文档：https : //developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server （但截至 2017 年 4 月，阅读此内容还不是很清楚简单回答一下）
我经常想在真实设备上调试和测试。我提出的一种方法是在本地开发期间通过Charles Proxy路由电话的网络流量。与所有 Chrome 特定的解决方案不同，这适用于手机上的任何浏览器。
- 在我的笔记本电脑上运行 Charles（它还通过 Service Worker 为我的网站提供服务）。一旦 Charles 运行，请记下步骤 2 的 IP/端口。
- 将移动设备配置为使用我的笔记本电脑作为代理。
- 对于 Android，只需在设置 >修改网络>高级设置>代理中点击并按住您的 WiFi 。使用手动设置 IP/端口。
- 对于 iOS，单击 (i) 图标 > HTTP 代理部分。选择Manual，然后设置 IP/端口。
localhost现在在我的移动设备上访问可以注册和测试 Service Worker。
就我而言，测试 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 证书
如果要在无法在 localhost 上运行 Web 服务器的客户端设备上测试 Service Worker，一般技术如下：
- 给你的服务器一个主机名。
- 给这个主机名一个证书。
- 使 IP 信任颁发此证书的 CA。
但这说起来容易做起来难。在 Reddit 上的 2016 年 11 月 AMA 中，Let's Encrypt 的一位代表承认，私有 LAN 上的 HTTPS“是一个非常棘手的问题，我认为到目前为止还没有人提出令人满意的答案。”
为您的计算机指定主机名的常见方法包括为其提供一个稳定的内部 IP 地址，而不是每天或每次您重新启动 Internet 网关设备时更改的地址。您需要在您的网络上配置 DHCP 服务器，通常是在您的网关中，以设置一个“保留”，将特定的私有地址（通常在10/8或内192.168/16）与开发工作站以太网卡的 MAC 地址相关联。为此，请阅读网关手册。
既然您的开发工作站拥有稳定的 IP 地址，就需要权衡时间/金钱。如果您愿意学习高级 DNS 和 OpenSSL 用法并在您计划测试的所有设备上安装根证书：
- 在您的网络上运行内部 DNS 服务器。这可能在您的网关或您的开发工作站上。
- 将您的 DNS 服务器配置为对某些虚构的 TLD 具有权威性，对其他 TLD 进行递归。
- 为您的开发工作站的私有 IP 地址指定一个稳定的名称。这给了它一个内部名称。
- 配置您的 DHCP 服务器以将此 DNS 服务器的地址提供给其他获得租用的设备。
- 在您的开发工作站上，使用 OpenSSL 为私有证书颁发机构和 Web 服务器生成密钥对。
- 使用 OpenSSL，为 CA 颁发根证书并为 Web 服务器的内部名称颁发证书。
- 使用此证书在开发工作站上的 Web 服务器中配置 HTTPS。
- 在所有设备上安装 CA 的根证书作为受信任的根证书。
- 在所有设备上，访问此内部名称。
如果您无法添加根证书或控制本地 DNS，例如您打算使用他人拥有的设备 (BYOD) 或更多锁定的浏览器进行测试，这些浏览器不允许用户添加受信任的根证书，例如主要的视频游戏机，您需要一个完全限定的域名 (FQDN)：
- 从提供带有 API 的 DNS的注册商处购买域。这可以直接位于 TLD 中，也可以来自已将其添加到公共后缀列表中的动态 DNS 提供商之一。（由于Let's Encrypt 施加的速率限制，非 PSL 动态 DNS 提供商是不可接受的。）
- 在该域的区域文件中，将一条
A记录指向您的开发工作站的私有 IP 地址。这为您的开发工作站提供了 FQDN。 - 使用脱水，支持的客户端ACME
dns-01挑战，以获取此FQDN从咱们的加密证书颁发机构的证书。 - 使用此证书在开发工作站上的 Web 服务器中配置 HTTPS。
- 在所有设备上，访问此名称。