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.1k
Nuxt.jsから始めるPWA生活
gunmaweb 35 LT PWAネタ
thori
June 01, 2019
Tweet
Share
More Decks by thori
See All by thori
AIとプロダクトエンジニア
t_pori418
0
90
WebAPIのPATCHについて
t_pori418
0
210
AIの言う通りにやったら Webアプリが作れるのか試してみた (ChatGPT)
t_pori418
0
1.1k
AWSにおけるアカウント/ユーザーとは何かをなんとなく理解する
t_pori418
0
370
Markdownで登壇資料を作りたい
t_pori418
0
450
GitHub Projectsのみでプロダクト開発を管理する
t_pori418
0
340
10分でAmazon API GatewayにOpen API 3.0のAPI仕様をインポートする
t_pori418
1
1.1k
AWSサーバーレスアーキテクチャでWebサイトを構築してみた
t_pori418
0
810
Vue.jsによるSPAのDDDについて考える(導入編)
t_pori418
0
3.5k
Other Decks in Technology
See All in Technology
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
10k
VCpp Link and Library - C++ breaktime 2025 Summer
harukasao
0
240
20250623 Findy Lunch LT Brown
3150
0
840
IIWレポートからみるID業界で話題のMCP
fujie
0
770
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
130
Definition of Done
kawaguti
PRO
6
480
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
250
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
180
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
1
510
解析の定理証明実践@Lean 4
dec9ue
0
170
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
200
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Faster Mobile Websites
deanohume
307
31k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Into the Great Unknown - MozCon
thekraken
39
1.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Producing Creativity
orderedlist
PRO
346
40k
Site-Speed That Sticks
csswizardry
10
660
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Λ ࢝ΊΒΕΔͷͰ ࢼͨ͜͠ͱͳ͍ํੋඇ!!