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
1k
Nuxt.jsから始めるPWA生活
gunmaweb 35 LT PWAネタ
thori
June 01, 2019
Tweet
Share
More Decks by thori
See All by thori
WebAPIのPATCHについて
t_pori418
0
160
AIの言う通りにやったら Webアプリが作れるのか試してみた (ChatGPT)
t_pori418
0
1k
AWSにおけるアカウント/ユーザーとは何かをなんとなく理解する
t_pori418
0
340
Markdownで登壇資料を作りたい
t_pori418
0
390
GitHub Projectsのみでプロダクト開発を管理する
t_pori418
0
320
10分でAmazon API GatewayにOpen API 3.0のAPI仕様をインポートする
t_pori418
1
1k
AWSサーバーレスアーキテクチャでWebサイトを構築してみた
t_pori418
0
730
Vue.jsによるSPAのDDDについて考える(導入編)
t_pori418
0
3.3k
Other Decks in Technology
See All in Technology
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
28k
利きプロセススケジューラ
sat
PRO
4
2.6k
Intuneお役立ちツールのご紹介
sukank
3
730
元旅行会社の情シス部員が教えるおすすめなre:Inventへの行き方 / What is the most efficient way to re:Invent
naospon
2
250
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
運用イベント対応への生成AIの活用 with Failure Analysis Assistant
suzukyz
0
200
QAEチームが辿った3年 ボクらが改善業務にスクラムを選んだワケ / 20241108_cloudsign_ques23
bengo4com
0
570
マルチモーダルデータ基盤の課題と観点
neonankiti
1
110
AWS⼊社という選択肢、⾒えていますか
iwamot
2
1.1k
SREの前に
nwiizo
11
2.6k
LINEヤフー株式会社における音声言語情報処理AI研究開発@SP/SLP研究会 2024.10.22
lycorptech_jp
PRO
2
270
Deno+JSRでパッケージを作って公開する
askua
0
110
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Why Our Code Smells
bkeepers
PRO
334
57k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Into the Great Unknown - MozCon
thekraken
32
1.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
15
2k
What's in a price? How to price your products and services
michaelherold
243
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Designing for Performance
lara
604
68k
Documentation Writing (for coders)
carmenintech
65
4.4k
Happy Clients
brianwarren
97
6.7k
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Λ ࢝ΊΒΕΔͷͰ ࢼͨ͜͠ͱͳ͍ํੋඇ!!