当从具有端口号的本地 IP 地址提供渐进式 Web 应用程序时,我应该在清单.json 文件中为范围属性指定什么值?

Fra*_*ank 5 scope localserver progressive-web-apps manifest.json web-app-manifest

我的本地 Node JS 测试服务器上的 Web 应用程序清单范围存在问题。我无法获得正确的范围,因为 IP 地址上的端口号妨碍了。我正在使用以下地址访问我的服务器:

https://192.168.0.101:2468/
Run Code Online (Sandbox Code Playgroud)

当我使用 Chrome 开发工具查看我的清单时,在“应用程序”选项卡下,它显示清单文件的 url 为::2468/manifest.json:2468不是我的根文件夹中的目录。

我将所有文件保存在根目录中,包括server.jsmanifest.json和索引,称为my-app.html

_ website-directory
|_ server.js
|_ manifest.json
|_ my-app.html
Run Code Online (Sandbox Code Playgroud)

在我的清单文件中,我有:

{

  "scope": "./",
  "start_url": "my-app.html"

}
Run Code Online (Sandbox Code Playgroud)

当我将代码上传到我的 Github Pages 站点时,一切正常:工作示例。我认为问题出在:2468我的 IP 地址后面。对于完全限定的域名,我不会遇到这个问题,就像我在 Github Pages 上遇到的那样。

如果我尝试将端口号放入清单的范围中,如下所示:

  "scope": "./:2468/",
  "start_url": "my-app.html"
Run Code Online (Sandbox Code Playgroud)

它破坏了我的清单的范围,我收到此警告:Manifest: property 'scope' ignored. Start url should be within scope of scope URL.这非常有道理,因为:2468它不是我的目录中的文件夹。这只是 Chrome 决定附加到我的清单文件的 URL 上的东西。

如何解析清单文件的范围以忽略端口号?为什么 Chrome 开发工具显示我的清单位于:2468不存在的目录中?

这是一个问题的原因是因为我的网络应用程序无法在应用程序模式下打开,并带有全屏窗口和启动屏幕。它仅在带有网址栏的浏览器中打开,并且似乎根本不使用应用程序清单。

更新:2017 年 11 月 5 日

通过使用 URL,https://192.168.0.101:2468/my-app.html我可以访问我的 Web 应用程序,而无需:2468/在清单 URL 中显示开发工具。我的应用程序确实安装到主屏幕和应用程序抽屉中,但它仅在浏览器中打开,而不是带有启动屏幕的全屏应用程序。我没有收到有关清单范围的警告,并且我的服务工作人员注册并完美运行。我开始认为渐进式网络应用程序不能从 IP 地址安装,而只能从完全限定的域名安装。这可能是问题所在吗?

Nat*_*ley 0

您是对的,渐进式 Web 应用程序必须安装在稍微正确的 URL 上,因为它们需要该范围才能正常运行。如果不强制执行范围,恶意 Service Worker 可能会访问不应访问的站点。