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
2.1k
モバイルネイティブアプリに代わる存在!?初めての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.6k
Other Decks in Programming
See All in Programming
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
340
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
160
CSC305 Lecture 05
javiergs
PRO
0
220
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
32k
Introduce Hono CLI
yusukebe
5
2.1k
Cursorハンズオン実践!
eltociear
2
1.1k
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
Claude Agent SDK を使ってみよう
hyshu
0
890
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
2
520
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
232
18k
A Tale of Four Properties
chriscoyier
161
23k
We Have a Design System, Now What?
morganepeng
53
7.8k
Navigating Team Friction
lara
190
15k
BBQ
matthewcrist
89
9.8k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Leading Effective Engineering Teams in the AI Era
addyosmani
6
440
4 Signs Your Business is Dying
shpigford
185
22k
Designing Experiences People Love
moore
142
24k
Automating Front-end Workflow
addyosmani
1371
200k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
How to train your dragon (web standard)
notwaldorf
97
6.3k
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͍͍Ͷʂ
ͦΜͳʹ͘͠ͳͦ͞͏
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ