在Flutter PWA中显示安装原生应用程序提示

Question

什么是在Flutter PWA上展示提示安装原生应用的最佳方法？

我找到了这篇指南https://developer.chrome.com/blog/app-install-banners-native/，但我不确定JavaScript应该放在哪里，或者这是否需要以某种方式编码为Flutter代码。

我还考虑自己构建一个对话框，但我找不到一种简单的方法来生成可以由用户解除的覆盖整个应用程序的持久对话框。

- alexlipa

Answer 1

这可以用Javascript和Flutter来完成。 本地应用程序安装提示 链接提供了必须满足的标准和提示方式的说明。

以下是在Flutter中完成此操作的一种方法。

BeforeInstallPrompt(
  child: HomeScreen(),
),

import 'dart:html';
import 'package:flutter/material.dart';

class BeforeInstallPrompt extends StatefulWidget {
  final Widget child;

  const BeforeInstallPrompt({Key? key, required this.child}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _BeforeInstallPrompt();
}

class _BeforeInstallPrompt extends State<BeforeInstallPrompt> {
  BeforeInstallPromptEvent? deferredPrompt;

  @override
  void initState() {
    window.addEventListener('beforeinstallprompt', (e) {
      e.preventDefault();
      setState(() {
        deferredPrompt = e as BeforeInstallPromptEvent;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      widget.child,
      if (deferredPrompt != null)
        Positioned(
          left: 8,
          bottom: 8,
          child: ElevatedButton(
            onPressed: () async {
              await _showPrompt();
            },
            child: const Text('Install'),
          ),
        )
    ]);
  }

  _showPrompt() async {
    await deferredPrompt?.prompt();
    await deferredPrompt?.userChoice;
    setState(() {
      deferredPrompt = null;
    });
  }
}

- user18309290