如果你曾经在 iOS 设备上操作过 PWA 应用，你可能会面对这样一个问题，无论怎么点击返回按钮，总是无法回到之前的页面，还是停留在当前页面。这个问题是因为 PWA 应用使用了 Service Worker 这项技术，导致浏览器的历史记录无法记录 PWA 应用内部的页面变化，从而无法回退到之前的页面。那么本文将介绍一种解决方案，使得页面跳转后依旧能够回退到之前的页面。
解决方案的实现原理
解决这个问题的关键在于让 PWA 应用中的页面跳转在浏览器会话的历史记录中被记录下来。我们可以通过监听 popstate 事件，并在事件触发时，做一些手脚，以保证当前页面的状态能够被浏览器历史记录正确记录。
这里我们需要用到 replaceState() 和 pushState() 这两个浏览器原生提供的 API。当我们跳转到一个新页面时，使用 pushState() 将当前页面的数据推入历史记录中；当我们再次点击回退按钮时，触发 popstate 事件，我们可以通过监听这个事件，并使用 replaceState() 将当前页面的数据替换历史记录中的最后一条记录，这样就可以实现回退到之前的页面了。
代码实现
下面是实现代码的核心部分：
-- -------------------- ---- -------
-- -- -------- --
----------------------------------- ------- -- -
-- --------------
----- ----- - ----------- -- ---
-- --- ---------------- ----------- -------------- -----
-- ------------------------ -
----- ------ - -------------------------------------------------------------------------------
-------------------------- --------------- --------
-
---
-- ------------------------------
-------- ----------- -
-- -------------------------- -
--- ------------ - - ----------------- ---- --
--- ------ - ---
------------------------------- --------------- --------
-
-实例应用
下面我们以一个简单的应用为例，来演示如何应用这个解决方案。
我们假设有一个 PWA 应用，这个应用展示一个列表页和一个详情页。在列表页中，用户可以点击任意一个条目，跳转到详情页；在详情页中，用户可以点击回退按钮，返回到列表页。但是在 iOS 设备中，点击回退按钮时，无法回到列表页。下面就是我们的解决方案：
在详情页中的跳转事件中加入 pushState() 方法，将当前页面状态在浏览器历史记录中推入一条新的记录。
function goToDetailPage() {
// some code here
pushState(); // 添加这行代码，在跳转前将当前页面状态推入历史记录中
location.href = 'detail.html?id=123';
}在列表页中监听 popstate 事件，并在事件触发时，将历史记录最后一条记录设置为 NeedReplaceState，这样回退时就会执行 replaceState() 方法，将详情页的状态移出浏览器历史记录
-- -------------------- ---- -------
-- -- -------- --
----------------------------------- ------- -- -
-- --------------
----- ----- - ----------- -- ---
-- --- ---------------- ----------- -------------- -----
-- ------------------------ -
----- ------ - -------------------------------------------------------------------------------
-------------------------- --------------- --------
-
---这样，我们就解决了在 iOS 设备上无法回退到之前页面的问题了。
结论
通过以上实例应用，我们了解了如何解决在 PWA 应用中，页面跳转后无法回退到之前页面的问题。这个问题主要是由于浏览器历史记录的原因，在掌握了 pushState() 和 replaceState() 方法后，我们可以轻松地解决这个问题。
同时，这个解决方案也在一定程度上弥补了 PWA 技术在 iOS 设备上的一些不足，使得 PWA 应用能够更好地在各种设备上应用，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672f0c47eedcc8a97c8c37c1