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
120
AIとプロダクトエンジニア
t_pori418
0
110
WebAPIのPATCHについて
t_pori418
0
220
AIの言う通りにやったら Webアプリが作れるのか試してみた (ChatGPT)
t_pori418
0
1.1k
AWSにおけるアカウント/ユーザーとは何かをなんとなく理解する
t_pori418
0
380
Markdownで登壇資料を作りたい
t_pori418
0
480
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
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
540
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
150
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.2k
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
120
パフォーマンスチューニングのために普段からできること/Performance Tuning: Daily Practices
fujiwara3
2
140
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
690
AI時代の発信活動 ~技術者として認知してもらうための発信法~ / 20251028 Masaki Okuda
shift_evolve
PRO
1
120
書籍『実践 Apache Iceberg』の歩き方
ishikawa_satoru
0
220
DSPy入門
tomehirata
3
480
RemoteFunctionを使ったコロケーション
mkazutaka
1
140
20251027_マルチエージェントとは
almondo_event
1
470
serverless team topology
_kensh
3
240
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Designing Experiences People Love
moore
142
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Facilitating Awesome Meetings
lara
57
6.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Context Engineering - Making Every Token Count
addyosmani
8
310
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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Λ ࢝ΊΒΕΔͷͰ ࢼͨ͜͠ͱͳ͍ํੋඇ!!