在角度 PWA 中定义开始屏幕的正确方法是什么？答案

【问题标题】：What's the correct way to define the start-screen in an angular PWA?在角度 PWA 中定义开始屏幕的正确方法是什么？
【发布时间】：2020-10-05 23:14:35
【问题描述】：

我的应用程序可用作 PWA。但是，如果用户下载它，那么他们的默认屏幕与网站首页的 Web 默认屏幕完全相同。

但是，由于它现在有效地“安装”在用户的手机上，我希望网站的首页改为登录屏幕，并完全跳过网站首页。

这样做的正确方法是什么？我认为我应该在应用程序本身中使用逻辑，但是有没有办法在 PWA 配置中定义一个“startup_url”来定义应用程序的打开位置？我在一般 PWA 文档中看到了 startup_url，但找不到任何特定于 Angular 的内容。

【问题讨论】：

标签： angular progressive-web-apps

【解决方案1】：

您可以使用 start_url

start_url： 用户启动应用程序时加载的 URL。它可以与主页不同，例如，如果您希望 PWA 用户直接转到登录页面或注册页面而不是主页。出于分析目的，可以精心设计 start_url 以指示应用程序是从浏览器外部启动的，可以将其转换为 PWA。即："start_url": "/?launcher=homescreen"

您还可以添加一个 queryString 参数来使用您的服务器分析来跟踪主屏幕活动。即："start_url": "/?utm_source=homescreen"。

将其放入 website.webmanifest 文件中：

{
    "name": "My app",
    "short_name": "My app",
    "theme_color": "white",
    "background_color": "white",
    "display": "standalone",
    "scope": "./",

    "start_url": "/app",

    "icons": [
        {
            "src": "/assets/icons/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/icons/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

最后，您可以通过index.html 页面上的元标记指示浏览器在哪里找到网络清单

<!-- index.html -->
<link rel="manifest" href="manifest.webmanifest">

【讨论】：

谢谢 Mehdyoo。我添加了一些内容以澄清start_url 的确切位置