Flutter Web应用如何提示移动端未装原生应用的用户下载安装

核心思路 #

利用浏览器标准的BeforeInstallPromptEvent API，结合平台判断逻辑，实现针对未安装原生应用用户的自定义安装提示横幅，无需额外第三方依赖。

具体实现步骤 #

1. 监听浏览器安装触发事件 #

在Web端的index.html中添加JS代码，捕获浏览器的安装触发事件并暂存，后续配合Flutter代码触发自定义提示：

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // 阻止浏览器默认提示
  e.preventDefault();
  // 保存事件对象用于后续手动触发安装
  deferredPrompt = e;
  // 通知Flutter端显示自定义安装横幅
  window.flutter_inappwebview?.callHandler('showInstallBanner');
});

// 供Flutter调用的触发安装函数
function triggerInstall() {
  if (deferredPrompt) {
    deferredPrompt.prompt();
    // 监听用户选择结果
    deferredPrompt.userChoice.then((choiceResult) => {
      deferredPrompt = null;
    });
  }
}

2. Flutter端实现自定义横幅组件 #

在Flutter代码中针对Web平台注册JS回调，渲染包含安装按钮和应用商店链接的横幅：

import 'dart:js' as js;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class InstallPromptBanner extends StatefulWidget {
  const InstallPromptBanner({super.key});

  @override
  State<InstallPromptBanner> createState() => _InstallPromptBannerState();
}

class _InstallPromptBannerState extends State<InstallPromptBanner> {
  bool _shouldShowBanner = false;

  @override
  void initState() {
    super.initState();
    if (kIsWeb) {
      // 注册JS调用的处理函数
      js.context['showInstallBanner'] = () {
        setState(() => _shouldShowBanner = true);
      };
    }
  }

  void _openAppStore() {
    String storeUrl = '';
    // 识别当前移动端平台
    if (defaultTargetPlatform == TargetPlatform.android) {
      storeUrl = 'market://details?id=你的Android应用包名';
    } else if (defaultTargetPlatform == TargetPlatform.iOS) {
      storeUrl = 'https://apps.apple.com/cn/app/你的应用名称/id应用ID';
    }
    // 打开应用商店链接
    js.context.callMethod('open', [storeUrl]);
  }

  void _triggerDirectInstall() {
    if (kIsWeb) {
      js.context.callMethod('triggerInstall');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (!kIsWeb || !_shouldShowBanner) return const SizedBox.shrink();
    
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      color: const Color(0xFF2563EB),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text(
            '安装原生应用，体验更流畅',
            style: TextStyle(color: Colors.white, fontSize: 14),
          ),
          Row(
            children: [
              TextButton(
                onPressed: _triggerDirectInstall,
                child: const Text('直接安装', style: TextStyle(color: Colors.white)),
              ),
              const SizedBox(width: 8),
              TextButton(
                onPressed: _openAppStore,
                child: const Text('去应用商店', style: TextStyle(color: Colors.white)),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

3. 优化用户体验 #

• 可通过localStorage记录用户是否关闭过提示，设置冷却周期（比如7天），避免频繁打扰用户：

// 在showInstallBanner触发前添加判断
function shouldShowBanner() {
  const lastDismissed = localStorage.getItem('lastInstallBannerDismissed');
  if (!lastDismissed) return true;
  const now = new Date().getTime();
  const diff = now - parseInt(lastDismissed);
  // 超过7天再次显示
  return diff > 7 * 24 * 60 * 60 * 1000;
}

关键注意事项 #

• 该方案仅在移动端浏览器生效，桌面端会自动忽略；
• 应用商店链接需替换为你自己的Android包名和iOS应用ID；
• Firebase部署无需额外配置，直接打包Flutter Web项目上传即可。

内容的提问来源于stack exchange，提问作者barcolounger