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

5. None

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. ྑ͍͓೥Λʂ