4

目标

在本地网络上使用 Vuetify (VueJS) 提供 PWA（渐进式 Web 应用程序）构建，而不显示或禁用unsafe network警告

设置

  • PWA 已构建 ( dist) 并准备好部署
  • 该设备正在为平板电脑所连接的共享 Wi-Fi 网络（10.42.0.1 无互联网）提供服务

采取的步骤：

  • http-server dist在端口上的设备上提供 PWA8080
  • 在平板电脑上打开 chrome 并转到10.42.0.1:8080

结果

  • 该应用程序可以工作，但我收到一条警告消息Your connection to this site is not secure，这是有道理的，因为连接是 HTTP

期望的结果

该应用程序在没有警告消息的情况下工作unsecured connection

为什么？

当 PWA 添加到主屏幕并作为 PWA 启动时，此警告会变成一个完整的块，跨越整个屏幕，占用 App 的屏幕空间。

我试过的

  1. 禁用chrome中的警告
    • 去chrome://flags
    • 禁用Mark non-secure origins as non-secure
    • 结果：它仍然在 chrome 和 PWA 中显示警告
  2. 使用将本地证书添加到本地服务器mkcert
    • mkcert -install
    • mkcert localhost 10.42.0.1
    • http-server -S -C localhost.pem -K localhost-key.pem dist
    • 访问服务器上的 PWA 并观察安全连接
    • 结果：从连接到服务器的平板电脑访问 PWA 仍然有unsecured connection警告
4

0 回答 0