收听来自GatsbyJS的Service Worker Push事件

时间:2019-01-31 06:34:50

标签: reactjs service-worker gatsby

我已安装gatsby-offline-plugin,并且正在尝试使用Service Worker接收推送事件。我似乎无法听听他们的活动。

我试图这样听他们:

export const onServiceWorkerUpdateFound = ({ serviceWorker }) => {    
  serviceWorker.addEventListener('push', event => {
    console.log('[Service Worker] Push Received.', event);
    console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
  });
}

也这样:

export const onServiceWorkerUpdateFound = ({ serviceWorker }) => {
  self.addEventListener('push', event => {
    console.log('[Service Worker] Push Received.', event);
    console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
  });
}

似乎什么都没有注销。另外,Self似乎只是第二个实例中的窗口对象

我可以成功订阅(获取端点和密钥),但是尝试发布到该端点无效。我还尝试在chrome开发工具中使用“ push”命令,但没有运气。

知道是否支持此功能?或应该怎么做?

1 个答案:

答案 0 :(得分:0)

每个遇到此问题的人。您可以通过创建完全自定义的服务程序来解决此问题,也可以将扩展脚本添加到现有服务程序。

扩展脚本

在您的根静态文件夹中添加扩展名,例如:sw-extension.js并在此处添加事件监听器。

// sw-extension.js
self.addEventListener('push', (event) => {
    console.log(event)
})

,然后将这些选项添加到gatsby-config文件中的脱机插件中。

//gatsby-config.js
{
  resolve: `gatsby-plugin-offline`,
  options: {
      importScripts: [`./sw-extension.js`],
  },
},

定制服务人员

将以下代码添加到您的gatsby浏览器文件中,并将名为sw.js的文件添加到您的静态文件夹中。

// gatsby-browser.js
export const registerServiceWorker = () => true