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

D32564792887e3fb5955021f9804c0a6?s=47 Edward Fox
August 21, 2018

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

D32564792887e3fb5955021f9804c0a6?s=128

Edward Fox

August 21, 2018
Tweet

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