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
260
PWA基礎_1
- PWAとは
- App Shell Model
に関してまとめてあります。
gyarasu
November 13, 2018
Tweet
Share
More Decks by gyarasu
See All by gyarasu
QAエンジニア組織立ち上げはじめの一歩
gyarasu
0
23
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
1.8k
RESTful Firebase with Vue.js
gyarasu
1
360
Next.jsではじめるPWA
gyarasu
2
1.4k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.4k
副業時代のプロジェクトマネジメント
gyarasu
3
2.7k
PWA基礎_2
gyarasu
0
160
PWA基礎_3
gyarasu
0
140
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.4k
Other Decks in Technology
See All in Technology
On Your Data を超えていく!
hirotomotaguchi
2
690
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
220
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
930
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
900
データベース02: データベースの概念
trycycle
0
160
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
240
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
2.6k
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
330
JAWS-UG Bedrock Claude Night
yamahiro
3
610
JSON攻略法.pdf
miyakemito
8
5.1k
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
Featured
See All Featured
Docker and Python
trallard
34
2.7k
Ruby is Unlike a Banana
tanoku
96
10k
Become a Pro
speakerdeck
PRO
11
4.5k
Practical Orchestrator
shlominoach
182
9.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Bash Introduction
62gerente
604
210k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Agile that works and the tools we love
rasmusluckow
325
20k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
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