Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.jsとFirebaseで爆速でPWA対応Webアプリを開発した話

TakeshiNishi
December 08, 2018

 Nuxt.jsとFirebaseで爆速でPWA対応Webアプリを開発した話

フロントエンドカンファレンス福岡の発表スライドです。
NuxtとFirebaseを使って、PWA対応のリアルタイムWebチャットアプリケーションを開発した話をします。

TakeshiNishi

December 08, 2018
Tweet

More Decks by TakeshiNishi

Other Decks in Programming

Transcript

  1. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶄϦΞϧλΠϜσʔλϕʔε$MPVE'JSFTUPSF const messagesRef = db.collection(‘messages’) export const state =

    () => ({ messages: [], }) await bindFirebaseRef( 'messages', messagesRef .where('pairUid', '==', pairUid) .orderBy('time', 'desc') )  σʔλݕࡧ
  2. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶅετϨʔδ$MPVE4UPSBHF const storage = firebase.storage() const storageRef = storage.ref()

    const avatarRef = storageRef .child('avatar/' + data.name) await avatarRef.put(data.file)  ετϨʔδʹϑΝΠϧΛอଘ
  3. /VYUKTͱ'JSFCBTFͷ࿈ܞ ᶅετϨʔδ$MPVE4UPSBHF const storage = firebase.storage() const storageRef = storage.ref()

    const avatarUrl = await storageRef .child('avatar/' + user.avatar) .getDownloadURL()  ετϨʔδͷϑΝΠϧΛμ΢ϯϩʔυ
  4. /VYUKTͰ18"ରԠ $ yarn add @nuxtjs/pwa --save  !OVYUKTQXBΛΠϯετʔϧ modules: [

    '@nuxtjs/dotenv', '@nuxtjs/pwa' ], manifest: { name: 'wacha', short_name: 'wacha', title: 'wacha', lang: 'ja', gcm_sender_id: '103953800507' //ݻఆ஋ },  OVYUDPOpHKTʹΞϓϦͷ৘ใΛ௥Ճ
  5. 0OF4JHOBMͰϓογϡ௨஌ modules: [ '@nuxtjs/dotenv', '@nuxtjs/onesignal', '@nuxtjs/pwa' ], oneSignal: { init:

    { appId: 'xxx-xxx-xxx-xxx-xxx', allowLocalhostAsSecureOrigin: true, welcomeNotification: { disable: true } } },  OVYUDPOpHKTʹ0OF4JHOBMͷ৘ใΛ௥Ճ
  6. 0OF4JHOBMͰϓογϡ௨஌ await this.$OneSignal.push([ 'sendTag', 'id', this.currentUser.uid, function(tagsSent) {} ]) 

    UBHΛઃఆʢಛఆͷϢʔβʔͷΈʹ௨஌͢ΔͨΊʣ bJE`ͱ͍͏໊લͷλάͰɺ ϩάΠϯதͷϢʔβʔͷVJEͷ஋Λઃఆ
  7. 0OF4JHOBMͰϓογϡ௨஌ const params = { method: 'post', url: 'https://onesignal.com/api/v1/notifications', headers:

    { 'Content-Type': 'application/json', Authorization: 'Basic zzzzzzzzzzzzzzzzzzzzzzzzz’ }, data: { app_id: 'xxx-xxx-xxx-xxx-xxx', headings: { ja: requestData.title }, contents: { ja: requestData.body }, tags: [{ key: 'id', relation: '=', value: requestData.uid }] } } axios(params)  UBHΛࢦఆͯ͠ಛఆͷϢʔβʔͷΈʹ௨஌ ˞ݕূ༻ΞϓϦͷͨΊɺΫϥΠΞϯτͰ"1*ݺग़࣮͠૷
  8. 'JSFCBTF࣮ࡍͲ͏ͳͷʁ wσʔλͷઃܭ͕େࣄ ϚΠάϨʔγϣϯେม ઌ΄ͲͷΞϓϦͷྫ "͞Μͱ#͞ΜͷϖΞͷτʔΫΛ Ұཡදࣔ͢ΔͨΊɺ ɾ"͞ΜͷҰཡදࣔ༻σʔλ ɾ#͞ΜͷҰཡදࣔ༻σʔλ Λ༻ҙɻ JOEFYFE1BJS\


    \VJE" UBSHFU# QBJS*E^  \VJE# UBSHFU" QBJS*E^  \VJE" UBSHFU$ QBJS*E^  \VJE$ UBSHFU" QBJS*E^  \VJE# UBSHFU$ QBJS*E^  ɾɾɾ