I am trying to create a custom file extension (.vc2d) that will open in my Vue and Typescript progressive web app. I have set up file_handlers in my web manifest file and used window.launchQueue in my PWA. However, when I double click on the file in File Explorer, it opens the PWA correctly but passes an empty array instead of the file data.
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>
Should I place the file handler in the mounted hook? Am I using async/await correctly? Is there an issue with the file_handlers API or something else?