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
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
140
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
230
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
210
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
160
株式会社 Sun terras カンパニーデック
sunterras
0
270
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
520
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
500
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
150
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
160
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
210
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
1k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Typedesign – Prime Four
hannesfritz
42
2.8k
Docker and Python
trallard
46
3.6k
For a Future-Friendly Web
brad_frost
180
9.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Fireside Chat
paigeccino
40
3.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
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͍͍Ͷʂ
ͦΜͳʹ͘͠ͳͦ͞͏
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ