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
950
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
960
AWSにおけるアカウント/ユーザーとは何かをなんとなく理解する
t_pori418
0
320
Markdownで登壇資料を作りたい
t_pori418
0
370
GitHub Projectsのみでプロダクト開発を管理する
t_pori418
0
300
10分でAmazon API GatewayにOpen API 3.0のAPI仕様をインポートする
t_pori418
1
960
AWSサーバーレスアーキテクチャでWebサイトを構築してみた
t_pori418
0
660
Vue.jsによるSPAのDDDについて考える(導入編)
t_pori418
0
3.3k
Other Decks in Technology
See All in Technology
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
950
簡単に始めるSnowflakeの機械学習
nayuts
1
190
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
800
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
地理情報とAPIのトレンド
nagix
0
160
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Raft: Consensus for Rubyists
vanstee
134
6.5k
BBQ
matthewcrist
82
9k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Web Components: a chance to create the future
zenorocha
307
41k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Statistics for Hackers
jakevdp
792
220k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
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Λ ࢝ΊΒΕΔͷͰ ࢼͨ͜͠ͱͳ͍ํੋඇ!!