Nuxt.jsで始めるPWA

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
December 21, 2017

 Nuxt.jsで始めるPWA

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

December 21, 2017
Tweet

Transcript

  1. /VYUKTͰ࢝ΊΔ18" 5BLBOPSJ0LJ !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 1SPHSFTTJWF8FC"QQMJDBUJPOͷུ w 8FC͚ͩͲωΠςΟϒʹ͍ۙ69ΛఏڙՄೳ w ϓογϡ௨஌ɺΦϑϥΠϯରԠɺϗʔϜը໘ʹ௥Ճͱ͔ w ৄ͘͠͸(PPHMF%FWFMPQFSTͱ͔ࢀর w

    ߏ੒ٕज़ w -JHIUIPVTF w 4FSWJDF8PSLFS w $BDIF4UPSBHF w *OEFYFE%#
  11. 4FSWJDF8PSLFS "QQ 4FSWJDF8PSLFS 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. 0OF4JHOBM

  21. 0OF4JHOBM w ϓογϡ௨஌ʹಛԽͨ͠αʔϏε w ϞόΠϧ"QQ͚ͩͰͳ͘8FC1VTIʹ΋ରԠ͍ͯ͠Δ w ೔ຊޠ৘ใগͳΊ w 6CFSͱ͔΋࢖ͬͯΔΒ͍͠

  22. 0OF4JHOBMͷొ࿥ϑϩʔ͸লུ *%͕ඞཁͳͷͰίϐΔ

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