如何发送 PWA 推送通知(最简单的方法)

已发表: 2023-01-12

正在寻找添加 PWA 推送通知的简单方法?

渐进式 Web 应用程序 (PWA) 是可在任何设备上运行的应用程序。 但是与发送网络推送通知总是有一些冲突。 通常,最大的问题是交货率。 您可以通过多种方式将网络推送添加到您的 PWA。 但是,您如何发送实际从您的 PWA 交付的网络推送通知?

不用担心! 在本文中,我们将逐步向您展示如何在不到 10 分钟的时间内以可靠的交付率发送 PWA 推送通知。

让我们开始吧。

如何安装 PWA 推送通知

向 PWA 添加推送通知非常简单。 只需按照本文中的步骤操作即可。 如果您按照每一步操作,到本文结束时,您应该能够像这样发送推送通知:

PWA 推送通知

主要挑战是所有网络推送通知软件都使用名为service_worker.js的 Javascript 文件。 Service Worker 帮助您通过弹出模式收集推送通知订阅者。 但是所有 PWA 都已经有一个用于不同目的的服务工作者文件。 一次,您的 PWA 只能使用一个 service worker。

简而言之,Web 推送服务会混淆您的 PWA。 因此,有时它会收集推送通知订阅者,有时则不会。 有时您可以发送通知,有时则不能。 您甚至可能最终将推送消息发送到您的整个订阅者列表,并且只将其传递给少数订阅者。

当然,像 Mendix 这样的 PWA 构建器带有自己的推送通知系统。 但是,如果您想迁移到其他推送通知服务怎么办? 如果您想要更灵活地控制您的推送通知活动怎么办?

我们建议使用 PushEngage 发送 PWA 推送通知。 PushEngage 是世界排名第一的推送通知软件。 所以,您知道您的活动是安全的。

让我们开始吧。

第 1 步:设置您的 PushEngage 帐户

前往 PushEngage 主页并单击开始按钮:

推动参与

您可以免费试用 PushEngage。 如果您正在运行一个需要重复访问量和参与度的小型博客,那可能就足够了。 但是,如果您认真对待销售,则应该获取企业包并解锁自动营销活动。

一旦您注册了您的 PushEngage 帐户,请转到您的 PushEngage 仪表板并转到站点设置 » 站点详细信息

PushEngage 网站设置

您可以在此处设置徽标、站点名称和站点 URL。 现在整理这些东西非常重要,这样您就可以稍后测试整个设置。

步骤 #2:从 PushEngage 获取安装代码

要安装推送通知,您需要获取安装代码。 在“站点设置”屏幕中,向下滚动并单击“单击此处获取设置说明”按钮:

PushEngage 安装设置

然后,单击任何站点选项卡:

PushEngage 任何站点安装代码

您可以使用 Javascript 代码开始发送推送通知。

步骤 #3:为 PWA 推送通知添加 Service Worker 代码

这个过程中最棘手的部分终于来了。 在Setup Instructions下的 PushEngage 仪表板中,您还会看到一个用于下载 service worker 文件的选项。

下载 Service Worker

重要提示:请勿按原样将服务工作者文件上传到应用程序的根目录。

在记事本等文本编辑器中打开 PushEngage service worker,并复制 service worker 的代码。 然后,找到您的 PWA 的服务工作者文件,并将 PushEngage 服务工作者代码添加到该文件中。

如果忽略此步骤,您将无法收集推送通知订阅者。

步骤 #4:配置 PushEngage 选择加入

现在,返回您的 PushEngage 仪表板。 转到设计»弹出模式并选择您选择的选项:

弹出模式

这里的想法是给你的访客一个订阅的坚实理由。 如果您需要一些帮助,请查看我们关于如何创建自定义推送通知选择加入的文章。

如果您想要开始使用一些模板,您应该查看这篇关于高转化率推送通知选择加入的文章。

第 5 步:创建您的第一个广告系列

现在您的 Webflow 站点可以发送推送通知,您应该创建一个实际的活动。

Webflow 并不是真正无聊的免费网站构建器。 它是用于自定义 Web 开发的高级构建器。 因此,您很可能会在着陆页上销售产品。 如果是您,您绝对应该为您的商店设置一个废弃的购物车提醒。

废弃的购物车活动有助于通过转换废弃的购物车来产生额外的收入。 这是一个简单的提醒,在自动驾驶仪上销售了很多产品。 因此,支持任何可带来直接销售的着陆页都是一项很棒的活动。

只需转到您的 PushEngage 仪表板并转到广告系列 » 触发式广告系列 » 创建新的触发式广告系列

创建新的触发活动

然后,选择购物车放弃活动模板:

触发的活动类型

如果您是创建自动化营销活动的新手,您可以简单地按照我们关于如何设置废弃购物车推送通知活动的文章进行操作。 按照每一步操作,您可以像这样设置推送通知:

1ere 被遗弃的购物车示例

以防万一你想知道,你不需要成为一个家喻户晓的品牌,你的推送通知活动才会有效。 事实上,PushEngage 旨在帮助小型企业使用推送通知发展壮大。

但在开始营销您的网站之前,您应该解决推送通知订阅过程中的任何问题。 查看这篇关于测试推送通知的文章。 如果一切正常,你就完成了!

添加 PWA 推送通知后怎么办?

伙计们,这就是全部!

您现在可以发送 PWA 推送通知。 到目前为止,您还创建了一个强大的网络推送通知活动来促进您的成长。 所有这一切,不到 10 分钟!

查看如何创建其他自动推送通知活动。 大多数推送活动都简单有效。 因此,我们建议为您的网站设置多个广告系列。 这里有一些很棒的开始:

  • 如何自动发送 RSS 推送通知
  • 如何使用 GTM 设置购物车放弃推送通知
  • 如何以简单的方式安排推送通知 [5 分钟。 指导]

如果您还没有,请开始使用 PushEngage。 PushEngage 是世界排名第一的推送通知软件。 因此,您的竞选活动是安全的。

立即开始使用 PushEngage!