描述

如果你的网站同时使用了 Pjax 与 PWA。

那么在浏览网站时,地址栏可能会出现奇怪的后缀。

类似于 index.html?_sw-precache=d65205fbf6be65ea9e136772f668efdb

分析

PWA

出现这个情况,PWA 的实现多半有用到 sw-precache 这个项目。

地址中的 _sw-precache 这个参数是由 sw-precache 添加的,它的值是相应内容的哈希。

作用是内容更新时,让请求的地址不同,避免仍从缓存中读取内容。

Pjax

如果没用 Pjax 的话,这个后缀是不会出现在地址栏上的。

但 Pjax 在改变地址栏的时候,逻辑是优先响应地址,其次才是请求地址。

所以地址栏就会变成有后缀的。

解决方法

增加一段 Javascript 代码,用以劫持 Pjax 处理响应的函数。

request 对象中的响应地址修改为请求地址。

这里用到了 Object.defineProperty 函数,因为 request.responseURL 是只读变量,无法直接修改。

1
2
3
4
5
6
7
8
// 重定向浏览器地址
pjax.site_handleResponse = pjax.handleResponse;
pjax.handleResponse = function(responseText, request, href, options) {
Object.defineProperty(request, 'responseURL', {
value: href
});
pjax.site_handleResponse(responseText, request, href, options);
}

在Butterfly的具体操作

  1. 将上述代码保存到 source\js\modify.js

  2. 编辑 _config.butterfly.yml,增加以下代码到 inject.bottom 配置项。

    1
    <script defer type="text/javascript" src="/js/modify.js"></script>
  3. 修改完成后,配置文件类似如下。

    1
    2
    3
    4
    5
    6
    7
    8
    # Inject
    # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
    # 插入代码到头部 </head> 之前 和 底部 </body> 之前
    inject:
    head:
    # - <link rel="stylesheet" href="/xxx.css">
    bottom:
    - <script defer type="text/javascript" src="/js/modify.js"></script>