Question

我试图在我的Angular Application中使用service-worker。它是使用webpack构建的。

我使用workbox-webpack-plugin。我想为我的GET API调用提供表单缓存，并在后台更新数据。

为此，我将选项runtimeCaching与处理程序staleWhileRevalidate（more details on GenerateSW plugin here）一起使用

这是我在webpack.config.js中拥有的配置：

  new GenerateSW({
    // importWorkboxFrom: 'local',
    clientsClaim: true,
    skipWaiting: true,
    navigateFallback: '/index.html',
    runtimeCaching: [
      {
        // Match any same-origin request that contains 'api'.
        urlPattern: /https:\/\/api.*/,
        handler: 'staleWhileRevalidate',
        options: {
          cacheName: 'api',
          broadcastUpdate: {
            channelName: 'api-updates',
          },
          // Add in any additional plugin logic you need.
          plugins: [],
        },
      }
    ]
  }),

根据this documentation，当缓存更新时，我应该能够收到一个事件（我想向用户显示一些内容，以便他可以刷新数据）。

用于接收数据的代码如下：

export class AppComponent implements OnInit {

  public ngOnInit() {
    console.log( 'AppComponent - ngOnInit' );

    const updatesChannel = new BroadcastChannel('api-updates');
    updatesChannel.addEventListener('message', async (event) => {
      console.log('Event received');
    });
  }
}

我将此代码放在Angular组件之一中，即使我确定缓存已更新，也从未被调用。

我认为这可能与Angular（like described in this question）中的更改检测的工作方式有关，但是我不确定如何解决它。

有人能成功从Angular组件收听广播事件吗？

Answer 1

使用工作箱文档查找解决方案很困难，但是设法找到了替代解决方案，这可能对人们有所帮助，值得分享。

启动时，您可以注册到工作箱服务人员并覆盖onupdatefound：

if (process.env.NODE_ENV != "development" && "serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker
      .register("/service-worker.js")
      .then(registration => {
        registration.onupdatefound = event => {
          console.log("? An update has just been installed and is now available on your device.");
        };
      })
      .catch(registrationError => {
        console.log("SW registration failed: ", registrationError);
      });
  });
}

使用"workbox-webpack-plugin": "^4.0.0"

就像魅力一样工作

workbox-webpack-plugin和Angular。如何在Angular中收听广播更新事件

1 个答案: