addEventListener для «push» в vue-cli с работником сервиса - PullRequest
Новая
       39

addEventListener для «push» в vue-cli с работником сервиса

0 голосов
/ 29 марта 2019

Я использую внутренний сервер NodeJ, а для своего веб-приложения веб-интерфейса я использую Vue-CLI. Backend находится на одном порту для localhost, а приложение внешнего интерфейса на другом порту в режиме разработки.

Я пытаюсь реализовать push-уведомления, используя web-push npm и сервисного работника, который поставляется с Vue CLI. Тем не менее, я не знаю, где я должен поместить eventListener для «push».

Я попытался создать файл с именем service-worker.js в главном каталоге (frontend /) (где находится registerServiceWorker.js). В следующем коде я просто бросил eventListener в файл registerServiceWorker.js.

Заранее спасибо!

Frontend (registerServiceWorker.js): 

/* eslint-disable no-console */
console.log('baseURL:', process.env.BASE_URL)
const BACKEND_SUBSCRIBE = (process.env.NODE_ENV !== 'development')
    ? '/subscribe'
    : '//localhost:3003/subscribe';

import { register } from 'register-service-worker'
import {convertedVapidKey} from './services/PushNotificationService'
import Axios from 'axios';
const axios = Axios.create({
  withCredentials: true
});

self.addEventListener('push', function(e) {
  console.log('Hi');
  const data = e.data.json();
  self.registration.showNotification(data.title, {
    body: 'Notified by me',
    icon: 'icon'
  });
});

if (process.env.NODE_ENV === 'development') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready (sw) {
      sw.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: convertedVapidKey
      }).then(sub => {
        console.log('sending sub', sub)
        axios.post(BACKEND_SUBSCRIBE, sub)
        .then(res => {
           console.log('sent sub,', res)
        });
      })
    },

бэкенд (server.js): 

const webpush = require('web-push');

const publicKey= 'keystring';
const privateKey = 'keystring'
webpush.setVapidDetails(
    'mailto:my@app.com',
    publicKey,
    privateKey
)

app.post('/subscribe', (req, res) => {
        const subscription = req.body;
        console.log(subscription);
        // send 201 status
        res.status(201).json({'see':'see this?'});

        // create payload
        const payload = JSON.stringify({ title: 'Push test'});

        webpush.sendNotification(subscription, payload)
        .catch(err => console.log(err));

})

1 Ответ

0 голосов
/ 01 апреля 2019

После всей головной боли мне пришлось настроить файл "vue.config.js" в главном интерфейсе следующим образом: 

// vue.config.js
module.exports = {
    pwa: {
      workboxPluginMode: 'InjectManifest',
      workboxOptions: {
          swSrc: 'src/service-worker.js'
      },
      themeColor: '#8bc34a'
    },
  }

Это позволило мне вставить мои прослушиватели push-событий внутрьфайл src / service-worker.js:)

...