带 Onesignal、Nuxtjs 和 Prismic CMS 的动态推送通知

Dynamic push notifications w/ Onesignal, Nuxtjs and Prismic CMS

我正在使用 Nuxtjs 构建一个 PWA,它从 prismic api. OneSignal has been installed and configured following the documentation provided here 获取博客内容,我能够为用户订阅该应用程序,并通过 OneSignal 的仪表板发送欢迎推送和其他推送。

我现在想在博客 post 有新内容时发送推送通知。任何帮助将不胜感激。

编辑

每当用户访问 https://example.com/blog 时,我都会触发推送通知。注意:prismic 按最新的 post 排序,因此 this.docs[0] 从数组中获取最新的文章。

    async fetch() {
    try {
        const query = await this.$prismic.api.query(this.$prismic.predicates.at('document.type', 'blog_posts'), {pageSize: 6}).then((query)=>{
        this.docs = query.results;
        const requestOptions = {
            method: "POST",
            headers: {"Content-Type": "application/json", "Authorization": `Basic ${process.env.API_KEY}`},
            body: JSON.stringify({
                app_id: process.env.APP_ID,
                included_segments: ["All"],
                contents: {en: this.docs[0].data.post_content[0].text},
                headings: {en: this.docs[0].data.post_title[0].text},
                chrome_web_image: this.docs[0].data.featured_image.url,
                big_picture: this.docs[0].data.featured_image.url,
                web_url: `https://example.com/blog/${this.docs[0].uid}`
            })                
        }; fetch('https://onesignal.com/api/v1/notifications', requestOptions)
        })
    } catch (e) {
        // Send to bugsnag
        console.log(e)
    }
}, fetchDelay: 500,

Prismic 允许您设置在发布文档时触发的 webhook。参见 prismic blog。使用 express,我创建了一个可以做两件事的工具:

  1. 从 prismic
  2. 获取所有博客 post
  3. 发布 post 时发送 onesignal 网络推送通知

在此处查看代码片段:https://gitlab.com/-/snippets/2003202

参考文献: