离线时如何使 PWA 登陆页面与站点登陆页面不同？答案

【问题标题】：How to make a PWA landing page different from the site landing page when offline?离线时如何使 PWA 登陆页面与站点登陆页面不同？
【发布时间】：2020-07-20 13:14:52
【问题描述】：

过去，我的应用程序通过向所有人显示登录页面来工作。有一个登录按钮，如果您单击它，它会显示一个凭据对话框，当您成功输入它们时，您将登录并重定向到您的登录类型的主页。

在 PWA 的情况下，一旦我知道用户是谁，我想在主页上放置一个“将此作为应用程序安装”按钮，然后因为我知道用户是谁，所以没有必要显示一般登录页面并要求登录。我只想记住用户并直接转到他们的主页。

我可以在本地存储中缓存登录信息，但我只想在离线时执行此操作，我认为 PWA 仍会显示默认登录页面，并且充其量会立即重定向到主页，这看起来不好。

有没有办法按照我想要的方式进行设置？

【问题讨论】：

标签： html browser progressive-web-apps service-worker

【解决方案1】：

为了安装 PWA，您创建了一个清单文件和一个 Service Worker。当应用程序成功安装（添加到主屏幕）后，服务工作者开始行动。 Service Worker 将为您在线或离线声明的所有文件提供服务。这意味着它将提供清单文件。

在清单文件中，您可以添加将成为一个定义路由的起始 url，在这种情况下，直接转到您的应用程序而不是登录页面。在您的清单文件中添加：

"start_url": "../joshuaFrankApp" 或者 "start_url": "../joshuaFrankApp.html"

无论何时安装应用程序（无论用户是在线还是离线），它都会被重定向到您想要的页面。

额外信息： https://developer.mozilla.org/en-US/docs/Web/Manifest/start_url

【讨论】：