如何在网站与Flutter App中实现Firefox安卓的Open in app功能？

一、个人网站端实现 #

Firefox的这个功能核心依赖Android App Link（兼容旧版Deep Link）机制，需要网站和对应App完成双向关联配置：

1. 配置网站验证文件
   在网站根目录创建.well-known/assetlinks.json文件，内容格式如下：

   [{
     "relation": ["delegate_permission/common.handle_all_urls"],
     "target": {
       "namespace": "android_app",
       "package_name": "com.your.app.package",
       "sha256_cert_fingerprints": ["你的App签名SHA256指纹"]
     }
   }]
   

   • package_name填对应Android App的正式包名
   • sha256_cert_fingerprints可通过Android Studio的「Signing Report」或命令keytool -list -v -keystore 你的签名文件.jks获取

2. 页面跳转提示（可选优化）
   可以在网页中添加主动跳转按钮，帮助用户快速触发关联逻辑：

   <button onclick="window.location.href='https://your.domain/path'">在App中打开</button>
   

   完成配置后，Firefox会自动识别网站与App的关联关系，在三点菜单中显示“Open in app”选项。

二、Flutter App端实现 #

Flutter需要配置App Link规则，并处理跳转后的页面逻辑：

1. 配置Android端关联规则
   在android/app/src/main/AndroidManifest.xml的目标Activity中添加intent-filter：

   <intent-filter android:autoVerify="true">
       <action android:name="android.intent.action.VIEW" />
       <category android:name="android.intent.category.DEFAULT" />
       <category android:name="android.intent.category.BROWSABLE" />
       <!-- 替换为你的网站域名 -->
       <data
           android:scheme="https"
           android:host="your.domain"
           android:pathPrefix="/" />
   </intent-filter>
   

   注意要和网站端assetlinks.json里的包名、指纹保持一致，确保系统验证通过。

2. Flutter中处理跳转逻辑
   使用app_links插件监听并处理App Link跳转：

   • 先添加依赖：

     dependencies:
       app_links: ^3.4.0
     

   • 然后在代码中实现监听：

     import 'package:app_links/app_links.dart';
     import 'package:flutter/material.dart';
     
     class HomePage extends StatefulWidget {
       const HomePage({super.key});
     
       @override
       State<HomePage> createState() => _HomePageState();
     }
     
     class _HomePageState extends State<HomePage> {
       late final AppLinks _appLinks;
     
       @override
       void initState() {
         super.initState();
         _appLinks = AppLinks();
         // 监听实时跳转链接
         _appLinks.uriLinkStream.listen(_handleDeepLink);
         // 处理App启动时的跳转链接
         _appLinks.getInitialUri().then((uri) {
           if (uri != null) _handleDeepLink(uri);
         });
       }
     
       void _handleDeepLink(Uri uri) {
         // 根据链接路径跳转对应页面
         if (uri.path.startsWith('/article/')) {
           String articleId = uri.path.split('/').last;
           Navigator.pushNamed(context, '/article', arguments: articleId);
         }
       }
     
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           appBar: AppBar(title: const Text('Home')),
         );
       }
     }
     

3. 验证功能
   安装Flutter App后，在Firefox中打开关联的网站页面，三点菜单中就会出现“Open in app”选项，点击后将直接跳转到App内对应页面。

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