Javascript 通过 HTTP 测试 Service Worker 的选项

Options for testing service workers via HTTP

提问by Aman Satija

I want to test service workers but I have a virtual host setup and I can't seem to be able to enable https on localhost.

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

How can I whitelist my local virtual host url to test service workers whenever I try and register for the service worker on the localhost? Chrome says https is required to enable service worker. How can I get past this restriction at least for local testing.

每当我尝试在本地主机上注册 Service Worker 时，如何将我的本地虚拟主机 url 列入白名单以测试 Service Worker？Chrome 表示需要 https 才能启用 Service Worker。我怎样才能至少在本地测试中克服这个限制。

回答by Jeff Posnick

In general, you need to serve both your page and your service worker script via HTTPS in order to use service workers. The rationale is described at Prefer Secure Origins For Powerful New Features.

通常，您需要通过 HTTPS 为您的页面和 Service Worker 脚本提供服务才能使用 Service Worker。原理在Prefer Secure Origins For强大的新功能中有所描述。

There's an exception to the HTTPS requirement in place to facilitate local development: if you access your page and service worker script via http://localhost[:port], or via http://127.x.y.z[:port], then service workers should be enabled without any further actions.

为了促进本地开发，HTTPS 要求有一个例外：如果您通过http://localhost[:port]或 via访问您的页面和 Service Worker 脚本，http://127.x.y.z[:port]则应启用 Service Worker，而无需任何进一步操作。

In recent versions of Chrome, you can work around this requirement duriing local development via chrome://flags/#unsafely-treat-insecure-origin-as-secure, as explained in this answer.

在最新版本的 Chrome 中，您可以在本地开发期间通过 解决此要求chrome://flags/#unsafely-treat-insecure-origin-as-secure，如本答案中所述。

Firefox offers similar functionality, via the devtools.serviceWorkers.testing.enabledsetting.

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

Please note that this functionality is onlymeant to facilitate testing that wouldn't otherwise be able to take place, and you should always plan on using HTTPS when serving the production version of your site. Don't ask real users to go through the steps of enabling those flags!

请注意，此功能仅用于促进原本无法进行的测试，并且在为网站的生产版本提供服务时，您应该始终计划使用 HTTPS。不要要求真正的用户完成启用这些标志的步骤！

回答by Christopher L?rken

If you want to debug a plugged-in mobile device's service workerfor a real behavior testing of a progressive web app, the ssl chrome start options do not help and you definitely do not need to buy certificates.

如果您想调试插入式移动设备的 Service Worker以进行渐进式 Web 应用程序的真实行为测试，ssl chrome 启动选项无济于事，您绝对不需要购买证书。

@chris-ruppel mentioned installing proxy software, but there is actually an easier way using port forwarding:

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

Assuming you connect and debug your device using Chrome:

假设您使用 Chrome 连接和调试您的设备：

• In the Chrome Dev Tools "Remote devices"open "Settings"and add a "Port forwarding"rule.
• If your localhost setup is running on localhost:80,
• just add a rule "Device port 8080"(can be any unpriviliged port > 1024)
• and local address "localhost:80" (or mytestserver.sometestdomainwithoutssl.company:8181 or whatever)

• 在Chrome 开发工具“远程设备”中打开“设置”并添加“端口转发”规则。
• 如果您的 localhost 设置在 localhost:80 上运行，
• 只需添加规则“设备端口 8080”（可以是任何非特权端口 > 1024）
• 和本地地址“localhost:80”（或 mytestserver.sometestdomainwithoutssl.company:8181 或其他）

After you did that, you can call the URL "http://localhost:8080" on your mobiledeviceand it will be answered by the "localhost:80" on your actual PC/test server. Works perfectly with service workers as if it were your local machine running on your mobile.

完成此操作后，您可以在移动设备上调用 URL“ http://localhost:8080”，它会在您的实际 PC/测试服务器上由“localhost:80”回答。与 Service Worker 完美配合，就好像它是在您的移动设备上运行的本地机器一样。

Works also for multiple port forwardings and different target domains as long as you remember to use unprivileged ports on your mobile device. See screenshot:

只要您记得在移动设备上使用非特权端口，它也适用于多个端口转发和不同的目标域。看截图：

Source of this info is the google remote devices documentation: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server(but as of Apr 2017 it is not very clear to read this simple answer out of it)

此信息的来源是 google 远程设备文档：https: //developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server（但截至 2017 年 4 月，阅读此内容并不是很清楚简单的答案吧）

回答by Chris Ruppel

I often want to debug and test on a real device. One method I've come up with involves routing the phone's network traffic through Charles Proxyduring local development. Unlike all the Chrome-specific solutions, this works with any browser on your phone.

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

1. Run Charles on my laptop (which also serves my website with the Service Worker). Once Charles is running, note the IP/port for Step 2.
2. Configure the mobile device to use my laptop as a proxy.
   • For Android just tap and hold on your WiFi in settings > Modify network> Advanced Settings> Proxy. Use Manualto set the IP/port.
   • For iOS click the (i) icon > HTTP Proxysection. Select Manual, then set the IP/port.
3. Visiting localhoston my mobile device now allows the Service Worker to be registered and tested.

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

回答by Alex

The easiest way to test pwa, in my case, was using ngrok. https://ngrok.com/downloadlog in, get ur token and set it!

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

When you run ./ngrok http {your server port}make sure that you use https which will be shown in the terminal after you run this command above.

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

---

---

You could use https://surge.shtoo, it is for host a static webpage, if you visit here: https://surge.sh/help/securing-your-custom-domain-with-sslwill be able to see how to set up a ssl certificate

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

回答by Miguel Guardo

As Jeff mentioned in the first response, you do not need https at the localhost level to test Service Workers. Service workers will register and work just fine as long as you access the localhost domain -- without HTTPS.

正如 Jeff 在第一个回复中提到的，您不需要 localhost 级别的 https 来测试 Service Workers。只要您访问 localhost 域，Service Worker 就会注册并正常工作——无需 HTTPS。

Once you have your application tested on localhost and you want to see how it works with https for real, the simplest approach would be to upload your app to GitHub. You can create a public domain for free (and with HTTPS!).

一旦您在 localhost 上测试了您的应用程序，并且您想真正了解它是如何与 https 一起工作的，最简单的方法就是将您的应用程序上传到 GitHub。您可以免费创建公共域（并且使用 HTTPS！）。

Here are the instructions: https://pages.github.com/

以下是说明：https: //pages.github.com/

回答by Damian Yerrick

If you want to test service workers on a client device that cannot run a web server on localhost, the general technique is as follows:

如果要在无法在 localhost 上运行 Web 服务器的客户端设备上测试 Service Worker，则一般技术如下：

1. Give your server a hostname.
2. Give this hostname a certificate.
3. Make IPs trust the CA that issued this certificate.

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

But this is easier said than done. In a November 2016 AMA on Reddit, a Let's Encrypt representative acknowledgedthat HTTPS on a private LAN "is a really tough question, and I think no one has come up with a satisfactory answer so far."

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

Common ways to give your computer a hostname involve giving it a stable internal IP address, not one that changes daily or every time you power-cycle your Internet gateway appliance. You'll need to configure the DHCP server on your network, usually that in your gateway, to set up a "reservation" that associates a particular private address (usualy within 10/8or 192.168/16) with the MAC address of your development workstation's Ethernet card. For this, read the manual of your gateway.

为您的计算机提供主机名的常见方法包括为其提供一个稳定的内部 IP 地址，而不是每天或每次您重新启动 Internet 网关设备时更改的地址。您需要在您的网络上配置 DHCP 服务器，通常是在您的网关中，以设置一个“保留”，将特定的私有地址（通常在10/8或内192.168/16）与开发工作站以太网卡的 MAC 地址相关联。为此，请阅读网关手册。

Now that your development workstation has a stable IP address, there's a time/money tradeoff. If you're willing to learn advanced DNS and OpenSSL usage and install a root certificate on all devices with which you plan to test:

既然您的开发工作站拥有稳定的 IP 地址，就需要权衡时间/金钱。如果您愿意学习高级 DNS 和 OpenSSL 用法并在您计划测试的所有设备上安装根证书：

1. Run an internal DNS server on your network. This could be on your gateway or on your development workstation.
2. Configure your DNS server to be authoritative for some made-up TLD and recursive for other TLDs.
3. Give a stable name to your development workstation's private IP address. This gives it an internal name.
4. Configure your DHCP server to give the address of this DNS server to other devices obtaining leases.
5. On your development workstation, use OpenSSL to generate keypairs for a private certificate authorityand the web server.
6. Using OpenSSL, issue a root certificate for the CA and a certificate for the web server's internal name.
7. Configure HTTPS in the web server on your development workstation using this certificate.
8. Install the CA's root certificate as a trusted root certificate on all devices.
9. On all devices, access this internal name.

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

If you cannot add a root certificate or control local DNS, such as if you plan to test with devices owned by others (BYOD) or with more locked-down browsers that do not allow users to add trusted root certificates, such as those in major video game consoles, you'll need a fully-qualified domain name (FQDN):

如果您无法添加根证书或控制本地 DNS，例如您打算使用他人拥有的设备 (BYOD) 或更多锁定的浏览器进行测试，这些浏览器不允许用户添加受信任的根证书，例如主要的浏览器视频游戏机，您需要一个完全限定的域名 (FQDN)：

1. Buy a domain from a registrar that offers DNS with an API. This could be directly within a TLD or from one of the dynamic DNS providers that has made it onto the Public Suffix List. (Non-PSL dynamic DNS providers are unacceptable because of rate limits imposed by Let's Encrypt.)
2. In this domain's zone file, point an Arecord at your development workstation's private IP address. This gives your development workstation a FQDN.
3. Use Dehydrated, an ACME client that supports the dns-01challenge, to obtain a certificate for this FQDN from the Let's Encrypt certificate authority.
4. Configure HTTPS in the web server on your development workstation using this certificate.
5. On all devices, access this name.

1. 从提供带有 API 的 DNS的注册商处购买域。这可以直接在 TLD 内或来自已将其添加到公共后缀列表中的动态 DNS 提供商之一。（由于Let's Encrypt 施加的速率限制，非 PSL 动态 DNS 提供商是不可接受的。）
2. 在此域的区域文件中，将一条A记录指向您的开发工作站的私有 IP 地址。这为您的开发工作站提供了 FQDN。
3. 使用脱水，支持的客户端ACMEdns-01挑战，以获取此FQDN从咱们的加密证书颁发机构的证书。
4. 使用此证书在开发工作站上的 Web 服务器中配置 HTTPS。
5. 在所有设备上，访问此名称。

回答by Sushil

I think the easiest way to test service worker is to find a free hosting provider. nowadays, there many sites that provide free hosting. you can easily host your app on this free servers.

我认为测试 Service Worker 的最简单方法是找到免费的托管服务提供商。如今，有许多网站提供免费托管。您可以轻松地在此免费服务器上托管您的应用程序。

I mostly use herokuand netlify. this are free and easy to use.

我主要使用heroku和netlify。这是免费且易于使用的。