Vue3+TypeScript下PWA文件处理器无法获取文件数据的排查

我希望创建具有自定义扩展名(.vc2d)的文件，双击该文件可在我用Vue3和TypeScript开发的渐进式Web应用（PWA）中打开。已在Web Manifest文件中配置了file_handlers，并在PWA中使用window.launchQueue。双击文件资源管理器中的文件可正确启动PWA，但应用接收到的launchParams.files是一个空数组，而非文件数据。

Web Manifest配置 #

{
    "name": "MyApp",
    "scope": "/",
    "display": "standalone",
    "start_url": "https://www.myapp.com",
    "orientation": "any",
    "related_applications": [],
    "prefer_related_applications": false,
    "file_handlers": [
        {
            "action": "/",
            "accept": {
                "application/json": [
                    ".vc2d"
                ]
            },
            "icons": [
                {
                  "src": "assets/vc2d-icon.png",
                  "sizes": "256x256",
                  "type": "image/png"
                }
              ]
        },
        {
            "action": "/",
            "accept": {
                "image/svg+xml": [
                    ".svg"
                ]
            },
            "icons": [
                {
                  "src": "assets/svg-icon.png",
                  "sizes": "256x256",
                  "type": "image/png"
                }
              ]
        }
    ],
    "icons": []
}

Vue组件代码 #

<script lang="ts">
import { defineComponent } from "vue";

declare global {
    interface Window {
        launchQueue: {
            setConsumer: (launchParams) => void;
        };
    }
}

export default defineComponent({
    name: "Home",
    components: { },
    data: function () {
        return { 
            //...
        };
    },
    mounted: function () {
        if ('launchQueue' in window) {
            console.log('File Handling API is supported!');

            window.launchQueue.setConsumer(async launchParams => {
                console.log('handling file', launchParams); // -->> launchParams.files is an empty array

                for (const file of launchParams.files) {
                    const blob = await file.getFile();
                    blob.handle = file;
                    const text = await blob.text();
                    var fileType: SupportedImportTypes;
                    if (/\.vc2d$/.test(file.name)) fileType = "vc2d";
                    else if (/\.svg$/.test(file.name)) fileType = "svg";
                    else return console.log("file extension not supported", file.name);
                    this.importFile(fileType, text, file);
                }
            });
        }
    },
    methods: {
        importFile: function (type: SupportedImportTypes, fileData?: string, fileDetails?: File) {
             //...
        }
    }
});
</script>

请问将文件处理器放在mounted钩子中是否正确？是我的async/await使用有误，还是file_handlers API出现问题，或是其他原因导致的？

问题排查与解决 #

1. mounted钩子的使用是正确的 #

把launchQueue的consumer放在组件的mounted钩子中没问题，但要注意：如果该组件不是应用启动时的首屏组件，可能会错过启动参数的处理时机。建议优先在应用初始化入口（比如main.ts）中设置consumer，确保不会遗漏启动事件。

2. async/await的使用无错误 #

代码中await file.getFile()的写法是正确的，launchParams.files为空和异步语法无关，问题出在文件识别或配置层面。

3. 核心问题排查方向 #

• 自定义扩展名的MIME类型映射问题
  你的.vc2d关联了application/json，但系统可能未将该扩展名正确映射到这个MIME类型，导致浏览器无法识别文件属于PWA的处理范围。可以：

  • 临时在accept中添加"*/*": [".vc2d"]测试是否能捕获到文件；
  • 在服务器端配置自定义MIME类型（比如Nginx中添加types { application/json vc2d; }）；
  • 手动在系统中设置.vc2d文件的默认打开方式为你的PWA。

• Web Manifest的action与start_url一致性
  确保action路径在scope覆盖范围内，你的scope是"/"，action是"/"，start_url是https://www.myapp.com，这部分配置没问题，但如果是本地开发环境，start_url要改为http://localhost:xxx之类的正确地址。

• PWA必须处于已安装状态
  File Handling API仅对已安装的standalone模式PWA生效，在浏览器标签页中打开的PWA无法接收文件启动参数。确保你是通过浏览器的"安装应用"功能安装后再测试。

• 浏览器兼容性
  File Handling API目前仅在Chromium内核浏览器（Chrome、Edge等）中支持，Firefox和Safari暂未支持，确认测试环境是兼容的浏览器。

• 启动参数的捕获时机
  如果应用已经处于运行状态，双击文件时launchQueue会触发新的consumer回调；但如果应用是被文件启动的，要确保consumer在应用启动后尽快注册，避免错过启动事件。

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