如何检查Flutter Web应用程序是否已安装在设备上?

xwmevbvl  于 2023-06-30  发布在  Flutter
关注(0)|答案(3)|浏览(256)

我正在使用Flutter Web制作Web应用程序,我想知道用户是否实际安装了Web应用程序,或者Web应用程序是否正在浏览器上运行。
我想知道这一点,这样我就可以允许在设备中安装了Web应用程序的用户使用特殊功能。(例如,允许local_notifications,这对于在浏览器上运行的flutter是不可能的)

oxiaedzo

oxiaedzo1#

使用JavaScript。将此HTML代码插入index.html

<script>
function isPwaInstalled() {
    return window.matchMedia('(display-mode: standalone)').matches;
}
</script>

然后在你的dart档案里

import 'dart:js' as js;

bool isPwaInstalled() => js.context.callMethod("isPwaInstalled");

当您的PWA应用程序安装到桌面时,此方法将返回true。
请注意,dart:js库仅在Flutter web上可用,如果您在其他平台(如iOS或Android)上导入它,编译器会抱怨它。要避免这种情况,请参见条件导入或this blog

nsc4cvqm

nsc4cvqm2#

从WebApp向HomeScreen添加Safari快捷方式与安装它完全不同。它只是在Safari浏览器中打开您的WebApp

  • 您不会知道与正常查看WebApp的区别

你可以用platform_detect 2.0.0包检查设备,但仅此而已
链接到包https://pub.dev/packages/platform_detect

jdgnovmf

jdgnovmf3#

Eric Kwok's answer上扩展-

import 'dart:html' as html;

bool isPwa() {
  return html.window.matchMedia('(display-mode: standalone)').matches;
}

参考资料-

  1. Window: matchMedia() method
  2. PWA -检测显示模式
  3. Web app manifests - display

相关问题