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

【问题标题】：Dynamic push notifications w/ Onesignal, Nuxtjs and Prismic CMS带有 Onesignal、Nuxtjs 和 Prismic CMS 的动态推送通知
【发布时间】：2020-11-28 06:53:12
【问题描述】：

我正在使用 Nuxtjs 构建一个 PWA，它从 prismic api 获取博客内容。 OneSignal 已按照here 提供的文档安装和配置，我能够为用户订阅该应用程序并通过 OneSignal 的仪表板发送欢迎推送和其他推送。

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

编辑

每当用户访问https://example.com/blog 时，我都会触发推送通知。注意：prismic 按最新帖子排序，因此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,

【问题讨论】：

标签： progressive-web-apps onesignal prismic.io nuxtjs

【解决方案1】：

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

从 prismic 获取所有博文
发布帖子时发送 onesignal 网络推送通知

在此处查看代码 sn-p：https://gitlab.com/-/snippets/2003202

参考资料：

【讨论】：