如何在localhost上开发时使渐进式Web应用的启动屏幕图标可用

Question

我正在将现有Web应用程序更改为渐进式Web应用程序。大部分都进行得很顺利，我现在做完了。然而，在开发过程中，我注意到一些奇怪的事情。

我的进步：

我创建了Serviceworker来缓存一些文件，一切正常。之后，我创建了清单，并尝试在Android设备上进行调试，以测试“添加到主屏幕”功能，如下所述。这也基本上很好。我能够触发安装并添加图标，没有错误。

问题是：

然而，当启动PWA时，没有启动屏幕，它只是在Chrome中打开的，尽管我的清单声明为独立。名称、背景颜色和图标如此处所述。所以图标本身肯定有问题。我还仔细检查了文件名，确保路径是相对于清单的，清除了缓存，重新安装了服务工作者等等。

我的研究：

我发现，在Application/Manifest下的开发者工具中，图标是在我的笔记本电脑上打开页面时显示的。当我在我的移动设备上打开页面并查看页面时，两个条目都只显示了断文件图标。其他一切都与清单相符。

之后，我在Firebase上托管了该应用程序。这一次，在桌面和手机上一切正常，启动屏幕出现，应用程序以独立方式打开。

因此，PWA试图从localhost:5000/img/app-icon-512捕获图标时，肯定存在一些不起作用的地方。安装过程中的png。但是，从移动浏览器访问该文件是可行的。此外，在安装PWA的消息和主屏幕上显示了一个图标。我想这可能是较小的一个（192px）。

进一步说明：

• 当然，在安装和打开PWA时，我确保手机仍然连接到笔记本电脑。
• 我尝试缓存图标文件。
• 我改变了图标文件，并从Tal Ater GitHub的构建渐进式Web应用程序书的教程中获取了一些（我想它们在第10章的分支中），以确保我拥有的图标文件质量不会太差

我的问题：

因此，我很好奇是否有其他人遇到了问题，是否知道解决方案，或者是否可以简单地解释在设备上安装PWA的过程，以及如果图标文件位于具有端口映射的localhost上，为什么它无法访问这些图标文件。如果能够在本地主机上简单地测试启动屏幕就好了。

显示json:

{
  "short_name": "MyApp",
  "name": "Still MyApp",
  "description": "Lorem ipsum dolor",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "img/app-icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "img/app-icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "theme_color": "#0069b2",
  "background_color": "#0069b2"
}

结构

- web
  - some files (index etc.) and folders (js/css etc.)
  - img
    - app-icon-512.png
    - app-icon-192.png
  - manifest.json
  - serviceworker.js

Answer 1

我刚刚注意到它在你的笔记本电脑上工作，当它在Firebase上托管时。我在这里看到的问题是，图像无法从手机中读取，因为图像存储在笔记本电脑中，而不是手机中。我建议您改为在笔记本电脑浏览器和切换设备工具栏上进行测试。通过使用设备工具栏测试，您可以模拟您的PWA在不同大小的手机屏幕上的外观，这比在单一手机上测试要好得多。