引言
PWA （Progressive Web App） 是一种类似于原生应用的应用模式，通过利用 Service Worker、Web App Manifest 和其他技术渐进式地增强 Web 应用程序的能力，以便它可以像本地应用程序一样使用。PWA 可以在断网情况下运行，可以像本地应用程序一样访问安装在本地的设备硬件和操作系统功能，并在用户体验、网站性能和可访问性方面提供了显著的改进。
但是，PWA 还远远没有能够完全取代传统的 Web 应用程序。有时，在某些场景下，我们需要让用户可以从 PWA 模式转换回传统的 Web 应用程序模式。本文将介绍如何实现在 PWA 模式和传统的 Web 应用程序模式之间切换，并提供完整的代码示例。
解决方法
方案一
首先，我们可以在 PWA 服务工人的 fetch 事件中添加逻辑来检测当前应用程序的模式（PWA 还是传统的 Web 应用程序模式）。
如果当前是 PWA 模式，则它会返回缓存的内容，否则它将返回请求的内容。
-- -------------------- ---- -------
------------------------------ --------------- -
-- --------- -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
--
--
- ---- -
----------------------------------------
-
---上述代码中的 isPWA() 函数是用来判断当前的应用程序模式的。根据不同的项目情况，具体的实现方式也会有所不同。在本文示例中，我们通过检测当前的 URL 路径来判断当前的模式是 PWA 还是传统的 Web 应用程序模式。如果 URL 中包含 ?mode=pwa，则表示当前是 PWA 模式，并返回 true，否则返回 false。
function isPWA() {
return window.location.search.indexOf('?mode=pwa') !== -1;
}在传统的 Web 应用程序模式下，需要提供切换到 PWA 模式的按钮或者链接。当用户点击或者访问这个链接时，它会跳转到相应的 PWA 模式页面，并且带上参数 ?mode=pwa，以便在下一次访问 PWA 服务工人中检测到当前是 PWA 模式。
<a href="./index.html?mode=pwa">进入 PWA 模式</a>
方案二
方案一的实现方式比较简单，但是可能会有一个问题：当用户在 PWA 模式下刷新页面，会出现无法访问原始的 URL 的情况。
例如，在 PWA 模式下，用户访问了 https://www.example.com/pwa，但是在刷新页面时，由于浏览器自动清除了参数 ?mode=pwa，它会跳转到默认的 https://www.example.com/index.html 页面。
所以，我们需要在 PWA 服务工人的 fetch 事件中添加额外的逻辑来解决这个问题。
-- -------------------- ---- -------
------------------------------ --------------- -
-- -------- -- -------------------- -
------------------
--------------------------------------------------- -
------ -------- -- ---------------------
--
--
- ---- -
----------------------------------------
-
---上述代码中的 isPWAWithOutParam() 函数是用来判断当前的应用程序模式是否是 PWA 模式，但是 URL 中没有参数 ?mode=pwa。如果是，则返回 true，否则返回 false。
function isPWAWithOutParam() {
return (
window.location.pathname.indexOf('/pwa') === 0 && // 需要自定义 PWA 路径
window.location.search.indexOf('?mode=pwa') === -1 &&
!navigator.userAgent.match(/android/i)
);
}在传统的 Web 应用程序模式下，需要提供切换到 PWA 模式的按钮或者链接。当用户点击或者访问这个链接时，它会跳转到相应的 PWA 模式页面，并且带上参数 ?mode=pwa，以便在下一次访问 PWA 服务工人中检测到当前是 PWA 模式。
<a href="./pwa/?mode=pwa">进入 PWA 模式</a>
总结
通过上述的两个方案，我们可以轻松地实现在 PWA 模式和传统的 Web 应用程序模式之间的切换。具体方案的选择需要根据项目的实际需求来确定，例如，如果需要支持 PWA 离线访问，那么方案一可能更加适合。如果需要更好的用户体验，并且能够解决刷新时 URL 中参数丢失的问题，那么方案二可能更加适合。
示例代码
本文的示例代码托管在 GitHub 上，可以通过以下链接进行访问：
参考文献
- Service Workers: an Introduction
- Progressive Web Apps: Escaping Tabs Without Losing Our Soul
- Migration from a Mobile Website to a Progressive Web Application
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647194eb968c7c53b0f730ea