原创  手机端点击浏览器返回页面无刷新解决方案

分类: 2016-03-28T19:34:24    2409人阅读   

一、背景

用户点击浏览器工具栏中的后退按钮,或者移动设备上的返回键时,或者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有一项优化技术。可参考:

  1. Using_Firefox_1.5_caching
  2. WebKit Page Cache I – The Basics 和 WebKit Page Cache II – The unload Event

这里简单介绍一下:

对于支持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);
        }
    });
});