我想知道我是否可以在Flutter Web中实现推送通知?我看到可以使用firbase_messaging
为移动应用创建推送通知,但可以将其用于Web应用吗?或任何其他替代方法来实现它?
我正在考虑您已经建立了一个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中,只需编写
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详细信息。对于密钥,您必须生成一个新对。转到项目设置中的“云消息传递”,然后可以在其中生成一对新的对。
[当您运行应用程序(flutter运行-d chrome)时,您可以在控制台日志中找到您的令牌。复制该令牌。
从侧面抽屉中的“云消息传递”部分,我们可以编写新的通知。在标题和文本中输入您喜欢的内容。单击发送测试消息。粘贴从控制台复制的令牌,然后单击“测试”。
您可以看到弹出的通知。
您可以参考this article和firebase documentation有关更多信息。