无法在Android手机上调试service-worker

问题描述

我有一个带有服务工作者的Web应用程序，该应用程序是通过我的桌面提供的，我想在Android手机(Pixel3)上进行调试.
在桌面上，我安装了一个自信任的CA来满足安全连接(https)的要求，并且该页面显示了安全的挂锁-很好！.

I have a web app with service worker that is served from my Desktop, and I want to debug on an Android phone (Pixel3).
On the desktop I installed a self-trusted CA to satisfy the secured connection (https), and the page shows up with the secured padlock - good!.

但是在电话上，我无法显示安全的挂锁.
(我可以通过以下方式调试Web应用程序:通过USB电缆连接手机，为 chrome://inspect/#devices 中的Pixel 3 XL设备的所需选项卡选择 inspect .code>，并在手机上的Chrome上与该页面进行交互，并在桌面上查看更改，但无法获取安全的挂锁.

But on the phone, I cannot get the secured padlock to show up.
(I can debug the web app by connecting the phone via USB cable, selecting inspect for the required tab, for the Pixel 3 XL device, in chrome://inspect/#devices, and interact with the page on Chrome on the phone and see the changes on the Desktop, but cannot get the secured padlock).

为了满足安全连接的要求，我尝试执行以下操作:

To satisfy the secured connection, I tried to do the following things:

• 按照在设备上进行调试的说明进行操作

按照说明此处和这里
我安装了自信任CA myCA.pem(这是通过 Security->安装证书-> myCA.pem来签署在桌面上使用的网站证书的自信任CA.code>，并验证它是否已安装在受信任的凭证->用户-> myCA )

在chrome devtools中设置端口转发，并使用此处和.


set up port forwarding in chrome devtools, and access the web site via localhost using instructions from here and here.


在chrome devtools上，我通过 chrome://inspect/#devices->设置端口转发.端口转发->8086本地主机:443

1. 在电话上，我通过网络和Internet设置了代理->Wi-Fi->当前网络->代理->手册->代理主机名:localhost，代理端口:8086
   
2. 通过电话打开页面 localhost:8086 ， https:\\ localhost:8086 (该页面显示不安全的挂锁警告)
   该页面显示不安全的挂锁警告
   
3. (在桌面上 https://localhost 显示了安全的挂锁)
   

1. on chrome devtools I set port forwarding via chrome://inspect/#devices -> port forwarding -> 8086 localhost:443

2. on the phone I set proxy via Network and Internet -> Wi-Fi -> current network -> Proxy -> Manual -> Proxy hostname: localhost, Proxy port: 8086

3. on the phone I open the page localhost:8086, https:\\localhost:8086 (the page shows up with insecure padlock warning)
the page shows up with insecure padlock warning

4. (on the desktop https://localhost shows the secure padlock)


在chrome devtools中设置端口转发，在设备上配置代理设置，映射到自定义本地域，然后按照< mydomain 自定义域访问网站，a href ="https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server" rel ="nofollow noreferrer">此处

set up port forwarding in chrome devtools, configure proxy settings on your device, map to custom local domains, and access the web site via custom domain: mydomain, following the instructions in here

在chrome devtools上，我通过 chrome://inspect/#devices->设置端口转发.端口转发->8086 mydomain:443

1. 在电话上，我通过网络和Internet设置了代理->Wi-Fi->当前网络->代理->手册->代理主机名:localhost，代理端口:8086
   
2. 通过电话打开页面 localhost:8086 ， https:\\ localhost:8086
   该页面显示了不安全的挂锁警告
   
3. (在桌面上 https://mydomain 显示了安全的挂锁)
   

1. on chrome devtools I set port forwarding via chrome://inspect/#devices -> port forwarding -> 8086 mydomain:443

2. on the phone I set proxy via Network and Internet -> Wi-Fi -> current network -> Proxy -> Manual -> Proxy hostname: localhost, Proxy port: 8086

3. on the phone I open the page localhost:8086, https:\\localhost:8086
the page shows up with insecure padlock warning

4. (on the desktop https://mydomain shows the secure padlock)


通过设置:

loosen the requirements for secured connection on the phone by setting:


1. chrome://flags/#allow-insecure-localhost 启用 Enabled
   

chrome://flags/#不安全的来源被视为安全的 ，可以通过以下方式启用:
http://192.168.1.74，http://mydomain，http://localhost
(标记为 #insecure的起源被视为安全的甚至在台式机上运行时也无济于事，并且出现类似以下错误: DOMException:无法使用脚本('https://192.168.1.74/sw.js')为范围('https://192.168.1.74/')注册ServiceWorker:在获取证书时发生SSL证书错误脚本.

chrome://flags/#insecure origins treated as secure to Enabled with:
http://192.168.1.74, http://mydomain, http://localhost
(the flag #insecure origins treated as secure doesn't even help when running on the Desktop, and I'm getting an error like:DOMException: Failed to register a ServiceWorker for scope ('https://192.168.1.74/') with script ('https://192.168.1.74/sw.js'): An SSL certificate error occurred when fetching the script.

这些帮助均无效.在手机的Chrome浏览器标签中，我不断看到三角形图标表示连接不安全.

桌面: Ubuntu 18.04，Chrome版本83.0.4103.61
Pixel 3 XL: Chrome:83.0.4103.106，Android版本10

Desktop: Ubuntu 18.04, Chrome Version 83.0.4103.61
Pixel 3 XL: Chrome: 83.0.4103.106, Android version 10

谢谢
艾夫纳(Avner)

Thanks
Avner

推荐答案

我能够通过组合使用以下组合在Android手机上通过Service Worker远程调试Web应用:

I was able to remote debug the web app with the service worker, on the Android phone, by using, a combination of:

• Web服务器配置设置:
  • 禁用https
  • 启用具有非标准端口的http服务
  • 禁用http重定向到https

  有关详情，请参见此处

  这篇关于无法在Android手机上调试service-worker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！