Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics

20180821
@We Are JavaScripters! #23
https://wajs.connpass.com/event/96435/

MDN - Beacon API
https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API#Browser_compatibility

Implementing keepalive on Fetch API
https://qiita.com/hirano_y_aa/items/ee73bdd74f70f1d36b01

Intent to Implement & Ship: Disallow Sync XHR in Page Dismissal
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/LnqwTCiT9Gs/tO0IBO4PAwAJ

Chrome Platform Status
https://www.chromestatus.com/metrics/feature/timeline/popularity/495

beacon-allowance.html
https://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/http/tests/sendbeacon/beacon-allowance.html?sq=package:chromium&dr&g=0

Squeezing the Most Into the New W3C Beacon API
https://nikcodes.com/2014/12/16/squeezing-the-most-into-the-new-w3c-beacon-api/

Transcript

1. Beacon API ͜ͱ͸͡Ί ʙ ͦͯ͠keepalive fetch΁ ʙ Edward Fox 2018/08/21 @We Are JavaScripters! #23
2. @edwardkenfox Edward Fox ɾWEBΤϯδχΞ @ Reproגࣜձࣾ ɾWEBʗϒϥ΢βٕज़શൠɺPWA ɾΫϥϑτϏʔϧɺԻָɺόεέ
3. ಥવͰ͕͢ɺΈͳ͞Μ
4. Beacon APIɺ ࢖ͬͯ·͔͢ʁ
5. JavaScript͔Β HTTP௨৴Λ͢Δํ๏͸ ͨ͘͞Μ͋Γ·͢
6. ɾXMLHttpRequest ɾfetch ɾimg etc.
7. Beacon API΋ͦͷ1ͭ
8. navigator.sendBeacon(url [, data]) ͱ͍͏ܗͰϦΫΤετΛૹΕΔ
9. Կ͕ҧ͏ͷ͔ʁ
10. ੍໿ͱ੤໿
11. ੍໿ͱ੤໿ ʢσϝϦοτͱϝϦοτʣ
12. ੍໿ͱ੤໿
13. ੍໿1 ϖΠϩʔυαΠζͷ੍ݶ
14. ʲϖΠϩʔυαΠζͷ੍ݶʳ ɾBeacon APIͷ࢓༷తʹ͸ʮ্ݶΛ ઃ͚Δ͜ͱʯࣗମ͸ఆΊΒΕ͍ͯΔ ΋ͷͷɺ۩ମతͳ਺஋͸ܾΊΒΕͯ ͍ͳ͍ ɾ࣮૷తʹ͸ɺ֤छϒϥ΢βҰ཯Ͱ 64KBͱͳ͍ͬͯΔ
15. ͕ɺݱ࣮ੈքͰ ͜ͷQuotaΛ௒͑Δ͜ͱ͸ ͔ͳΓكͬΆ͍
16. https://www.chromestatus.com/metrics/feature/timeline/popularity/495
17. ੍໿2 ΧελϚΠζੑͷ௿͞
18. ʲΧελϚΠζੑͷ௿͞ʳ ɾPOSTϝιουͷΈ ɾΧελϜͳHTTPϔομෆՄ
19. ੍໿ͱ੤໿
20. ʲ੤໿ʳ ɾϦΫΤετ͸ΩϡʔΠϯά͞ Εɺඇಉظతʹॲཧ͞ΕΔ ɾϖʔδ͕ഁغ͞ΕΔͱ͖Ͱ͋ͬ ͯ΋ϦΫΤετͷૹୡ͕อূ͞ Ε͍ͯΔ
21. ͜Ε·Ͱ͋ͬͨ ɾunload࣌ͷasync XHR => ϒϥ΢β͸࣮ߦΛεΩοϓ ɾunload࣌ͷsync XHR => φϏήʔγϣϯΛϒϩοΫ ͜ΕΒΛղܾ
22. Ϣʔεέʔε ɾσόοά ɾϩΪϯά ɾτϥοΩϯά ͳͲ
23. Beacon APIͷࠓޙ
24. ࣮͸fetchʹkeepaliveͱ͍͏ Φϓγϣϯ͕௥Ճ͞Ε͍ͯͯ ͜Ε͕΄΅ಉ͡
25. fetch(‘url’, { keepalive: true, method: ‘PUT’, body: new FormData() })
26. 1ϲ݄͘Β͍લʹBlinkͷMLͰ unload࣌ͷsync XHRΛ αϙʔτ͠ͳ͘ͳΔมߋͷ Intent to Implement & Ship ͕ ྲྀΕͨ
27. ·ͱΊ ɾBeacon API͸unload࣌ͷϦΫΤετૹ ୡΛอূ͢Δ ɾsync XHR͸ࠓޙ࢖͑ͳ͘ͳΔྲྀΕ ɾBeacon API΋ྑ͍͚Ͳɺkeepalive fetch ͕Φεεϝ
28. We are hiring!
29. i
30. ग़లʗҾ༻ʗࢀߟ ɾhttps://developer.mozilla.org/en-US/docs/Web/API/Beacon_API#Browser_compatibility ɾhttps://qiita.com/hirano_y_aa/items/ee73bdd74f70f1d36b01 ɾhttps://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/LnqwTCiT9Gs/tO0IBO4PAwAJ ɾhttps://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/http/tests/sendbeacon/ beacon-allowance.html?sq=package:chromium&dr&g=0 ɾhttps://nikcodes.com/2014/12/16/squeezing-the-most-into-the-new-w3c-beacon-api/
31. Fin