Firefox for AndroidでもPolymerが動作するようにする

この日記はPolymer 1.2.1で作っているのだが、この前まで僕のメインブラウザーであるFirefox for Androidでは読めなかった。今でもPolymer Element Catalogのサイトを見るとそれが体験できる。Firefox for PCでは問題ない。Firefox for iOSは知らない。

webcomponentsjsやPolymerにconsole.log()を仕込みながらプリントデバッグを頑張って原因を突き止めたところ、webcomponentsjsでのHTMLインポートの検出に問題があることが分かった。現時点でのwebcomponentsjsでは、ブラウザーにHTMLインポートの機能があるかどうかを、link要素の（JavaScriptの）オブジェクトにimportプロパティ（あれば関数）が存在するかどうか、in演算子で確認してチェックして判断している（該当箇所）。HTMLインポートをサポートしていないブラウザー（Firefox for PCなど）ではimportプロパティが存在せず、その場合はshimを使う。ところがFirefox for Androidでは、「link要素にimportプロパティが存在する」「しかしHTMLインポート機能はサポートしていない」ということになっている。link.importが、nullになっているのだ。たとえnullであっても、値が存在すればin演算子はtrueを返す。従ってFirefox for AndroidにはHTMLインポート機能が存在する、とwebcomponentsjsは判断しているわけだ。

一応、バグレポートはした。プルリクエストはリクエストしなかった。コントリビューションページによると、コントリビュートするにはライセンスに同意する必要がある。それは構わなかったのだが、同意手続きの過程で住所を入力欄が現れた。それも必須項目として。漠然と不安を覚えてプルリクエストは躊躇ってしまった。

webcomponentsjsでこの問題が対応されるかは分からない。だから今この日記ではこんなワークアラウンドを入れている。

(function() {
  var ua = navigator.userAgent;
  if (ua.indexOf("Android") !== -1 &&
    ua.indexOf("Firefox") !== -1 &&
    document.createElement("link").import === null) {
    delete HTMLLinkElement.prototype.import;
  }
})();

これを、webcomponentsjsをロードするscriptタグの前に置いている。if節の条件はnullのチェックだけでよさそうだが、そうするとなぜかChromiumやChromeでページが読めなくなってしまったので、プラットフォームも判断している。なぜ読めなくなったかは調べていない。