解决ios设备浏览器页面回退但内容不刷新导致的问题

场景描述

项目情况：项目是一个php前后端不分离项目，分为移动端和pc端，但用的基本是一套代码，在每个页面中调用判断当前是否为移动端的函数去动态的加载pc或移动端所需的css、js和dom结构代码。

问题描述：今天碰到的提测的一个bug是：设备在操作部分页面后点击浏览器后退按钮，会直接显示pc端的样式，需手动刷新页面才显示移动端样式，用户交互体验差。

定位问题：经过排查后发现，只有ios设备在用浏览器浏览的时候会出现以上问题，用微信内置浏览器查看没有上述问题，安卓设备也没有上述问题。
并且后续通过打印信息，发现页面回退时并没有再触发判断是否为移动端的函数，也因此我可以将问题定位到，页面后退后，并没有触发页面刷新，而是直接走了缓存。

解决方法

在php页面中引入我们要写的reload.js，if语句使得只有移动端会引入该js文件【is_moblie函数判断是否为移动端】：

@if(is_mobile())
    <script src="{{URL::asset('web/js/reload.js')}}" id="script"></script>
@endif

reload.js:

window.addEventListener('pageshow',function(e){
  if (e.persisted) {
    // 如果页面是读取缓存
    window.location.reload();  //刷新页面
  } 
})

onpageshow 区别于onload事件。onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发。 因此读取浏览器缓存时，onload 事件不会触发。
为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false。

产生原因：

bfcache，即 BACk-forWARD cache，可称为往返缓存，可以在用户使用浏览器的 后退 和 前进 按钮时加快页面的转换速度。这个缓存不仅保存页面数据，还保存了 DOM 和 JS 的状态，实际上是将整个页面都保存在内存里。如果页面位于bfcache中，那么再次打开该页面就不会触发 onload事件。这是 HTML5 世代浏览器新增的特性之一。 这就产生了一个问题，如果希望用户每次打开这个页面的时候都能够获取到最新的资源，因为 bfcache 的存在，不做特殊的处理这个效果就无法达到。

chromium已经移除了bfcache，但基于Webkit的iOS仍然保留了这一特性。【←根据苹果 AppStore 指南，要求iOS 上的第三方浏览器应用程序必须使用苹果自己的 WebKit 浏览器引擎】

一点疑惑

缓存也应该缓存原来的页面，也就是移动端页面，为什么反而缓存了pc的页面？

---

参考文章：
浏览器往返缓存（Back/Forward cache）问题的分析与解决