手机端点击浏览器返回页面无刷新解决方案-null-ICode联盟

一、背景

用户点击浏览器工具栏中的后退按钮，或者移动设备上的返回键时，或者JS执行history.go(-1);时，浏览器会在当前窗口“打开”历史纪录中的前一个页面。不同的浏览器在“打开”前一个页面的表现上并不统一，这和浏览器的实现以及页面本身的设置都有关系。

在移动端HTML5浏览器和webview中，“后退到前一个页面”意味着：前一个页面的html/js/css等静态资源的请求（甚至是ajax动态接口请求）根本不会重新发送，直接使用缓存的响应，而不管这些静态资源响应的缓存策略是否被设置了禁用状态。除非请求是JS发送的，且每次发送时，都在url中加入了随机数。（证据可以通过抓包来看，发生后退返回时，没截获到主页面、静态资源和动态接口的请求，但抓到JS发送的pv日志请求，因为pv日志请求的url中加了随机数。）

后退返回到上一个页面的表现，一句话总结就是：html/js/css/接口等资源直接使用前一次请求过的，而JS中的代码从头开始重新执行了一遍。这在一些场景下会导致严重的bug，所以才会提出“后退刷新”的需求。

“后退刷新”的目标是浏览器在后退返回到前一个页面时，能从server端请求到一个全新的的页面内容（即status code 200 ok或status code 304 not modified的页面响应，而不是status 200 from cache根本不向server端请求）进行加载展示并重新执行JS代码。

二、思路和方案

2.1 浏览器历史纪录和HTTP 缓存

PC浏览器实现后退刷新的方法是给响应添加Cache-Control的header，如果server返回页面响应的headers中包含如下内容：

Cache-Control: no-cache,no-store,must-revalidate

Expires: Thu, 01 Jan 1970 00:00:00 GMT

Pragma: no-cache

浏览器在前进后退到该页面时，就会重新发送请求。

代码示例如下：

在jsp模板的header部分加入如下的禁用缓存设置：

<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache,no-store,must-revalidate">
<meta http-equiv="Expires" content="0"> 
<%
  response.setHeader("Cache-Control","no-cache,no-store,must-revalidate");
  response.setHeader("Expires", "0");
  response.setHeader("Pragma","no-cache"); 
%>
 
</head>

说明一下，其实通过meta标签设置缓存策略，会被浏览器忽略，设置在response header中是比较可靠的。

这样看上去，浏览器历史纪录和HTTP缓存是有关系的。事实上不是这样的，参考You Do Not Understand Browser History，里面的结论是：

The browser does not respect HTTP caching rules when you click the back button.

2.2 bfcache和page cache

bfcache和page cache是webkit和firefox有一项优化技术。可参考：

这里简单介绍一下：

对于支持bfcache/page cache的浏览器，“后退”不光意味着html/js/css/接口等动静态资源不会重新请求，连JS也不会重新执行。因为前一个页面没有被unload，最后离开时的状态和数据被完整地保留在内存中，发生后退时浏览器直接把“离开时”的页面状态展示给用户。

就好像，你在页面A，点击链接要在当前窗口打开页面B，这时浏览器在不卸载页面A的情况下去加载页面B。这时你看到的是页面B，那页面A呢？页面A只是被隐藏了，JS暂停执行（我们称之为pagehide）。如果用户点击“返回”，浏览器快速把页面B隐藏，并把页面A再显示出来，JS恢复执行（我们称之为页面B pagehide, 页面A pageshow）。

pageshow事件在页面全新加载并展现时也会触发，与从bfcache/page cache中加载并展示的区分依据是pageshow event的persisted属性。

实际观察中发现，一些移动端浏览器的pageshow event的persisted属性值一直是false，尽管页面看上去确实是从bfcache/page cache中加载展示。（另外一个理论上的point，页面绑定了unload事件时，不再会进入bfcache/page cache，一些移动端浏览器上观察来看实际上也不是这样的）。

可行的方案是：JS监听pagehide/pageshow来阻止页面进入bfcache/page cache，或者监测到页面从bfcache/page cache中加载展现时进行刷新。参考 Forcing mobile Safari to re-evaluate the cached page when user presses back button

代码示例如下：

 
if(Q.ua.IOS){
    Q.$(window).on("pagehide",function(){
        var $body = $(document.body);
        $body.children().remove(); // wait for this callback to finish executing and then...
        setTimeout(function() {
            $body.append("<script type='text/javascript'>window.location.reload(true);</script>");
        });
    });
}
//for android qq browser
Q.$(window).on('pageshow', function(evt){
    setTimeout(function(){
        if(evt.persisted){
            location.reload(true);
        }
    });
});