Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWA Night vol4 - PWA作って満足してませんか
Search
oyamatsu
May 15, 2019
Technology
1
1.7k
PWA Night vol4 - PWA作って満足してませんか
PWAを作って終わりにしないために考えたいことを発表しました
oyamatsu
May 15, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
120
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
260
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
Making Projects Easy
brettharned
116
6.3k
Thoughts on Productivity
jonyablonski
69
4.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Embracing the Ebb and Flow
colly
86
4.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
KATA
mclloyd
30
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Building an army of robots
kneath
306
45k
Documentation Writing (for coders)
carmenintech
72
4.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Transcript
PWA࡞ͬͯຬͯ͠·ͤΜ͔ʁ ΞΠϨοτגࣜձࣾ ։ൃηΫγϣϯ ηΫγϣϯϦʔμʔ খ୩দ ৎथʢ͓·ͭ ͱ͖ʣ
ࣗݾհ ΞΠϨοτגࣜձࣾ ։ൃηΫγϣϯϦʔμʔ αʔόͷӡ༻อकΛओ࣠ʹαʔϏεల։Λ͍ͯ͠Δձࣾ PWAྺ2·͑ʹͪΐͬͱ͚ͩ ΦϯυϝσΟΞ cloudpack.media ͷPWAԽΛରԠ ΦϑϥΠϯͰݟΕͯɺهࣄΩϟογϡ͞Εͯͯߴදࣔ 2
PWA࡞ͬͯຬͯ͠·ͤΜ͔ʁ PWAΛ࡞ͬͨ͜ͱ͕͋Δਓ 3
PWAͱͦͦԿ͔ PWAͱɺϢʔβମݧΛΑΓྑ͘͢Δख๏ ͬͯΈΔ͜ͱΤϯδχΞతʹྑ͍ PWA࡞ͬͯऴΘΓͰͳ͘ɺ ࡞ͬͯӡ༻ͯ͠ॳΊͯPWA͡Όͳ͍Ͱ͔͢ʁ PWAͰ࣮ݱ͍ͨ͠ઓུΛదʹ࣮ͯ͠ӡ༻͢Δ͜ͱ͕ॏཁ Ωϟογϡ͢Δίϯςϯπͷܾఆ ϓογϡͷηάϝϯτ৴ɹͳͲͳͲ 4
PWA࡞ͬͯຬͯ͠·ͤΜ͔ʁ PWAΛ࡞ͬͨ͜ͱ͕͋Δਓ PWAΛ࡞ͬͯӡ༻ͨ͜͠ͱ͕͋Δਓ 5
PWAͷӡ༻ͬͯͦΕ͚͔ͩʁ Ϣʔβମݧ্͕͔ͨ͠Ͳ͏͔ΛΥον PCͱεϚϗͱΞϓϦɺPWAͰμϯϩʔυͨ͠ΞϓϦͰ ͦΕͧΕϢʔβମݧͷܭଌΛߦͬͯൺֱ ͬͯخ͍͠ࢪࡦ͡Όͳ͍ͱPWAରԠ͢Δ/ͨ͠ҙຯ͕ͳ͍ Ϣʔβମݧ্͕͠·ͨ͠ʂ͕ใࠂͰ͖ͯॳΊͯ ʮϫλγPWAνϣοτσΩϧʯ 6
PWA࡞ͬͯຬͯ͠·ͤΜ͔ʁ PWAΛ࡞ͬͨ͜ͱ͕͋Δਓ PWAΛ࡞ͬͯӡ༻ͨ͜͠ͱ͕͋Δਓ PWAͷޮՌଌఆ·Ͱͬͨ͜ͱ͕͋Δਓ 7
PWAͷΞϓϦޮՌଌఆ
ΞΫηεΛͲ͏ݟ͚Δ͔ جຊతʹwebαΠτͷΞΫηεͳͷͰGAͰશͯܭଌՄೳ εϚʔτϑΥϯͷΞΫηεͱΠϯετʔϧࡁΈPWAΞϓϦ ࣮࣭Chrome͕ΞΫηε͍ͯ͠Δ UserAgentͲͬͪಉ͡ ΞΫηε࣌ͷใతʹwebΞΫηεͱมΘΓͳ͍… 9
"display": "standalone" Λ͏ ϝσΟΞΫΤϦΛར༻ͯ͠PWAڥԼͰ͋Δ͜ͱΛఆͰ͖Δ ελϯυΞϩʔϯϞʔυͰ͋Δ͜ͱΛݕ ࢀߟɿ https://qiita.com/ing_tachibana/items/7de678225542c12d4f41 PWAڥԼͰ࣮ߦ͞Ε͍ͯΔ͔Λఆ͢Δํ๏
10
GoogleTagManagerͷมઃఆ 11 શϖʔδϏϡʔͰ ͜ͷมΛ ૹ৴͢Δͱ…
GAͷཧը໘ͰϑΟϧλʔͰ͖Δ 12
͝ΊΜͳ͍͞ӕ͖ͭ·ͨ͠ ϝσΟΞΫΤϦΛར༻ͯ͠PWAڥԼͰ͋Δ͜ͱΛఆͰ͖Δ ελϯυΞϩʔϯϞʔυͰ͋Δ͜ͱΛݕ UserAgent͕IEͷͷݕ͞Εͯ͠·͏ˠશը໘ʁ ͪΐͬͱᘳͰͳ͍ͷ͔ ࢀߟɿ https://qiita.com/ing_tachibana/items/7de678225542c12d4f41 PWAڥԼͰ࣮ߦ͞Ε͍ͯΔ͔Λఆ͢Δํ๏ 13
վળҊɿstart_url͏ PWAΞϓϦ manifest.json ʹ start_url ΛࢦఆͰ͖Δ ࠷ॳʹΞΫηε͢ΔURLʹύϥϝʔλΛઃఆͯ͠ ͦΕͱϝσΟΞΫΤϦΛࠞͥͯఆʹ͑Ε͍͚Δ͔ʂ ྫʣstart_url: “/?ref=pwa”
Androidͷintentىಈ͕Ͱ͖ΔΑ͏ʹͳͬͨΒ start_url Λܦ༝͠ͳ͘ͳΔͷͰ…ʁ ·ͩ·ͩӡ༻͋Γͦ͏… 14
·ͱΊ 15 ΤϯδχΞతʹ৽͍ٕ͠ज़ʹͱͬͭ͘ͷඇৗʹྑ͍ ΤϯδχΞͷ͓ͪΌͰऴΘ͍͚ͬͯͳ͍ ࡞Δ͚ͩͰͳ͘ӡ༻Λߟ͑ΔͱΑΓGood PWA͋͘·ͰUXվળͷख๏ͱ͍͏͜ͱΛΕͳ͍ ຊ࣭ɺΩϟογϡͰϓογϡͰΦϑϥΠϯͰͳ͍
ΜʁऴΘΓʁ
PWA࡞ͬͯຬͯ͠·ͤΜ͔ʁ
։ൃͯ͠ɺӡ༻ͨ͠Βʂ PWA σΟϕϩοϓϝϯτ ΤʔδΣϯγʔ σΟϨΫτϦʹਃ ੍࡞ͨ͠αΠτ͕ Lighthouse Ͱ 70 Ҏ্ͷείΞΛ֫ಘ͢Δ͜ͱ
੍࡞ͨ͠αΠτ͕ 3G ωοτϫʔΫͷઃఆͰ 5 ඵҎͰදࣔ͞ΕΔ͜ͱ ৹ࠪʹ߹֨͢Ε͋ͳͨͷձࣾσΟϨΫτϦʹՃ͞Ε·͢ʂ 18
ָ͍͠PWAϥΠϑΛ ΞΠϨοτ খ୩দৎथ ΞΠϨοτ খ୩দৎथ