服务工作者同步事件不适用于 nextjs

编程问答 2022-08-22

问题描述

我有一个 next.js 应用程序并尝试使用 service-worker 实现进行离线消息发送。我使用过类似 next-pwa 或 next-offline 的库，但决定创建我的自定义工作程序，因为 next 9+ 允许我们通过公共文件夹提供静态文件。

所以我在公共文件夹中创建了一个文件。 public/local-sw.js 在聊天页面，我已经用这些代码注册了它：

    const serviceWorker = useRef(null);
    
      const registerServiceWorker = async () => {
        if ('serviceWorker' in navigator) {
          serviceWorker.current = await navigator.serviceWorker.register('/local-sw.js',{
            type: 'module',});
        }
      };
    
      useEffect(() => {
        registerServiceWorker();
      },[]);

  const syncWorker = () => {
    return serviceWorker.current?.sync.register('outBox');
  };

Worker 已成功注册到应用程序。但我需要在用户发送消息时注册同步事件。这是我的代码的样子：

const sendMessage = async (text) => {
    openDB('messages',1,{
      upgrade: function (upgradeDb) {
        upgradeDb.createObjectStore('outBox',{ autoIncrement: true,keyPath: 'id' });
      },})
      .then(function (db) {
        var transaction = db.transaction('outBox','readwrite');
        return transaction.objectStore('outBox').put(message);
      })
      .then(function () {
        console.log('sync section');
        return syncWorker();
      })
      .catch(function (err) {
        console.error(err);
      });
  };

当 sendMessage 函数工作时，消息成功保存到 indexeddb，但同步事件不会触发到 service-worker。我在工作文件中记录了一些数据，但没有任何反应。这是服务工作者文件：

self.addEventListener('sync',function (event) {
  console.log('sync from local-sw worker',event);
});

我真的需要一些帮助，next.js 没有任何不同的示例或资源。谢谢...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

frontendjavascriptreactjsreactjsservice-worker