我已经建立了一个使用Vite + Vue的Web应用程序,我希望它可以作为一个移动的应用程序安装。通过添加一个manifest.json文件,使用适当的配置,我的Web应用程序应该被视为一个渐进式Web应用程序,可以安装在各种设备上。在this guide之后,我用这种方式创建了一个基本的manifest.json
。
{
"name": "My app",
"short_name": "My app",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/img/pwa_logo.png",
"sizes": "512x512"
}
]
}
这在本地开发时工作正常,但在构建应用程序并部署时,icon
的start_url
和src
似乎都无效。
我想到的唯一解决方案是将特定的URL放在start_url
和src
中。然而,这不是一个很好的解决方案,因为我有几个环境,我必须指定3个不同的url,并创建3个不同的manifest.json
,每个环境一个。
这也没有意义,因为在我看到的关于Web应用程序清单的每个文档中,他们都将start_url
指定为"/"
,而不是硬编码的。
希望任何人都可以帮助我找出一个解决方案,没有3个不同的清单文件,和硬编码的网址。
非常感谢.
1条答案
按热度按时间b4lqfgs41#
你的清单中有两个问题:
您可以尝试使用DevTools中的Chrome Lighthouse来检查您的pwa
manifest.json
。有关详细信息,请参阅lighthouse-guide和mdn-guide