如何在flutter web中实现本地通知

Question

我需要在从 MQQT 代理接收的 flutter web 上显示通知，而 chrome 已最小化或位于其他选项卡上。（如 android 或 ios 中的本地通知）

Answer 1

此软件包支持大多数平台的通知，包括 web。

看看这个https://pub.dev/packages/awesome_notifications

---

Answer 2

我发现的最好的解决方法是制作一个 js 脚本来显示通知，并从 flutter 应用程序调用 javascript 显示通知函数，同时检查它是否在网络上。

// local_notification.js
function showNotification(title, body) {
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notifications");
    return;
  }

  if (Notification.permission === "granted") {
    var notification = new Notification(title, {
      body: body,
      icon: "icon.png"
    });

    notification.onclick = function () {
      console.log("Notification clicked");
    };
  } else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      if (permission === "granted") {
        var notification = new Notification(title, {
          body: body,
          icon: "icon.png"
        });

        notification.onclick = function () {
          console.log("Notification clicked");
        };
      }
    });
  }
}

将以下脚本放入flutter项目的web文件夹中，并在

<script src="local_notification.js"></script>

文件中的body标签末尾添加

index.html

。之后我在 flutter 中调用这样的 showNotification 函数

import 'package:universal_html/js.dart';

if (kIsWeb) {
  context.callMethod("showNotification",["Title","custom message"]);
} else {
  flutterLocalNotificationsPlugin.show(id,"Title","custom message",notification);
}

像魅力一样工作