我正在将现有的Web应用程序更改为Progressive Web App . 大部分都很好，我现在已经完成了 . 然而，在开发过程中我注意到了一些奇怪
MY PROGRESS:
我创建了Serviceworker来缓存一些文件，一切都很顺利 . 之后，我创建了清单并尝试在我的Android设备上进行调试，以测试here所描述的"Add To Homescreen"功能 . 这也很好 . 我能够触发安装并添加了图标，没有错误 .
THE PROBLEM:
但是，在启动PWA时，没有启动屏幕，它刚刚在Chrome中打开，即使我的清单单独声明 . 名称，background_color和图标如here所述 . 因此，图标本身不得不出现问题 . 我还仔细检查了文件名并确保路径相对于清单，清除了缓存，重新安装了服务工作者等 .
MY RESEARCH:
我发现，在Application / Manifest下的Developers Tools中，在我的笔记本电脑上打开页面时会显示图标 . 一旦我在移动设备上打开页面并检查了页面，就会显示两个条目的损坏文件图标 . 其他一切都与清单相匹配 .
之后，我在Firebase上托管了该应用程序 . 这一次，桌面和移动设备上的一切正常，启动画面，应用程序独立打开 .
所以必须有一些不能与PWA一起工作的东西试图在安装过程中从localhost：5000 / img / app-icon-512.png中捕获图标 . 但是，从移动浏览器访问该文件有效 . 此外，消息中还显示了一个图标，用于安装PWA和主屏幕 . 我认为这可能是较小的一个（192px） .
进一步说明：
-
当然，我确保在安装和打开PWA时手机仍然连接到笔记本电脑 .
-
我试过缓存图标文件 .
-
我改变了图标文件并从Tal Ater的建筑渐进式网络应用书籍教程GitHub中获取了一些内容（我认为他们在第10章的分支中）以确保我所拥有的不仅仅是质量太差
MY QUESTION:
所以，我很好奇，如果其他人遇到问题，知道解决方案，或者只是解释在设备上安装PWA的过程，以及为什么如果它们在带有端口映射的localhost上，它就无法访问图标文件 . 能够在localhost上测试启动画面会很高兴 .
manifest.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"
}
structure
- web
- some files (index etc.) and folders (js/css etc.)
- img
- app-icon-512.png
- app-icon-192.png
- manifest.json
- serviceworker.js
1 回答
我刚注意到它在Firebase上托管了's working on your laptop and when it' . 我在这里看到的问题是无法从手机中读取图像，因为图像存储在笔记本电脑中，而不是手机中 . 我可以建议您在笔记本电脑浏览器上测试Toggle Device Toolbar . 通过使用设备工具栏测试，您可以模拟PWA在不同移动屏幕尺寸上的外观 - 比在单个手机上测试要好得多 .