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
Search
tsukun
July 08, 2018
Programming
1
1.8k
モバイルネイティブアプリに代わる存在!?初めてのPWA
HTML5 APP CONFERENCE 2018で使用
・PWAと出会ったきっかけ
・PWAとは?
・PWAを作ってみる
tsukun
July 08, 2018
Tweet
Share
More Decks by tsukun
See All by tsukun
PWAって何?
kasanomo
0
2.4k
Other Decks in Programming
See All in Programming
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
110
Enhancing Applications with Accessibility API
kishikawakatsumi
3
990
Honoとhtmx
yusukebe
6
1.2k
Why 1 + 1 = 2 in Swift?
1plus4
1
250
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
770
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
2.2k
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.5k
object-oriented-conference-2024
fuwasegu
6
1.9k
実践!RDRAを活用した既存システムの仕様変更 / Specification Changes in Existing Systems Utilizing RDRA
imamotohikaru
0
2.7k
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
GraphQLとの向き合い方2022年版
quramy
28
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
58
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Designing Experiences People Love
moore
135
23k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
Done Done
chrislema
178
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
How GitHub (no longer) Works
holman
301
140k
Transcript
ϞόΠϧωΠςΟϒΞϓϦʹ มΘΔଘࡏʂʁॳΊͯͷ18" גࣜձࣾιχοΫΨʔσϯຊ࢘
ײ࣭ͪ͜Β http://bit.ly/2J131L2
ࣗݾհ • ຊ ࢘ʢͷͱ ͔ͭ͞ʣ • גࣜձࣾιχοΫΨʔσϯ • ฌݿݝ໌ੴࢢग़ʢ໌ੴͰϦϞʔτۈʣ •
ؒ1/3ΛՈͰա͝͞ͳ͍ • 24ࡀ
ࠓ͍ͨ͜͠ͱ • PWA͍͍Ͷʂ • ࡞ΔͷͦΜͳʹ͘͠ͳ͍
ॳ৺ऀϨϕϧ
ϓϩάϥϛϯάܦݧ ̍ͪΐͬͱ
HTMLͬͯԿʁ Rubyͬͯ͋ͷๅੴͷʁ
ֶ̍ؒश
WebΞϓϦʢͬΆ͍ͷʣ Λ࡞ΕΔΑ͏ʹ
ࣅͨΑ͏ͳϊϦͰ ϞόΠϧΞϓϦ͍͚ΔΖ ʢ҆ʣ
ίʔυผͳͷ…ʂʁ ( ƅЧƅʀ))ŜƄŦŜƄŦ
…͠Β͘໎ɻ
༑ୡʮ̏ͭͱҰؾʹ࡞ΕΔ ํ๏͕͋ΔͰʯ(ʉ㲆ʉ)v
PWAͳΒ…ʁ
PWAͱʁ
Progressive Web App ʢਐาతͳɺֵ৽తͳʣ
ωΠςΟϒΞϓϦͬΆ͍ ΣϒΞϓϦ
None
৽͍ٕ͠ज़͕ͨ͘͞Μ ͱ͍͏Θ͚Ͱͳ͍
ΞϓϦͰͰ͖Δ͜ͱΛ WebͰ࣮ݱՄೳʹ
Կͱ͋Ε৮ͬͯΈΑ͏
Twitter Lite 1. εϚϗͷϒϥβͰTwitterΛ։͘ 2. ʮϗʔϜը໘ʹՃʯ 3. ϗʔϜը໘͔ΒΞΫηεˠεϓϥογϡը໘
Twitter Lite • Push௨ • ΦϑϥΠϯͰͷ༻ • ωΠςΟϒΞϓϦͷػೳͷ΄ͱΜͲΛΧόʔ • ʮϗʔϜʹՃʯόφʔ
ྑͦ͞͏
None
݁ՌʢҎલͷϞόΠϧ൛ͱൺֱʣ • ηογϣϯຖͷϖʔδӾཡ65%↑ • ؼ20%↓ • ߘ75%↑ ϗʔϜը໘͔ΒΞϓϦͬΆ͘͏Α͏ʹͳͬͨ
ָఱϨγϐ 1Ϣʔβʔ͋ͨΓͷPV3.1ഒˢ
ͻΐͬͱ͢Δͱ…ʁ
PWA͍͍Ͷʂ
Ͱ… ৭ʑ໘ष͍Μ͡Όͳ͍ͷʁ
ࢲͰͰ͖ͨ
ͲΕ͘Β͍؆୯͔ʁ
ࠓ͔ΒPWAΛ࡞Δ༷ࢠΛ ͓ݟͤ͠·͢ʂʂʂ
ͱࢥ͚ͬͨͲɺ ා͍ͷͰಈըͰɻ
Progressive Web App Checklist • Google͕ఏএ • PWAͱͯ͠ຬ͖߲ͨ͢ • BaselineͱExemplaryͷ̎ஈ֊
✔ αΠτ͕ HTTPS Ͱఏڙ͞Ε͍ͯΔ͜ͱ ✔ λϒϨοτɾϞόΠϧʹ࠷దԽ͞Ε͍ͯΔ͜ ͱ ✔ ։࢝ͷURLΦϑϥΠϯͰϩʔυͰ͖ Δ͜ͱ
✔ ϗʔϜը໘ʹՃ͢ΔͨΊͷϝλσʔλ͕ఏ ڙ͞Ε͍ͯΔ͜ͱ
✔ 3G ճઢͰߴʹಡΈࠐΊΔ͜ͱ (10 ඵҎ ʹૢ࡞Մೳ) ✔ ΫϩεϒϥβͰಈ͘͜ͱ ✔ ϖʔδભҠ͕ωοτϫʔΫʹΑͬͯϒϩοΫ
͞Ε͍ͯΔΑ͏ʹݟ͑ͳ͍͜ͱ ✔ ͦΕͧΕͷϖʔδ͕ URL Λ࣋ͭ͜ͱ
Lighthouse • Google͕ఏڙ • WebΞϓϦͷ࣭είΞΛࢉग़͢Δπʔϧ • Baselineͷ߲ΛνΣοΫ
None
ࠓճ࡞Δͷ
Service Worker • ϒϥβ͕WebΞϓϦͱผʹόοΫάϥ ϯυͰ࣮ߦ͢ΔεΫϦϓτ • APIͱͷΈ߹ΘͤͰΩϟογϡɺPush௨ͳ ͲΛ࣮ݱ
App Manifest • ΞϓϦࣗͷઃఆϑΝΠϧ • ΞϓϦͷ໊લΞΠίϯΛઃఆ • htmlͰಡΈࠐΈ
͏ͷ • Firebase - BaaSʢࠓճHostingͷΈ༻ʣ • Vue.js - JSϑϨʔϜϫʔΫ •
Vuetify.js - ίϯϙʔωϯτϑϨʔϜϫʔΫʢࠓ ճPWA༻ͷςϯϓϨʔτΛ༻ʣ
'JSFCBTF )PTUJOH 4FSWJDF 8PSLFS 7VFUJGZ "QQ .BOJGFTU 0UIFST ᶃ ᶄ
None
PWA͕Ͱ͖ͨʂ ʢhttps://goo.gl/VhzC5mʣ
̍ʣεϓϥογϡ ̎ʣόφʔʢChromeʣ ̏ʣΦϑϥΠϯ
ͦΜͳʹ͘͠ͳͦ͞͏ ʢ̔Ͱ͜͜·ͰͰ͖ͨʣ
·ͱΊ
PWA͍͍Ͷʂ
ͦΜͳʹ͘͠ͳͦ͞͏
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ