125

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

每当我尝试在本地主机上注册服务工作人员时，如何将我的本地虚拟主机 url 列入白名单以测试服务工作人员？Chrome 说启用 service worker 需要 https。至少对于本地测试，我怎样才能克服这个限制。

4

9 回答 9

179

通常，您需要通过 HTTPS 为您的页面和服务工作人员脚本提供服务，以便使用服务工作人员。基本原理在Prefer Secure Origins For Powerful New Features中描述。

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

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

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

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

于 2015-12-08T16:44:53.270 回答
54

如果您想调试插入式移动设备的服务人员以对渐进式 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”会回答它。与服务人员完美配合，就好像它是在您的手机上运行的本地机器一样。

只要您记得在移动设备上使用非特权端口，也适用于多个端口转发和不同的目标域。看截图： 查看一些配置端口的屏幕​​截图，这些端口将在移动设备上调用时调用 PC

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

于 2017-04-15T13:36:42.950 回答
24

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

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

就我而言，测试 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 证书

于 2018-08-18T22:12:49.047 回答
5

我使用 ngrok 将本地 IP（实际上并非如此，因为它在 Google Colab 上）连接到公共 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

问：你可以与需要通过隧道到远程机器的 HTTPs 的服务工作者一起工作吗？

答：显然是的！

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

// 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 Worker 的 Web 应用程序在 Colab ( Google Colab ) 中运行。Web 应用程序在 Colab 内的 Node.js 上运行。

如果您从 localhost 工作，这对您来说应该更容易，因为在连接到 localhost 时不会强制执行 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 网络应用程序，我得到了：

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，那么您可能需要在浏览器上更改这些设置。

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

铬合金：

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

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

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

火狐/水狐

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

https://giphy.com/gifs/oA6ZoXqqzdFnxLrZmQ

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

在关于：配置

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)
于 2020-10-17T16:25:32.737 回答
4

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

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

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

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

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

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

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

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

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

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

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

于 2016-07-12T16:22:08.917 回答
1

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

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

于 2019-05-19T10:45:22.073 回答
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.

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

于 2021-01-31T02:43:12.163 回答