vue.js 如何在manifest.json文件中为PWA使用相对路径?

1u4esq0p  于 2023-10-23  发布在  Vue.js
关注(0)|答案(1)|浏览(161)

我已经建立了一个使用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"
        }
    ]
}

这在本地开发时工作正常,但在构建应用程序并部署时,iconstart_urlsrc似乎都无效。
我想到的唯一解决方案是将特定的URL放在start_urlsrc中。然而,这不是一个很好的解决方案,因为我有几个环境,我必须指定3个不同的url,并创建3个不同的manifest.json,每个环境一个。
这也没有意义,因为在我看到的关于Web应用程序清单的每个文档中,他们都将start_url指定为"/",而不是硬编码的。
希望任何人都可以帮助我找出一个解决方案,没有3个不同的清单文件,和硬编码的网址。
非常感谢.

b4lqfgs4

b4lqfgs41#

你的清单中有两个问题:

  • 一个icons属性,包括一个192x192 px和一个512x512 px图标。
  • prefer_related_applications属性设置为true以外的值。

您可以尝试使用DevTools中的Chrome Lighthouse来检查您的pwa manifest.json
有关详细信息,请参阅lighthouse-guidemdn-guide

相关问题