Thx. It worked for me: But just chrome, not fireFox, Don't know why

[kaiwenxiao]

It worked for me:

config:

"cache": {
  "runtimeCaching": [
    {
      "urlPattern": "http://localhost:1234/cache.jpg",
      "handler": "staleWhileRevalidate",
      "options": {
        "broadcastUpdate": {
          "channelName": "api-updates"
        }
      }
    }
  ]
}

index.js

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

index.html contained <img src="http://localhost:1234/cache.jpg">.
Changing out cache.jpg fires the eventlistener.

Did you use staleWhileRevalidate?

Originally posted by @mischnic in #4 (comment)

[kaiwenxiao]

I give my API response updated, which will trigger this listener, and also skipWaiting() then refresh broswer