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
Nuxt.jsから始めるPWA生活
Search
thori
June 01, 2019
Technology
0
1.2k
Nuxt.jsから始めるPWA生活
gunmaweb 35 LT PWAネタ
thori
June 01, 2019
Tweet
Share
More Decks by thori
See All by thori
AIと開発する話をみんなとシェアしたい
t_pori418
1
100
AIとプロダクトエンジニア
t_pori418
0
110
WebAPIのPATCHについて
t_pori418
0
220
AIの言う通りにやったら Webアプリが作れるのか試してみた (ChatGPT)
t_pori418
0
1.1k
AWSにおけるアカウント/ユーザーとは何かをなんとなく理解する
t_pori418
0
370
Markdownで登壇資料を作りたい
t_pori418
0
470
GitHub Projectsのみでプロダクト開発を管理する
t_pori418
0
350
10分でAmazon API GatewayにOpen API 3.0のAPI仕様をインポートする
t_pori418
1
1.2k
AWSサーバーレスアーキテクチャでWebサイトを構築してみた
t_pori418
0
850
Other Decks in Technology
See All in Technology
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
170
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
690
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
110
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
240
Uncle Bobの「プロフェッショナリズムへの期待」から学ぶプロの覚悟
nakasho
2
100
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
ondfisk
0
100
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
170
自動テストのコストと向き合ってみた
qa
0
210
Developer Advocate / Community Managerなるには?
tsho
0
110
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
5
740
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
120
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
300
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Fireside Chat
paigeccino
40
3.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Transcript
Nuxt.js͔Β࢝ΊΔPWAੜ׆ Gunma.web #35 Takashi Hori
ɾງ وࢺɹɹ@t_pori418 ɾ܈അݝࡏॅ⁵౦ژ ɾWebΤϯδχΞ ɾ͘ઙ͘ͳΜͰΓ·͢ ɾγεςϜܥ, WebαʔϏεܥ
Έͳ͞ΜPWAɺͬͯ·͔͢ʁ
͋ʔPWAͶɺͬͯΔͬͯΔ ࠓྲྀߦͬͯΔΑͶ 18"ͬͯԿ
PWAͱ
Progressive Web Apps Google͕ఏএ͢ΔΣϒΞϓϦͰ UXΛ্ͤ͞ΔͨΊͷࢦɾΈ ωΠςΟϒͱಉͷମݧΛ༩͑ΔWebΞϓϦέʔγϣϯ web push͕༗໊Ͱ͕͢ɺPWAͷཁૉͷҰͭ
͋ʔ…ಥવҟੈքసੜͯ͠ ಛघೳྗΛ༩͑ΒΕͯ PWA࣮ͷୡਓʹͳΒͳ͍͔ͳʔ
(ਆɾωɾ)ʻྗΛ༩͑Α͏
(ਆɾωɾ)ͭNuxt.js+PWA modules
͏͓͓͓͓͓
†† https://elated-knuth-617fed.netlify.com/
࣮ࡍʹ͍Ζ͍Ζઃఆ͠·͢
manifest.json Service Worker Cache API Web push
·ͣNuxt.jsΛೖΕ·͢ $ yarn create nuxt-app <project-name>
ݱࡏͷόʔδϣϯͩͱPWAαϙʔτ͕બΔʂʂ
దʹ͜Μͳײ͡ʹ͠·ͨ͠
࠷ॳ͔Β@nuxtjs/pwa͕ೖͬͯ·͢Ͷʂ
manifest.json Service Worker Cache API Web push
جຊతʹnuxt.config.jsΛॻ͖͍͖ͯ͠·͢
ϗʔϜը໘ʹՃͰΞϓϦԽʂ
manifest.json Service Worker Cache API Web push
ࠓճ͓ࢼ͠ͳͷͰconfigͷΩϟογϡΛͬ͘͟Γઃఆ
Ωϟογϡͨ͋͠ͱαΫαΫʂ ϓϦΩϟογϡͰΦϑϥΠϯಈ࡞ʂ
manifest.json Service Worker Cache API Web push
Web push݁ߏ͍Ζ͍ΖΔ͜ͱ ଟ͍ͷͰ·ͨࠓ iOSରԠͯ͠ͳ͍͠…
PWAͰ͖ͨ
༨ஊ: iOSͭΒ͍
iOS12.2·Ͱ PWAԽͨ͠ΞϓϦɺϗʔϜը໘ʹΔͱ࣍։͍ͨ࣌ ϧʔτʹڧ੍ભҠ(reload)
iOS12.2͔Β ϧʔςΟϯάใΛ࣋ͭΑ͏ʹͳͬͨʂ
ͱɺࢥ͍͖
Ωϟογϡͷόʔδϣϯใ(id)Λ ߋ৽ͯ͠։͖ͨ࣌͠ʹ ΞϓϦέʔγϣϯ͕࠷৽Խ͞Εͳ͍
࠷৽൛iOSͰ͜ͷ͋Δ? ղܾࡦ͋Δํใ͓͓ͪͯ͠Γ·͢
·ͱΊ
ಥવҟೳʹ֮Ί·ͤΜ͕ ؆୯ͳͱ͜Ζ͔ΒPWAΛ ࢝ΊΒΕΔͷͰ ࢼͨ͜͠ͱͳ͍ํੋඇ!!