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基礎_1
Search
gyarasu
November 13, 2018
Technology
0
300
PWA基礎_1
- PWAとは
- App Shell Model
に関してまとめてあります。
gyarasu
November 13, 2018
Tweet
Share
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
59
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.9k
RESTful Firebase with Vue.js
gyarasu
1
440
Next.jsではじめるPWA
gyarasu
2
1.6k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.7k
副業時代のプロジェクトマネジメント
gyarasu
3
3k
PWA基礎_2
gyarasu
0
190
PWA基礎_3
gyarasu
0
160
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.7k
Other Decks in Technology
See All in Technology
BtoBプロダクト開発の深層
16bitidol
0
140
「Verify with Wallet API」を アプリに導入するために
hinakko
1
110
非同期処理実行基盤 Delayed脱出 → Solid Queue完全移行への旅路。
srockstyle
3
1.4k
WebアプリケーションのUI構築で気を付けてるポイント
tomokusaba
0
200
Findy Team+のSOC2取得までの道のり
rvirus0817
0
240
20250929_QaaS_vol20
mura_shin
0
110
pprof vs runtime/trace (FlightRecorder)
task4233
0
140
stupid jj tricks
indirect
0
7.6k
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
3.7k
AWSのProductのLifecycleについて
stknohg
PRO
0
300
今改めてServiceクラスについて考える 〜あるRails開発者の10年〜
joker1007
20
9.3k
BirdCLEF+2025 Noir 5位解法紹介
myso
0
170
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Being A Developer After 40
akosma
90
590k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Agile that works and the tools we love
rasmusluckow
330
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
A Tale of Four Properties
chriscoyier
160
23k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Side Projects
sachag
455
43k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Transcript
PWAೖߨ࠲ Part1 ʔ PWAͷجૅᶃ ʔ
࣍ ▹ PWAͱʁ ▹ PWAͷಛ ▹ App ShellϞσϧ 2
PWAͱʁ
“ ωΠςΟϒΞϓϦͷΑ͏ͳ UXΛ࣮ݱ͢ΔWEBΞϓϦ 4
PWAͱʁ ▹ ৴པੑ ▹ ωοτϫʔΫঢ়ଶʹΑΒͣଈ࠲ʹϩʔυ ▹ ߴ ▹ ϢʔβΠϯλϥΫγϣϯʹૉૣ͘Ԡ ▹
Τϯήʔδϝϯτ ▹ ωΠςΟϒΞϓϦͷΑ͏ʹ࠶དྷ๚Λଅਐ 5
PWAͷಛ
PWAͷಛ ▹ ΦϑϥΠϯͰಈ࡞ ▹ ϓογϡ௨ΛૹΔ͜ͱ͕Ͱ͖Δ ▹ ϗʔϜը໘ʹΞΠίϯΛՃͰ͖Δ ▹ શը໘ද͕ࣔՄೳ ▹
Πϯετʔϧෆཁ ▹ ݕࡧΤϯδϯʹώοτ͢Δ ▹ ϦϯΫՄೳ ▹ HTTPSͰಈ࡞ 7
WEBΞϓϦͷಛ ▹ ΦϑϥΠϯͰಈ࡞ ▹ ϓογϡ௨ΛૹΔ͜ͱ͕Ͱ͖Δ ▹ ϗʔϜը໘ʹΞΠίϯΛՃͰ͖Δ ▹ શը໘ද͕ࣔՄೳ ▹
Πϯετʔϧෆཁ ▹ ݕࡧΤϯδϯʹώοτ͢Δ ▹ ϦϯΫՄೳ ▹ ʢHTTPSͰಈ࡞ʣ 8
ωΠςΟϒΞϓϦͷಛ ▹ ΦϑϥΠϯͰಈ࡞ ▹ ϓογϡ௨ΛૹΔ͜ͱ͕Ͱ͖Δ ▹ ϗʔϜը໘ʹΞΠίϯΛՃͰ͖Δ ▹ શը໘ද͕ࣔՄೳ ▹
Πϯετʔϧෆཁ ▹ ݕࡧΤϯδϯʹώοτ͢Δ ▹ ϦϯΫՄೳ ▹ ʢHTTPSͰಈ࡞ʣ 9
PWA≒WEBΞϓϦ×ωΠςΟϒΞϓϦ 10
App ShellϞσϧ
App ShellϞσϧ ▹ ֓ཁ ▹ UI͕ػೳ͢ΔͨΊʹඞཁͳ࠷খݶͷHTML/CSS/ Javascript ▹ ΦϑϥΠϯͰ༻Ͱ͖ΔΑ͏ʹΩϟογϡ͓ͯ͘͠ ▹
ඞཁͳίϯςϯπͷΈɺωοτϫʔΫ͔ΒಡΈࠐ·ΕΔ ▹ UIͷࠎΈʢσʔλؚ·ͳ͍ʣ ▹ SPAʢSingle Page ApplicationʣͰ ༻͞Ε͍ͯΔϞσϧ 12
App ShellϞσϧ 13 ʲApp Shellʳ • πʔϧόʔʢϔομʣ • φϏήʔγϣϯόʔʢϑολʣ ʲσʔλʳ
• ίϯςϯπ ࣸਅɺURLɺςΩετɺetc.
App Shell+Service Worker ▹ App ShellΛ࠷ॳͷಡΈࠐΈͰΩϟ ογϡɻҎޙΩϟογϡ͔Βͷߴ ͳಡΈࠐΈɻ ▹ UI͕ॠ࣌ʹදࣔ͞ΕɺωΠςΟϒΞ
ϓϦͷΑ͏ͳ༻ײɻ ▹ ඞཁͳσʔλΛඞཁͳ࣌ʹऔಘɾΩ ϟογϡɻ 14
͓͞Β͍ ▹ PWAͱʁ ▹ ωΠςΟϒΞϓϦͷΑ͏ͳUXΛ࣮ݱ͢ΔWEBΞ ϓϦ ▹ PWAͷಛ ▹ ΦϑϥΠϯͰ͑ͯɺಡΈࠐΈ͕ߴͰɺϓ
ογϡ௨ૹΕΔ ▹ App ShellϞσϧ ▹ UIͷࠎ֨ΛΩϟογϡ͠ɺίϯςϯπඞཁͳ λΠϛϯάͰωοτϫʔΫܦ༝Ͱऔಘ 15
END