PWA Night vol4 - PWA作って満足してませんか

PWAを作って終わりにしないために考えたいことを発表しました

Transcript

1. PWA࡞ͬͯຬ଍ͯ͠·ͤΜ͔ʁ ΞΠϨοτגࣜձࣾ ։ൃηΫγϣϯ ηΫγϣϯϦʔμʔ খ୩দ ৎथʢ͓΍·ͭ ͱ΋͖ʣ
2. ࣗݾ঺հ ΞΠϨοτגࣜձࣾ ։ൃηΫγϣϯϦʔμʔ αʔόͷӡ༻อकΛओ࣠ʹαʔϏεల։Λ͍ͯ͠Δձࣾ PWAྺ໿2೥·͑ʹͪΐͬͱ͚ͩ Φ΢ϯυϝσΟΞ cloudpack.media ͷPWAԽΛରԠ ΦϑϥΠϯͰݟΕͯɺهࣄ͸Ωϟογϡ͞Εͯͯߴ଎දࣔ 2
3. PWA࡞ͬͯຬ଍ͯ͠·ͤΜ͔ʁ PWAΛ࡞ͬͨ͜ͱ͕͋Δਓ 3
4. PWAͱ͸ͦ΋ͦ΋Կ͔ PWAͱ͸ɺϢʔβମݧΛΑΓྑ͘͢Δख๏ ΍ͬͯΈΔ͜ͱ͸ΤϯδχΞతʹ͸ྑ͍ PWA͸࡞ͬͯऴΘΓͰ͸ͳ͘ɺ
 ࡞ͬͯӡ༻ͯ͠ॳΊͯPWA͡Όͳ͍Ͱ͔͢ʁ PWAͰ࣮ݱ͍ͨ͠ઓུΛద੾ʹ࣮૷ͯ͠ӡ༻͢Δ͜ͱ͕ॏཁ Ωϟογϡ͢Δίϯςϯπͷܾఆ ϓογϡͷηάϝϯτ഑৴ɹͳͲͳͲ 4
5. PWA࡞ͬͯຬ଍ͯ͠·ͤΜ͔ʁ PWAΛ࡞ͬͨ͜ͱ͕͋Δਓ PWAΛ࡞ͬͯӡ༻ͨ͜͠ͱ͕͋Δਓ 5
6. PWAͷӡ༻ͬͯͦΕ͚͔ͩʁ Ϣʔβମݧ͕޲্͔ͨ͠Ͳ͏͔Λ΢Υον PCͱεϚϗͱΞϓϦɺPWAͰμ΢ϯϩʔυͨ͠ΞϓϦͰ
 ͦΕͧΕϢʔβମݧͷܭଌΛߦͬͯൺֱ ΍ͬͯخ͍͠ࢪࡦ͡Όͳ͍ͱPWAରԠ͢Δ/ͨ͠ҙຯ͕ͳ͍ Ϣʔβମݧ͕޲্͠·ͨ͠ʂ͕ใࠂͰ͖ͯॳΊͯ
 ʮϫλγPWAνϣοτσΩϧʯ 6
7. PWA࡞ͬͯຬ଍ͯ͠·ͤΜ͔ʁ PWAΛ࡞ͬͨ͜ͱ͕͋Δਓ PWAΛ࡞ͬͯӡ༻ͨ͜͠ͱ͕͋Δਓ PWAͷޮՌଌఆ·Ͱ΍ͬͨ͜ͱ͕͋Δਓ 7
8. PWAͷΞϓϦޮՌଌఆ
9. ΞΫηεΛͲ͏ݟ෼͚Δ͔ جຊతʹ͸webαΠτ΁ͷΞΫηεͳͷͰGAͰશͯܭଌՄೳ εϚʔτϑΥϯͷΞΫηεͱΠϯετʔϧࡁΈPWAΞϓϦ ࣮࣭Chrome͕ΞΫηε͍ͯ͠Δ UserAgent͸Ͳͬͪ΋ಉ͡ ΞΫηε࣌ͷ৘ใతʹ͸webΞΫηεͱมΘΓͳ͍… 9
10. "display": "standalone" Λ࢖͏ 
 ϝσΟΞΫΤϦΛར༻ͯ͠PWA؀ڥԼͰ͋Δ͜ͱΛ൑ఆͰ͖Δ ελϯυΞϩʔϯϞʔυͰ͋Δ͜ͱΛݕ஌
 
 ࢀߟɿ https://qiita.com/ing_tachibana/items/7de678225542c12d4f41 PWA؀ڥԼͰ࣮ߦ͞Ε͍ͯΔ͔Λ൑ఆ͢Δํ๏ 10
11. GoogleTagManagerͷม਺ઃఆ 11 શϖʔδϏϡʔͰ
 ͜ͷม਺Λ
 ૹ৴͢Δͱ…
12. GAͷ؅ཧը໘ͰϑΟϧλʔͰ͖Δ 12
13. ͝ΊΜͳ͍͞ӕ͖ͭ·ͨ͠ 
 ϝσΟΞΫΤϦΛར༻ͯ͠PWA؀ڥԼͰ͋Δ͜ͱΛ൑ఆͰ͖Δ ελϯυΞϩʔϯϞʔυͰ͋Δ͜ͱΛݕ஌ UserAgent͕IEͷ΋ͷ΋ݕ஌͞Εͯ͠·͏ˠશը໘ʁ ͪΐͬͱ׬ᘳͰ͸ͳ͍ͷ͔΋ ࢀߟɿ https://qiita.com/ing_tachibana/items/7de678225542c12d4f41 PWA؀ڥԼͰ࣮ߦ͞Ε͍ͯΔ͔Λ൑ఆ͢Δํ๏ 13
14. վળҊɿstart_url΋࢖͏ PWAΞϓϦ͸ manifest.json ʹ start_url ΛࢦఆͰ͖Δ ࠷ॳʹΞΫηε͢ΔURLʹύϥϝʔλΛઃఆͯ͠
 ͦΕͱϝσΟΞΫΤϦΛࠞͥͯ൑ఆʹ࢖͑Ε͹͍͚Δ͔΋ʂ ྫʣstart_url: “/?ref=pwa” Androidͷintentىಈ͕Ͱ͖ΔΑ͏ʹͳͬͨΒ
 start_url Λܦ༝͠ͳ͘ͳΔͷͰ͸…ʁ ·ͩ·ͩӡ༻΋໰୊͋Γͦ͏… 14
15. ·ͱΊ 15 ΤϯδχΞతʹ͸৽͍ٕ͠ज़ʹͱͬͭ͘ͷ͸ඇৗʹྑ͍ ΤϯδχΞͷ͓΋ͪΌͰऴΘͬͯ͸͍͚ͳ͍ ࡞Δ͚ͩͰ͸ͳ͘ӡ༻Λߟ͑ΔͱΑΓGood PWA͸͋͘·Ͱ΋UXվળͷख๏ͱ͍͏͜ͱΛ๨Εͳ͍ ຊ࣭͸ɺΩϟογϡͰ΋ϓογϡͰ΋ΦϑϥΠϯͰ΋ͳ͍
16. ΜʁऴΘΓʁ
17. PWA࡞ͬͯຬ଍ͯ͠·ͤΜ͔ʁ
18. ։ൃͯ͠ɺӡ༻ͨ͠Βʂ PWA σΟϕϩοϓϝϯτ ΤʔδΣϯγʔ σΟϨΫτϦʹਃ੥ ੍࡞ͨ͠αΠτ͕ Lighthouse Ͱ 70 ఺Ҏ্ͷείΞΛ֫ಘ͢Δ͜ͱ ੍࡞ͨ͠αΠτ͕ 3G ωοτϫʔΫͷઃఆͰ 5 ඵҎ಺Ͱදࣔ͞ΕΔ͜ͱ ৹ࠪʹ߹֨͢Ε͹͋ͳͨͷձࣾ΋σΟϨΫτϦʹ௥Ճ͞Ε·͢ʂ 18
19. ָ͍͠PWAϥΠϑΛ ΞΠϨοτ খ୩দৎथ ΞΠϨοτ খ୩দৎथ