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
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.1k
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
MobileActOsaka_250704.pdf
akaitadaaki
0
130
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
330
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.6k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
GitHub's CSS Performance
jonrohan
1031
460k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Optimizing for Happiness
mojombo
379
70k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Documentation Writing (for coders)
carmenintech
72
4.9k
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ϥΠϑΛ ΞΠϨοτ খ୩দৎथ ΞΠϨοτ খ୩দৎथ