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
54
Firebase Cloud Messaging のベストプラクティス を、探している
gyarasu
1
2.8k
RESTful Firebase with Vue.js
gyarasu
1
430
Next.jsではじめるPWA
gyarasu
2
1.6k
doda AIジョブサーチ PWAとパフォーマンスの話
gyarasu
0
1.7k
副業時代のプロジェクトマネジメント
gyarasu
3
2.9k
PWA基礎_2
gyarasu
0
180
PWA基礎_3
gyarasu
0
160
フロントエンドエンジニア (実稼働まで) ひとりでできるもん
gyarasu
0
2.6k
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
25k
Contract One Dev Group 紹介資料
sansan33
PRO
0
6.1k
“⾞が通れるほど⼤きな”セキュリティーホールを抑えながらログインしたい
taiseiue
0
160
從開發到架構設計的可觀測性實踐
philipz
0
160
単一Gitリポジトリから独立しました
lycorptech_jp
PRO
0
260
カンファレンスのつくりかた / The Conference Code: What Makes It All Work
tomzoh
8
980
会社員しながら本を書いてきた知見の共有
sat
PRO
3
700
Houtou.pm #1
papix
0
920
AIの電力問題を概観する
rmaruy
1
230
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
12k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
障害を回避するHttpClient再入門 / Avoiding Failures HttpClient Reintroduction
uskey512
1
350
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Statistics for Hackers
jakevdp
799
220k
Code Reviewing Like a Champion
maltzj
523
40k
RailsConf 2023
tenderlove
30
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Being A Developer After 40
akosma
91
590k
Gamification - CAS2011
davidbonilla
81
5.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
850
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