Question

am tryind将服务工作者添加到我的vuejs应用程序中。这就是我得到的： ServiceWorker注册失败：TypeError：无法注册ServiceWorker：获取脚本时收到错误的HTTP响应代码（404）。我已经搜索了很多，但我不知道问题出在哪里。添加服务人员的原因是要保存应用中登录的任何设备的令牌，并能够向其发送通知。在index.html中：static / manifest.json“>

// app.js
var config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: ''
};
firebase.initializeApp(config);

const messaging = firebase.messaging();
let userToken    = null,
    isSubscribed = false

window.addEventListener('load', () => {

    if ('serviceWorker' in navigator) {

      navigator.serviceWorker.register("firebase-messaging-sw.js", {scope: "firebase-cloud-messaging-push-scope"}).then(function (registration) {
  const messaging = firebase.messaging();
  messaging.useServiceWorker(registration);

  }).catch(function (err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);

  })
    } else {
    }
});

messaging.requestPermission().then(function() {
   //getToken(messaging);
   return messaging.getToken();
}).then(function(token){
console.log(token);
})
.catch(function(err) {
console.log('Permission denied', err);
});


messaging.onMessage(function(payload){
console.log('onMessage: ',payload);
});

// firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');
self.addEventListener('notificationclick', event => {
    console.log(event)

    event.notification.close()

    event.waitUntil(
        self.clients.openWindow('/')
    )
})
   var config = {
        apiKey: '',
        authDomain: '',
        databaseURL: '',
        projectId: '',
        storageBucket: '',
        messagingSenderId: ''
      };

      firebase.initializeApp(config);
      const messaging = firebase.messaging();

// manifest.json

{
  "name": "Du",
  "short_name": "Du",
  "icons": [
    {
      "src": "/static/img/icons/cro-icon-64x64.png",
      "sizes": "64x64",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/cro-icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "fullscreen",
  "orientation": "portrait",
  "background_color": "#2196f3",
  "theme_color": "#2196f3",
   "gcm_sender_id": ""
}

console project folder console2

将Service Worker添加到vuejs / firebase Web应用程序

0 个答案: