如何实现flutter web推送通知

Question

我想知道我是否可以在 flutter web 中实现推送通知？我看到我可以为移动应用程序创建推送通知，firbase_messaging但是可以将它用于网络应用程序吗？或任何其他替代方案来完成它？

Answer 1

我在考虑您已经建立了一个 flutter-web 项目并拥有一个 firebase 项目。

在 flutter 项目文件夹中，打开 index.html 并将这些脚本放在 head 部分。

<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-messaging.js"></script>

然后，在正文中，在加载 main.dart.js 脚本之前附加代码。

  <script src="./firebase-messaging-sw.js"></script>
  <script src="myjs.js"></script>
  <script src="main.dart.js" type="application/javascript"></script>

（其中 myjs.js 是您想要编写代码的任何文件，但 firebase-messaging-sw.js 必须在那里。）

现在，在 index.html 目录中创建两个文件：

1. firebase-messaging-sw.js
2. myjs.js（无论你选择什么名字）

在 firebase-messaging-sw.js 中，只写

console.log("")

在 myjs.js 中（同样，无论您选择什么文件名），编写以下代码：

var firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "~~~~~~",
    databaseURL: "~~~~~",
    projectId: "~~~~~~",
    storageBucket: "~~~~~~",
    messagingSenderId: "~~~~~~",
    appId: "~~~~~~~~~~~~~",
    measurementId: "~~~~~~~~~~~"
};

firebase.initializeApp(firebaseConfig);
firebase.analytics();

var messaging = firebase.messaging()

messaging.usePublicVapidKey('Your Key');

messaging.getToken().then((currentToken) => {
    console.log(currentToken)
})

您可以从 Firebase 控制台的项目设置中找到这些凭据。您将在已添加的 Web 应用程序中找到 firebaseConfig 详细信息。对于密钥，您必须生成一对新密钥。转到项目设置中的 Cloud Messaging，您可以在那里生成一个新对。

当您运行应用程序时 (flutter run -d chrome)，您可以在控制台日志中找到您的令牌。复制那个令牌。

从侧边抽屉的 Cloud Messaging 部分，我们可以编写一个新的通知。在标题和文本中输入您喜欢的任何内容。单击发送测试消息。粘贴您从控制台复制的令牌，然后单击测试。

您可以看到弹出的通知。

您可以参考这篇文章 和firebase 文档 了解更多信息。