Fetch API でHeadersを操作する時の落とし穴

2017/12現在

Google Search ConsoleのFetch as googleでSPAサイトのレンダリング確認をした際に通信しない問題が起きた。

結論から言うと、 Headers.entries が存在しないため、全非同期通信が止まってた。
Googlebotはchrome41なので、Fetch APIの実装が部分的で、FetchやHeaders自体は存在するが、entriesメソッドが存在しなかった。ただFetch, Headersクラス自体が存在するためpolyfillされていなかった。

Edgeでも同様の問題が起きていた。
edgeで実装済みのメソッド

Method	Description
append	Appends a new value to an already existing header inside a Headers object.
delete	Deletes a header from the current Headers object.
get	Gets the first value of a header from the current Headers object.
has	Checks whether or not a header exists within the current Headers object.
set	Sets a new value to an already existing header inside a Headers object.

whatwg-fetchではissueあがってるが直接の対応はしないようだ。
https://github.com/github/fetch/issues/407

対策

• 最低限のAPIしか使わない
  • 上記のedgeの実装にあるようなset, get, hasなどは恐らくどのFetch対応ブラウザでも実装されていると思うのでそれのみを使う
• 特定のブラウザの場合はpolyfillを強制する
  • https://github.com/github/fetch/issues/407#issuecomment-255724541
• 別のpolyfillを使う
  • https://github.com/jimmywarting/fetch-headers
  • https://github.com/qubyte/fetch-ponyfill