描述

如果你的网站同时使用了 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>