绕过微信不支持检测 HTML History PushState 变化的问题

去年我在做一个 Web 项目的时候，发现「微信的内置浏览器不支持检测 HTML History PushState」，导致一些麻烦的事情。到了今年我发现微信依然没有解决这个问题，于是写篇 Blog 记录一下。

什么是「不支持检测 HTML History PushState」？

简单地说，如果你在微信里面浏览一个网站，这个网站使用了 HTML History 的 PushState 来更改 URL 的话（现在已经有越来越多的采用 HTML5 技术的网站或 SPA 这样做了），微信会无视这个 URL 的变化，于是导致你在分享这个 URL 的时候，发现始终是这个网站的最初的 URL，而不是最新的 URL。

举个例子：

在微信里面访问 https://vue-hn.now.sh 这个网站，然后你通过右上角把该页分享给朋友，这时他会进入网址 https://vue-hn.now.sh ，这是对的。

然后，你点这个网站的任何一个条目的 Comments，进入这个条目的详细页，这时网址也会发生变化，比如变成了： https://vue-hn.now.sh/item/18037139 。这时，你再通过右上解把该页分享给朋友，你会发现虽然标题变了，但是网站仍然是老的。

这就是我前面说的「不支持检测 HTML History PushState 变化」。

解决方案 Workaround

现在都 2018 年了，我们总不能屈服于微信，把网站改成落后的技术，或者使用 Hash 模式的 History 导航。那么，怎么解决这个问题？我先直接上代码。

let ua = navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i) == "micromessenger") {
    history.replaceState(history.state, null, window.location.pathname)
    let url = window.location.href
}

上面的代码很简单，可以放置在网页载入成功的位置，简单的说：

1、通过 User Agent 判断当前的环境是不是微信； 2、通过 history.replaceState 这个 API 强行载入一次同样的 URL，这个方法不会造成页面重新刷新，对用户来说是没有感知的，但是可以让微信知道网页发生变化了； 3、通过 window.location.href 取得当前的 URL，这时这个 URL 和微信检测到的 URL 是一致了，于是可以分享了。

总结

我这个方法不知道是不是最经济的，如果大家能找到更好的方法，欢迎告诉我。当然，这问题的本质还是微信的问题，如果有人能把这个问题转答给微信的核心开发人员并因此得到修复的话，这肯定是最好的。

但是因为 2017 年我就反馈过这个问题，现在依然没有得到修复，所以目前持悲观态度…

珍惜生命，远离「微信式 Web 开发」。