关于Pjax与PWA冲突,导致地址栏异常的解决方法。
描述
如果你的网站同时使用了 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 | // 重定向浏览器地址 |
在Butterfly的具体操作
将上述代码保存到
source\js\modify.js
。编辑
_config.butterfly.yml
,增加以下代码到inject.bottom
配置项。1
<script defer type="text/javascript" src="/js/modify.js"></script>
修改完成后,配置文件类似如下。
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>
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 矩阵!
评论