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.2k
Nuxt.jsで始めるPWA
takanorip
December 21, 2017
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
100
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
790
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Technology
See All in Technology
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.6k
AIエージェント開発のノウハウと課題
pharma_x_tech
8
4.6k
困難を「一般解」で解く
fujiwara3
7
1.7k
IAMのマニアックな話2025
nrinetcom
PRO
6
1.4k
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.9k
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
180
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
520
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
クラウド食堂とは?
hiyanger
0
130
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
290
AIエージェント元年@日本生成AIユーザ会
shukob
1
250
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Designing Experiences People Love
moore
140
23k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
How STYLIGHT went responsive
nonsquared
99
5.4k
For a Future-Friendly Web
brad_frost
176
9.6k
Rails Girls Zürich Keynote
gr2m
94
13k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Automating Front-end Workflow
addyosmani
1369
200k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
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"Λಋೖ͍ͯ͜͠͏ʂ
ྑ͍͓Λʂ