我认为您已经建立了一个 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目录中创建两个文件：
- 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 详细信息。
对于密钥，您必须生成一对新密钥。转到项目设置中的云消息传递，您可以在那里生成一个新的对。
当您运行应用程序（flutter run -d chrome）时，您可以在控制台日志中找到您的令牌。复制该令牌。
从侧面抽屉的云消息传递部分，我们可以编写新的通知。
在标题和文本中输入您喜欢的任何内容。
单击发送测试消息。
粘贴您从控制台复制的令牌，然后单击“测试”。
您可以看到弹出的通知。
您可以参考本文 https://firebase.google.com/docs/cloud-messaging/js/client
and Firebase 文档 https://www.freecodecamp.org/news/how-to-add-push-notifications-to-a-web-app-with-firebase-528a702e13e1/了解更多信息。
