Nuxt.jsで始めるPWA

Transcript

1. /VYUKTͰ࢝ΊΔ18" 5BLBOPSJ
   0LJ
   !XFKT
   
2. ࣗݾ঺հ w େ໦ଚلʢΦΦΩλΧϊϦ
   
   !UBLBOPSJQʣ
   w ϑϩϯτΤϯυΤϯδχΞ
   w גࣜձࣾεϚʔτυϥΠϒ
   w 3FBDUɺ7VFɺ1PMZNFSɺ΢Σϒ੍࡞શൠ
   w 1PMZNFS+BQBO
   ຋༁νʔϜ
   w ࠓ೥ΛৼΓฦͬͯɿ
 ڈ೥͔Βମॏ͕LH͔ͪ͘૿͑ͨͷͰےτϨ͕Μ͹Δ
3. ౰ॳͷλΠτϧ
   ʮ7VFKTͰ࢝ΊΔ18"ʯ
4. IUUQTRJJUBDPNHZBSBTVJUFNT GFEDBFEF
6. ·Δ͔ͿΓʘ ?P? ʗ
7. ؾΛऔΓ௚ͯ͠
8. /VYUKTͰ࢝ΊΔ18"
9. 18"
10. 18" w 1SPHSFTTJWF
    8FC
    "QQMJDBUJPOͷུ
    w 8FC͚ͩͲωΠςΟϒʹ͍ۙ69ΛఏڙՄೳ
    w ϓογϡ௨஌ɺΦϑϥΠϯରԠɺϗʔϜը໘ʹ௥Ճͱ͔
    w ৄ͘͠͸(PPHMF
    %FWFMPQFSTͱ͔ࢀর
    w ߏ੒ٕज़
    w -JHIUIPVTF
    w 4FSWJDF
    8PSLFS
    w $BDIF
    4UPSBHF
    w *OEFYFE%#
11. 4FSWJDF
    8PSLFS "QQ 4FSWJDF
    8PSLFS OFUXPSL $BDIF
12. /VYUKT
13. /VYUKT w Ϣχόʔαϧ
    7VFKT
    ΞϓϦέʔγϣϯ
    w 7VFKTͰ443͢ΔͨΊͷϑϨʔϜϫʔΫ
    w ؀ڥߏஙͱ͔ϧʔςΟϯά΋উखʹ͍͍ײ͡ʹ͠ͱ͍ͯ ͘ΕΔ
    w 443͢ΔͨΊͷίʔυΛੜ੒ͯ͘͠ΕΔͷͰɺ
 ΞϓϦέʔγϣϯຊମͷ։ൃʹूதͰ͖Δ
    w 73$
14. /VYUKTʹ18"Λಋೖ͢Δ৔߹ w QXBNPEVMFΛ࢖͏
    w IUUQTHJUIVCDPNOVYUDPNNVOJUZQXBNPEVMF
    w ϥΠϒϥϦΛ/VYU༻ʹϞδϡʔϧԽͨ͠΋ͷ
    w .BOJGFTU
    .PEVMF
    w 8PSLCPY
    .PEVMF
    w *DPO
    .PEVMF
    w .FUB
    .PEVMF
    w 0OF4JHOBM
    .PEVMF
15. ಋೖ
16. yarn add @nuxtjs/pwa
17. OVYUDPOpHKT { modules: [ '@nuxtjs/pwa' ], // デフォルトだとdevで使えないので設定を追加 workbox: { dev: true }, }
18. HJUJHOPSF sw.*
19. ʂʂ؆୯ʂʂ
20. 0OF
    4JHOBM
21. 0OF
    4JHOBM w ϓογϡ௨஌ʹಛԽͨ͠αʔϏε
    w ϞόΠϧ"QQ͚ͩͰͳ͘8FC1VTIʹ΋ରԠ͍ͯ͠Δ
    w ೔ຊޠ৘ใগͳΊ
    w 6CFSͱ͔΋࢖ͬͯΔΒ͍͠
22. 0OF
    4JHOBMͷొ࿥ϑϩʔ͸লུ
    *%͕ඞཁͳͷͰίϐΔ
23. yarn add @nuxtjs/onesignal
24. OVYUDPOpHKT // pwa-moduleの前に読み込む modules: [ '@nuxtjs/onesignal', '@nuxtjs/pwa' ], workbox: { dev: true },
25. OVYUDPOpHKT oneSignal: { init: { appId: ‘Your App ID’, allowLocalhostAsSecureOrigin: true, // 通知許可を求めるダイアログを最初に出さない autoRegister: false, welcomeNotification: { disable: true }, notifyButton: { enable: true } } },
26. σϑΥϧτͷ௨஌ઃఆμΠΞϩάΛ ग़͢લʹɺ֬ೝΛ͸͞·ͳ͍ͱͩΊ
27. ϓογϡ௨஌Λड͚औͬͨ
    λΠϛϯάͰൃՐ͢ΔΠϕϯτ΋
    ͋Δ
28. 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.') } }) })
29. 1VTI௨஌͸༻๏༻ྔΛकͬͯ
    ࢖͍·͠ΐ͏ʂʂ
30. %&.0
31. ·ͱΊ w /VYUKTͳΒ18"Λಋೖ͢Δͷ΋؆୯ʹͰ͖Δʂ
    w ϓογϡ௨஌΋͙͢Ͱ͖Δ
    w /VYUKTͰ18"Λಋೖ͍ͯ͜͠͏ʂ
32. ྑ͍͓೥Λʂ