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

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

如何将本地虚拟主机url列入白名单以测试服务人员

---

每当我尝试在本地主机上注册服务工作者时？Chrome表示，启用服务工作者需要https。至少对于本地测试，我如何才能通过此限制。

通常，为了使用服务工作者，您需要通过HTTPS提供页面和服务工作者脚本。有关基本原理，请参阅

为了方便本地开发，HTTPS要求有一个例外：如果您通过

http://localhost[：端口]

，或通过

http://127.x.y.z[：port]

，则应启用服务工作人员，而无需执行任何进一步的操作

在Chrome的最新版本中，您可以通过

chrome://flags/#unsafely-将不安全的源视为安全的

Firefox，通过

devtools.serviceworks.testing.enabled

设置

---

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

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

在我的笔记本电脑上运行Charles（它也为我的网站提供服务）。Charles运行后，请注意步骤2的IP/端口

将移动设备配置为将我的笔记本电脑用作代理。

• 对于Android，只需点击并按住设置中的WiFi即可修改网络高级设置代理。使用手动设置IP/端口
• 对于iOS，单击（i）图标>HTTP代理部分。选择手动，然后设置IP/端口

在我的移动设备上访问

localhost

，现在可以注册和测试服务人员

---

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

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

---

以下是说明：

如果要在无法在本地主机上运行web服务器的客户端设备上测试service Worker，一般技术如下所示：

给你的服务器一个主机名

给这个主机名一个证书

使IPs信任颁发此证书的CA

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

为计算机提供主机名的常用方法包括为其提供一个稳定的内部IP地址，而不是每天或每次关闭Internet网关设备时都会更改的IP地址。您需要配置网络上的DHCP服务器，通常是网关中的DHCP服务器，以设置一个“保留”，将特定的专用地址（通常在

10/8

或

192.168/16

内）与开发工作站以太网卡的MAC地址相关联。为此，请阅读网关手册

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

在网络上运行内部DNS服务器。这可能在网关或开发工作站上

将DNS服务器配置为对某些组成的TLD具有权威性，对其他TLD具有递归性

为开发工作站的专用IP地址提供一个稳定的名称。这给了它一个内部名称

配置您的DHCP服务器，以便将此DNS服务器的地址提供给获取租约的其他设备

在开发工作站上，使用OpenSSL为a和web服务器生成密钥对

使用OpenSSL，为CA颁发根证书，并为web服务器的内部名称颁发证书

使用此证书在开发工作站的web服务器中配置HTTPS

在所有设备上安装CA的根证书作为受信任的根证书

在所有设备上，访问此内部名称

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

从一个网站购买一个域名。这可以直接位于TLD内，也可以来自已将其列入公共后缀列表的动态DNS提供商之一。（由于以下原因，非PSL动态DNS提供程序是不可接受的。）

在此域的区域文件中，将

A

记录指向开发工作站的专用IP地址。这将为您的开发工作站提供FQDN

使用支持dns-01挑战的ACME客户端，从Let's Encrypt certificate authority获取此FQDN的证书

在开发工作上的web服务器中配置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!');
    });
};

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)

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.

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

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

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