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.6k
PWA Night vol4 - PWA作って満足してませんか
PWAを作って終わりにしないために考えたいことを発表しました
oyamatsu
May 15, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
Castor - Symfony Live 2024 - Paris
lyrixx
1
120
10分でわかるfreeeのQA
freee
0
260
MongoDB Atlas Vectorsearchではじめる生成AIアプリ開発
chie8842
3
510
依存ライブラリはどこに?
takesection
0
120
Autify Company Deck
autifyhq
1
30k
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
期待しすぎずに取り組む両面 TypeScript
shozawa
4
580
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
140
XRミーティング 2024-03-20
1ftseabass
PRO
0
100
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
4
970
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
11
1.1k
ハイパフォーマンスな組織をつくるための開発生産性の考え方 / developer-productivity-high-performer-link-and-motivation
lmi
3
280
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
4 Signs Your Business is Dying
shpigford
174
21k
Building Adaptive Systems
keathley
29
1.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
For a Future-Friendly Web
brad_frost
170
8.9k
Gamification - CAS2011
davidbonilla
76
4.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Web development in the modern age
philhawksworth
201
10k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
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ϥΠϑΛ ΞΠϨοτ খ୩দৎथ ΞΠϨοτ খ୩দৎथ