Question

我不知道我是不是做对了，还是有另一种方式来做。我有一个用于缓存的服务人员，我也需要实施Firebase Cloud消息传递，这也需要服务人员。我的第一个服务人员在我项目的根目录中，而我在其中。

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
if (workbox) {
  workbox.precaching.precacheAndRoute([
  {
    "url": "icon-128x128.png",
    "revision": "af75a93ca2c343f1129dd7ee02fd4da7"
  },
  {
...
 }
]);



workbox.routing.registerRoute(
 /^\/$/,
  new workbox.strategies.NetworkFirst({
    cacheName: 'static-resources',
  })
);

workbox.routing.registerRoute(
 /^\/([^/]+\.htm)$/,
  new workbox.strategies.NetworkFirst({
    cacheName: 'static-resources',
  })
);


/**

  workbox.routing.registerRoute(
  /\.(?:js|css)$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'static-resources',
  })
);
**/

  workbox.routing.registerRoute(
  /\.(?:js|css)$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'static-resources',
  })
);




workbox.routing.registerRoute(
  // Cache image files.
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  // Use the cache if it's available.
  new workbox.strategies.CacheFirst({
    // Use a custom cache name.
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        // Cache only 50 images.
        maxEntries: 50,
        // Cache for a maximum of a week.
        maxAgeSeconds: 7 * 24 * 60 * 60,
      })
    ],
  })
);
 console.log(`Yay! Workbox is loaded ?`);

} else {
  console.log(`Boo! Workbox didn't load ?`);
}

现在我还需要FCM的服务人员，

importScripts('https://www.gstatic.com/firebasejs/4.13.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.13.0/firebase-messaging.js');

if (firebase) {

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
   'messagingSenderId': '14******4'
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/icon-128x128.png'
  };

  return self.registration.showNotification(notificationTitle,
      notificationOptions);
});
}

我将它们合并为一个服务工作者，但是似乎存在问题，因为它注册了sw.js，这是我拥有的服务工作者的名字，并且由于我没有成功尝试注册firebase-messaging-sw.js甚至没有文件。

从文档中说

register（）方法的一个微妙之处是服务工作者文件的位置。在这种情况下，您会注意到服务工作者文件位于域的根目录。这意味着服务人员的范围将是整个来源。换句话说，此服务工作者将收到此域上所有内容的提取事件。如果我们在/example/sw.js上注册服务工作者文件，则服务工作者只会看到URL以/ example /开头（即/ example / page1 /，/ example / page2 /）的页面的获取事件。

现在，因为似乎我需要在根目录中具有用于缓存和fcm的服务工作者。我该怎么办？

我有这个来注册服务人员

<script>
  if ('serviceWorker' in navigator) {
     console.log('Service Worker is supported');
    window.addEventListener('load', () => {
      navigator.serviceWorker.register("/sw.js")
        .then(registration => {

          console.log(`Service Worker registered! Scope: ${registration.scope}`);
        })
        .catch(err => {
          console.log(`Service Worker registration failed: ${err}`);
        });
    });
  }
</script>

Answer 1

好吧，我刚刚将这两个工作程序的服务工作程序文件重命名为firebase-messaging-sw.js，并且它都注册了这两个文件。这样对我有用。

一个文件中包含两名服务人员

1 个答案: