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

Slide 1

Slide 1 text

Beacon API ͜ͱ͸͡Ί ʙ ͦͯ͠keepalive fetch΁ ʙ Edward Fox 2018/08/21 @We Are JavaScripters! #23

Slide 2

Slide 2 text

@edwardkenfox Edward Fox ɾWEBΤϯδχΞ @ Reproגࣜձࣾ ɾWEBʗϒϥ΢βٕज़શൠɺPWA ɾΫϥϑτϏʔϧɺԻָɺόεέ

Slide 3

Slide 3 text

ಥવͰ͕͢ɺΈͳ͞Μ

Slide 4

Slide 4 text

Beacon APIɺ ࢖ͬͯ·͔͢ʁ

Slide 5

Slide 5 text

JavaScript͔Β HTTP௨৴Λ͢Δํ๏͸ ͨ͘͞Μ͋Γ·͢

Slide 6

Slide 6 text

ɾXMLHttpRequest ɾfetch ɾimg etc.

Slide 7

Slide 7 text

Beacon API΋ͦͷ1ͭ

Slide 8

Slide 8 text

navigator.sendBeacon(url [, data]) ͱ͍͏ܗͰϦΫΤετΛૹΕΔ

Slide 9

Slide 9 text

Կ͕ҧ͏ͷ͔ʁ

Slide 10

Slide 10 text

੍໿ͱ੤໿

Slide 11

Slide 11 text

੍໿ͱ੤໿ ʢσϝϦοτͱϝϦοτʣ

Slide 12

Slide 12 text

੍໿ͱ੤໿

Slide 13

Slide 13 text

੍໿1 ϖΠϩʔυαΠζͷ੍ݶ

Slide 14

Slide 14 text

ʲϖΠϩʔυαΠζͷ੍ݶʳ ɾBeacon APIͷ࢓༷తʹ͸ʮ্ݶΛ ઃ͚Δ͜ͱʯࣗମ͸ఆΊΒΕ͍ͯΔ ΋ͷͷɺ۩ମతͳ਺஋͸ܾΊΒΕͯ ͍ͳ͍ ɾ࣮૷తʹ͸ɺ֤छϒϥ΢βҰ཯Ͱ 64KBͱͳ͍ͬͯΔ

Slide 15

Slide 15 text

͕ɺݱ࣮ੈքͰ ͜ͷQuotaΛ௒͑Δ͜ͱ͸ ͔ͳΓكͬΆ͍

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

੍໿2 ΧελϚΠζੑͷ௿͞

Slide 18

Slide 18 text

ʲΧελϚΠζੑͷ௿͞ʳ ɾPOSTϝιουͷΈ ɾΧελϜͳHTTPϔομෆՄ

Slide 19

Slide 19 text

੍໿ͱ੤໿

Slide 20

Slide 20 text

ʲ੤໿ʳ ɾϦΫΤετ͸ΩϡʔΠϯά͞ Εɺඇಉظతʹॲཧ͞ΕΔ ɾϖʔδ͕ഁغ͞ΕΔͱ͖Ͱ͋ͬ ͯ΋ϦΫΤετͷૹୡ͕อূ͞ Ε͍ͯΔ

Slide 21

Slide 21 text

͜Ε·Ͱ͋ͬͨ ɾunload࣌ͷasync XHR => ϒϥ΢β͸࣮ߦΛεΩοϓ ɾunload࣌ͷsync XHR => φϏήʔγϣϯΛϒϩοΫ ͜ΕΒΛղܾ

Slide 22

Slide 22 text

Ϣʔεέʔε ɾσόοά ɾϩΪϯά ɾτϥοΩϯά ͳͲ

Slide 23

Slide 23 text

Beacon APIͷࠓޙ

Slide 24

Slide 24 text

࣮͸fetchʹkeepaliveͱ͍͏ Φϓγϣϯ͕௥Ճ͞Ε͍ͯͯ ͜Ε͕΄΅ಉ͡

Slide 25

Slide 25 text

fetch(‘url’, { keepalive: true, method: ‘PUT’, body: new FormData() })

Slide 26

Slide 26 text

1ϲ݄͘Β͍લʹBlinkͷMLͰ unload࣌ͷsync XHRΛ αϙʔτ͠ͳ͘ͳΔมߋͷ Intent to Implement & Ship ͕ ྲྀΕͨ

Slide 27

Slide 27 text

·ͱΊ ɾBeacon API͸unload࣌ͷϦΫΤετૹ ୡΛอূ͢Δ ɾsync XHR͸ࠓޙ࢖͑ͳ͘ͳΔྲྀΕ ɾBeacon API΋ྑ͍͚Ͳɺkeepalive fetch ͕Φεεϝ

Slide 28

Slide 28 text

We are hiring!

Slide 29

Slide 29 text

Slide 30

Slide 30 text

ग़లʗҾ༻ʗࢀߟ ɾ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/

Slide 31

Slide 31 text

Fin