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
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
460
Bulletproof Design System with TypeScript
takanorip
7
4.1k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
930
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Technology
See All in Technology
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.1k
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
420
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
490
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
230
AIをプライベートや業務で使ってみよう!効果的な認定資格の活かし方
fukazawashun
0
100
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
250
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
230
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
250
2025年夏 コーディングエージェントを統べる者
nwiizo
0
180
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
820
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
320
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Scaling GitHub
holman
463
140k
Designing for Performance
lara
610
69k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Visualization
eitanlees
148
16k
Navigating Team Friction
lara
189
15k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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"Λಋೖ͍ͯ͜͠͏ʂ
ྑ͍͓Λʂ