fetch
FetchAPI

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.

https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/performance/fetch-api#headers

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

対策