How to use the PWA file handler with Vue 3

Question

I would like to create a file with a custom file extension (.vc2d) that will open in my progressive web app. I am using Vue and Typescript, with file_handlers in my web manifest file, and window.launchQueue in my PWA. When I double click on the file in File Explorer, it launches the PWA correctly, but instead of passing the file data to my app, it passes an empty array.

Web Manifest file

{
    "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 Component

<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>

Is mounted the correct place to put the file handler? Or am I doing async/await incorrectly? Or is the file_handlers API failing? Or something else

Answer 1

The above code functions correctly, but when the app is installed in Edge, there are 2 versions of the PWA listed in the "Open with..." menu. One opens the file and the other one doesn't. Once I figured out which one works, I set it to always open my file type with that program, and it works now. Maybe this will help someone facing the same frustration