是否可以使用Gatbsy进行推送通知?

时间:2017-12-25 19:23:35

标签: javascript progressive-web-apps gatsby

我对盖茨比很感兴趣,我最初的经历非常积极。

目前还不清楚静态CDN托管模型如何与推送通知功能相吻合,我将非常感谢任何指导。搜索网络无济于事。

2 个答案:

答案 0 :(得分:5)

Gatsby采用“脱钩”架构。 Gatsby希望处理您的前端和构建过程,但您存储数据的方式/位置取决于您。因此,使用Gatsby的推送通知将由不同的服务处理。您只需要添加处理推送数据的React代码并将其呈现。

答案 1 :(得分:3)

按照Mozilla指南,我设法添加了推送通知:https://developer.mozilla.org/es/docs/Web/API/ServiceWorkerRegistration/showNotification#Examples

gatsby-browser.js文件中,您可以使用onServiceWorkerUpdateFound收听更新并触发推送通知,请参见下面的代码

export const onServiceWorkerUpdateFound = () => {
  const showNotification = () => {
    Notification.requestPermission(result => {
        if (result === 'granted') {
            navigator.serviceWorker.ready.then(registration => {
                registration.showNotification('Update', {
                    body: 'New content is available!',
                    icon: 'link-to-your-icon',
                    vibrate: [200, 100, 200, 100, 200, 100, 400],
                    tag: 'request',
                    actions: [ // you can customize these actions as you like
                        {
                            action: doSomething(), // you should define this
                            title: 'update'
                        },
                        {
                            action: doSomethingElse(), // you should define this
                            title: 'ignore'
                        }
                    ]
                })
            })
        }
    })
  }

  showNotification()
}