flutter - 如何实现Flutter Web Push通知

Question

我想知道我是否可以在Flutter Web中实现推送通知？
我看到可以使用firbase_messaging为移动应用创建推送通知，但是可以将其用于Web应用吗？或其他任何替代方法来实现它？

Answer 1

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

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

<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目录中创建两个文件:

firebase-messaging-sw.js

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详细信息。
对于 key ，您必须生成一个新对。转到项目设置中的“云消息传递”，然后可以在其中生成一对新的消息对。

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

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



您可以看到弹出的通知。

你可以引用 this article
和 firebase documentation
有关更多信息。