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
takanorip
December 21, 2017
Technology
1
5.3k
Nuxt.jsで始めるPWA
takanorip
December 21, 2017
Tweet
Share
More Decks by takanorip
See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
590
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
530
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
950
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
510
Ubieとアクセシビリティのこれからを考える
takanorip
0
480
Other Decks in Technology
See All in Technology
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
260
WEBサービスを成り立たせるAWSサービス
takano0131
1
190
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
Introdução a Service Mesh usando o Istio
aeciopires
1
250
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
1
400
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
140
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.7k
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
0
120
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
CoRL 2025 Survey
harukiabe
1
230
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
420
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
Featured
See All Featured
Designing for humans not robots
tammielis
254
26k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Pragmatic Product Professional
lauravandoore
36
7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
KATA
mclloyd
PRO
32
15k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Writing Fast Ruby
sferik
629
62k
Raft: Consensus for Rubyists
vanstee
140
7.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Facilitating Awesome Meetings
lara
56
6.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
/VYUKTͰ࢝ΊΔ18" 5BLBOPSJ0LJ !XFKT
ࣗݾհ w େଚلʢΦΦΩλΧϊϦ!UBLBOPSJQʣ w ϑϩϯτΤϯυΤϯδχΞ w גࣜձࣾεϚʔτυϥΠϒ w 3FBDUɺ7VFɺ1PMZNFSɺΣϒ੍࡞શൠ w
1PMZNFS+BQBO༁νʔϜ w ࠓΛৼΓฦͬͯɿ ڈ͔Βମॏ͕LH͔ͪ͘૿͑ͨͷͰےτϨ͕ΜΔ
ॳͷλΠτϧ ʮ7VFKTͰ࢝ΊΔ18"ʯ
IUUQTRJJUBDPNHZBSBTVJUFNT GFEDBFEF
None
·Δ͔ͿΓʘ ?P? ʗ
ؾΛऔΓͯ͠
/VYUKTͰ࢝ΊΔ18"
18"
18" w 1SPHSFTTJWF8FC"QQMJDBUJPOͷུ w 8FC͚ͩͲωΠςΟϒʹ͍ۙ69ΛఏڙՄೳ w ϓογϡ௨ɺΦϑϥΠϯରԠɺϗʔϜը໘ʹՃͱ͔ w ৄ͘͠(PPHMF%FWFMPQFSTͱ͔ࢀর w
ߏٕज़ w -JHIUIPVTF w 4FSWJDF8PSLFS w $BDIF4UPSBHF w *OEFYFE%#
4FSWJDF8PSLFS "QQ 4FSWJDF8PSLFS OFUXPSL $BDIF
/VYUKT
/VYUKT w Ϣχόʔαϧ7VFKTΞϓϦέʔγϣϯ w 7VFKTͰ443͢ΔͨΊͷϑϨʔϜϫʔΫ w ڥߏஙͱ͔ϧʔςΟϯάউखʹ͍͍ײ͡ʹ͠ͱ͍ͯ ͘ΕΔ w 443͢ΔͨΊͷίʔυΛੜͯ͘͠ΕΔͷͰɺ
ΞϓϦέʔγϣϯຊମͷ։ൃʹूதͰ͖Δ w 73$
/VYUKTʹ18"Λಋೖ͢Δ߹ w QXBNPEVMFΛ͏ w IUUQTHJUIVCDPNOVYUDPNNVOJUZQXBNPEVMF w ϥΠϒϥϦΛ/VYU༻ʹϞδϡʔϧԽͨ͠ͷ w .BOJGFTU.PEVMF w
8PSLCPY.PEVMF w *DPO.PEVMF w .FUB.PEVMF w 0OF4JHOBM.PEVMF
ಋೖ
yarn add @nuxtjs/pwa
OVYUDPOpHKT { modules: [ '@nuxtjs/pwa' ], // デフォルトだとdevで使えないので設定を追加 workbox: {
dev: true }, }
HJUJHOPSF sw.*
ʂʂ؆୯ʂʂ
0OF4JHOBM
0OF4JHOBM w ϓογϡ௨ʹಛԽͨ͠αʔϏε w ϞόΠϧ"QQ͚ͩͰͳ͘8FC1VTIʹରԠ͍ͯ͠Δ w ຊޠใগͳΊ w 6CFSͱ͔ͬͯΔΒ͍͠
0OF4JHOBMͷొϑϩʔলུ *%͕ඞཁͳͷͰίϐΔ
yarn add @nuxtjs/onesignal
OVYUDPOpHKT // pwa-moduleの前に読み込む modules: [ '@nuxtjs/onesignal', '@nuxtjs/pwa' ], workbox: {
dev: true },
OVYUDPOpHKT oneSignal: { init: { appId: ‘Your App ID’, allowLocalhostAsSecureOrigin:
true, // 通知許可を求めるダイアログを最初に出さない autoRegister: false, welcomeNotification: { disable: true }, notifyButton: { enable: true } } },
σϑΥϧτͷ௨ઃఆμΠΞϩάΛ ग़͢લʹɺ֬ೝΛ͞·ͳ͍ͱͩΊ
ϓογϡ௨Λड͚औͬͨ λΠϛϯάͰൃՐ͢ΔΠϕϯτ ͋Δ
OVYUDPOpHKT // Inside page components this.$OneSignal.push(() => { this.$OneSignal.isPushNotificationsEnabled((isEnabled) =>
{ if (isEnabled) { console.log('Push notifications are enabled!') } else { console.log('Push notifications are not enabled yet.') } }) })
1VTI௨༻๏༻ྔΛकͬͯ ͍·͠ΐ͏ʂʂ
%&.0
·ͱΊ w /VYUKTͳΒ18"Λಋೖ͢Δͷ؆୯ʹͰ͖Δʂ w ϓογϡ௨͙͢Ͱ͖Δ w /VYUKTͰ18"Λಋೖ͍ͯ͜͠͏ʂ
ྑ͍͓Λʂ