什么是 PWA？
PWA 即是 Progressive Web App，它是一种结合了 Web 技术和 Native App 的优势，拥有类似 Native App 的用户体验的 Web 应用。它可以离线使用、在手机桌面添加图标、推送消息等，同时支持在各种桌面和移动设备上使用。
问题描述
在 PWA 中，打开链接会覆盖当前页面，并且当用户尝试使用浏览器的后退功能时，会发现返回到的是初始页面，而不是上一个页面。这是因为使用 PWA 时，在打开链接时没有经过真正的跳转，而是采用了异步加载的方式。这种异步加载消除了许多加载时间延迟的问题，但它也损失了默认浏览器后退按钮的功能，从而使得用户会感到困惑和不便。
解决方法
使用 History API
为了解决上述问题，我们需要使用浏览器的 History API，它提供了一种修改 URL 和对历史记录进行操作的方法。我们可以使用 pushState() 、replaceState() 和 popState() 等方法，从而修改浏览器的历史记录和 URL，从而使我们能够错误地拦截后退按钮，并恢复默认的浏览器行为。
-- -------------------- ---- ------- -- ---------- -------- ------------------ ------ ---- - ------------------------ ------ ----- - -- ------------- ----------------------------------- -------- --- - -- --------- ----- ----- - -------- -- ------- - -- --------- ------------------- - ---展开代码
代码详解
上面的代码中，我们通过自定义函数 changeRoute() 来修改浏览器的历史记录。该函数有三个参数，分别是 route 、 title 和 url 。其中 route 表示当前路由的状态，它通常是一个对象，里面包含了路由的一些信息，比如路由名称、参数等。参数 title 和 url 分别表示要改变的页面的标题和 URL 。
在 changeRoute() 方法中，我们使用了 history.pushState() 来在浏览器的历史记录中添加新的记录。该方法会将 route 对象压入历史记录栈中，并更新浏览器的 URL 和标题。
在 popstate 事件中，我们使用 e.state 来获取当前的路由状态 route 。我们首先判断 route 是否存在，并在存在的情况下加载对应路由的内容。
-- -------------------- ---- ------- -- --------- -------- ------------------ - -- -- ----- --- ------ ---------------- - ------- ------ -------- - --------------- ------------ -- -- ----------- -- ----------- --------------- -- - -- --------- ----------------------- --- -展开代码
在 loadContent() 方法中，我们使用 Fetch API 发送到服务器，获取对应路由的内容。获得内容后，我们通过调用一个自定义的 renderContent() 方法来渲染路由内容。
改进体验
使用上述方法，我们可以解决异步加载 PWA 中打开链接阻止后退操作的问题。但是，默认情况下会出现一个闪烁现象，使用户体验变差。在此，我们可以使用 Service Worker 来拦截所有的网络请求，并在缓存中添加所有页面和资源。
// Service Worker self.addEventListener("fetch", function (e) { e.respondWith( fetch(e.request).catch(function () { return caches.match(e.request); }) ); });
使用上述代码，我们将所有的网络请求拦截下来，并在本地缓存中添加所有页面和资源，从而保证在路由切换时，能够快速加载路由内容，同时减少页面闪烁现象。
小结
经过上述的操作，我们可以有效地解决 PWA 中异步加载打开链接阻止后退操作的问题，并且 使用 Service Worker 可以优化 PWA 的性能和体验。这对于 PWA 应用是非常重要和实用的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bffb02314edc26845f2692
