使用mkcert证书进行PWA的本地测试

时间:2020-01-14 16:08:41

标签: android ssl ssl-certificate progressive-web-apps

我正在尝试为正在处理的PWA设置本地开发环境。 我已经在Mac上安装了mkcert,并且能够在计算机上托管https://localhost版本。 现在,我想在Android手机上打开页面。在mkcert github上说:

移动设备

要使证书在移动设备上受信任, 您将必须安装根CA。这是目录中的rootCA.pem文件 mkcert -CAROOT打印的文件夹。

在iOS上,您可以使用AirDrop,通过电子邮件将CA发送给自己,也可以提供 它来自HTTP服务器。安装后,您必须启用完全 相信它。注意:如果早期版本的mkcert遇到iOS错误, 您可能无法在“证书信任设置”中看到根 更新mkcert并重新生成根。

对于Android,您将必须安装CA,然后启用用户 植根于您应用的开发版本。看到这个StackOverflow 答案。

https://github.com/FiloSottile/mkcert

我在手机上安装了rootCA.pem。关于“启用用户根”的部分不适用,因为这不是应用程序。

但是,当我使用https://[my-local-network-ip]:1234打开手机上的页面时,收到警告,表明证书不可信任。

我如何信任证书,以便可以在手机上本地测试PWA?

2 个答案:

答案 0 :(得分:2)

我知道您可能已经离开了这个问题,因为已经快一年了。但是,我想分享我如何能够在安全的环境中本地测试我的 PWA。

不对您使用的框架/打包/构建系统做任何假设:

  1. 使用 mkcert 生成证书和密钥。如果您在本地托管 PWA 并希望通过您的本地 IP 地址(即 192.168.1.x:3000)访问它,您还需要告诉 mkcert 生成涵盖该 IP 地址的证书:
mkcert localhost 192.168.1.17

// The certificate is at "./localhost+1.pem" and the key at "./localhost+1-key.pem" ✅

重要提示:大多数路由器动态分配本地 IP 地址,因此分配静态 IP 是值得的。

  1. mkcert 将您的 RootCA 安装到您的 iOS 或 Android 设备上。按照 mkcert docs

    中的说明进行操作
  2. 使用您选择的 Web 服务器提供生成的证书。我使用 Create React App。你可以看到我对PWAs in secure context here

    的回答

答案 1 :(得分:0)

我同意您的目标-运行基于TLS的本地设置对于提高生产率和早期故障排除很有用。

您的问题是基于DNS的,您需要通过主机名访问TLS安全的URL。

让DNS在Android端进行匹配的唯一方法是在运行模拟器或通过USB连接的设备时使用HTTP代理。

简而言之,我会这样做:

  • 将您的证书分配给更真实的域名,例如mycompany.com
  • 将此域名添加到Mac图书上的DNS
  • 在Mac上安装免费代理,例如proxyman
  • 配置Android仿真器或设备以使用代理(您还需要在Android和Mac上信任代理的证书)
  • 然后从Android浏览到https://my company.com

my write up中有完整的详细信息

相关问题