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
180
PWA基礎_3
gyarasu
0
160
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.7k
Other Decks in Technology
See All in Technology
テストを軸にした生き残り術
kworkdev
PRO
0
190
Flutterでキャッチしないエラーはどこに行く
taiju59
0
220
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
9
2.9k
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
180
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
310
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
860
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
210
2025年夏 コーディングエージェントを統べる者
nwiizo
0
130
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
250
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
220
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cult of Friendly URLs
andyhume
79
6.6k
A Tale of Four Properties
chriscoyier
160
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
It's Worth the Effort
3n
187
28k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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