Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Nuxt.jsで始めるPWA
takanorip
December 21, 2017
Technology
1
4.6k
Nuxt.jsで始めるPWA
takanorip
December 21, 2017
Tweet
Share
More Decks by takanorip
See All by takanorip
ソフトウェアエンジニアの教養を養う本
takanorip
1
13k
共創するためのデザイン批評
takanorip
7
3.2k
Figmaプラグイン 開発のすゝめ
takanorip
0
170
Headless Components Design
takanorip
0
39
10分で理解する HTML Modules
takanorip
1
400
Polymer Project 2020
takanorip
1
120
技術とデザインの間
takanorip
0
1.3k
Color in Interface Experience
takanorip
1
89
ウェブフォント今昔物語
takanorip
5
3.6k
Other Decks in Technology
See All in Technology
Kubernetesの上に作る、統一されたマイクロサービス運用体験
tkuchiki
1
1.2k
AI Company
shurain
0
490
AWS CLI入門_20220513
suzakiyoshito
0
4k
事業の成長と共に歩む、ABEMA SRE探求の歴史 / SRE-Next 2022
nagaa052
0
430
AWS ChatbotでEC2インスタンスを 起動できるようにした
iwamot
0
170
Spotify物理コントローラーがほしい
miso
0
170
街じゅうを"駅前化"する電動マイクロモビリティのシェアサービス「LUUP」のIoTとSRE
0gm
1
940
How We Foster Reliability in Diversity
nari_ex
PRO
10
3.1k
數據的多重宇宙 @ LINE Taiwan
line_developers_tw
PRO
0
730
tfcon-2022-cpp
cpp
5
5.2k
プログラミング未経験の学生をエンジニアにしてきたノウハウを公開
shinofumijp
0
140
一人から始めるプロダクトSRE / How to start SRE in a product team, all by yourself
vtryo
4
2.9k
Featured
See All Featured
Visualization
eitanlees
124
11k
Debugging Ruby Performance
tmm1
65
10k
What’s in a name? Adding method to the madness
productmarketing
11
1.5k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.6k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Scaling GitHub
holman
451
140k
Building Applications with DynamoDB
mza
83
4.6k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
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"Λಋೖ͍ͯ͜͠͏ʂ
ྑ͍͓Λʂ