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

时间：2015-12-08 16:05:20

标签： javascript google-chrome service-worker progressive-web-apps

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

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

9 个答案:

答案 0 :(得分：85)

通常，您需要通过HTTPS同时提供页面和服务工作者脚本才能使用服务工作者。理由在Prefer Secure Origins For Powerful New Features描述。

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

如果由于某种原因，您需要通过localhost或127.x.y.z以外的主机名访问本地Web服务器，或者需要来测试不支持HTTPS的远程Web服务器，您可以使用手动解决方法。它涉及通过命令行启动Chrome，并使用--user-data-dir和--unsafely-treat-insecure-origin-as-secure标记。

This bug有更多详细信息，包括full example如何启动Chrome。

Firefox offers similar functionality，通过devtools.serviceWorkers.testing.enabled设置。

请注意，此功能仅旨在促进无法以其他方式进行的测试，并且您应始终计划在提供网站的生产版本时使用HTTPS 。不要让真实用户完成启用这些标志的步骤！

答案 1 :(得分：30)

如果您想调试插件移动设备的服务工作者以进行渐进式网络应用的真实行为测试，则ssl chrome启动选项无效，您肯定会这样做不需要购买证书。

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

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

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

完成此操作后，您可以调用网址＆＃34; http://localhost:8080＆＃34;在您的移动设备上，它将由＆＃34; localhost：80＆＃34;在您的实际PC /测试服务器上。与服务工作人员完美配合，就好像是您的移动设备上运行的本地计算机一样。

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

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

答案 2 :(得分：20)

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

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

答案 3 :(得分：3)

正如杰夫在第一篇回复中提到的那样，您不需要在本地主机级别使用https来测试服务工作者。只要您访问localhost域，服务工作人员就会注册并正常工作 - 无需HTTPS。

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

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

答案 4 :(得分：3)

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

  1. 为您的服务器提供主机名。
  2. 为此主机名提供证书。
  3. 让IP信任颁发此证书的CA.

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

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

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

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

      10. 如果您无法添加根证书或控制本地DNS，例如您计划使用其他人拥有的设备（BYOD）或更多锁定的浏览器进行测试，这些浏览器不允许用户添加受信任的根证书，例如在主要视频游戏控制台中，您需要一个完全合格的域名（FQDN）：

      1. 从registrar that offers DNS with an API购买域名。这可以直接在TLD内，也可以是其中一个已进入公共后缀列表的动态DNS提供商。 （由于rate limits imposed by Let's Encrypt，非PSL动态DNS提供商是不可接受的。）
      2. 在此域的区域文件中，将A记录指向开发工作站的专用IP地址。这为您的开发工作站提供了FQDN。
      3. 使用Dehydrated（支持dns-01质询的ACME客户端）从Let的加密证书颁发机构获取此FQDN的证书。
      4. 使用此证书在开发工作站上的Web服务器中配置HTTPS。
      5. 在所有设备上，访问此名称。

答案 5 :(得分：2)

在我的情况下，测试pwa的最简单方法是使用ngrok。 https://ngrok.com/download登录，获取您的令牌并进行设置！

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

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

答案 6 :(得分：0)

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

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

答案 7 :(得分：0)

我使用ngrok将本地IP（实际上不是因为它在Google Colab上）通过隧道传输到公共IP。

转到ngrok console，我可以看到所有创建的隧道。我只为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的服务人员一起工作吗？

A：显然是！

该注册背后的代码是（重要的是知道失败的地方）：

// 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!');
    });
};

更复杂的是，使用Service Workers的Web App正在Colab（Google Colab）内部运行。该Web应用程序正在Colab内部的Node.js上运行。

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

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

那不是因为浏览器可以在localhost上运行，浏览器才适合您的应用。

注意：我在上面的实验。

  • 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网络应用程序：

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：// flags /＃unsafely-treat-insecure-origin-as-secure
  2. 添加要列入白名单的网址。
  3. 重新启动Chrome

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

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

Firefox / Waterfox

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

https://giphy.com/gifs/oA6ZoXqqzdFnxLrZmQ

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

在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)

答案 8 :(得分：0)

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

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

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

在本地网络上运行良好，无需证书、应用或服务。

相关问题
最新问题