MConverter Home
Blog
MConverter in Android's Share Sheet

Using the Web Share Target API in File Converter PWA

Allowing for a new, easier way to choose files – previously inaccessible for web apps. Learn how to receive files from other apps.

This article originally appeared on our Medium blog.

The Web Share Target API, part of Chromium’s Project Fugu to expand the web capabilities, has opened a new entry point for returning visitors of the MConverter PWA. Instead of having to first open the PWA and then choose files through the boring file picker, users can directly share a file for converting from another app, such as a file manager. See the demo (or try it yourself):

Once installed (or added to the home screen), the MConverter PWA shows up as a native app

Increased productivity and more returning visitors

Being able to convert files from any app is much more convenient and it feels more native. Users are also exposed to the PWA from another place in addition to the home screen: the share sheet. This has led to more returning visitors, with nearly a quarter of all daily conversions getting initiated through the share menu, thanks to the Share Target API!

How to implement it?

Adding support is relatively straightforward by following this article on web.dev. In essence, you need to announce support for receiving shares in your PWA’s manifest.json:

{
    "name": "MConverter",
    ...
    "share_target": {
        "action": "/?homescreen=1&share-target=1",
        "method": "POST",
        "enctype": "multipart/form-data",
        "params": {
            "files": [
                {
                "name": "file",
                "accept": ["image/png", ".png"]
                }
            ]
        }
    }
}

Note: In contrast to the <input type="file">’s accept attribute, here it is very important to include both the MIME type and the file extension. Otherwise, by adding only a file extension, you may run into a nasty issue on Chrome for Android where the PWA appears in the share sheet, but it sometimes cannot receive the shared file. Instead, the service worker’s event.request.formData() throws the following error: Uncaught (in promise) TypeError: Failed to fetch.

Next, your service worker needs to process the shared file. In the fetch event handler, add the following snippet:

//service-worker.js:

self.addEventListener('fetch', (event) => {
    const url = new URL(event.request.url);
    if (event.request.method === 'POST' && url.pathname === '/' && url.searchParams.has('share-target')) {
        event.respondWith(Response.redirect('/?receiving-file-share=1'));

        event.waitUntil(async function () {
            const client = await self.clients.get(event.resultingClientId);
            const data = await event.request.formData();
            const files = data.get('file');
            client.postMessage({ files });
        }());
        return;
    }

    ...

});

The shared file will be made accessible via postMessage() to your website’s “regular” JavaScript code, where you can intercept and handle it the same way as a file from <input type="file">:

//script in index.html:

navigator.serviceWorker.addEventListener('message', function (e) {
    if (searchParams.has('receiving-file-share')) {
        console.log(e.data.files); //contains the file(s)
    }
});

But can you share multiple files at once?

Yes! With this little tweak I found from a helpful answer by Jeff Posnick, who is part of Google’s DevRel team, we can process many files from a single share. How convenient!

const files = data.getAll('file');

This will return all files in an array.

Next up: “Open With…” menu integration

Having quicker access to the converter PWA from other apps on Android is great, but what about desktop platforms?

The File Handling API is also part of Chrome’s Project Fugu to bring more capabilities to the web. It will allow an installed PWA to register as a potential handler for a file type.

“Open With…” context menu in File Explorer on Windows 10

In other words, the PWA will appear in the “Open With” menu of file managers on Windows, Mac, Linux and Chrome OS.

Even though it is currently only behind a developer flag, MConverter already has a (mostly complete) implementation for it. So, we are just waiting for the File Handling API to ship officially, in order to make the functionality available without needing to manually flip the switch in chrome://flags.


Animation of MConverter appearing in Android's share sheet

My Account
Profile Picture
...
Free Edition
Action required
Downloads blocker detected
To stop seeing this message,
turn off Block automatic downloads
in Samsung Internet's Browsing pivacy dashboard settings.
To continue downloading your converted files, press the following button:
Download Files
Save to folder • BETA
Currently downloading
Downloaded to ...
Google Drive File Picker
Conversion History

To access files you have converted in the past during previous sessions,
you need to:

Legal Information
Options
Privacy Policy
Share with other apps

Fetching your file in order to share it with other apps...

Terms of Use
Upgrade

Upgrade to Premium

And get more features

MConverter is used at:

Google Nvidia Snapchat

What our customers say:

Whitney
Dec 6, 2021
This app is exactly what I asked for and is super easy to use. I am not a big time computer wizard so I need apps that do what they say do in a straightforward process. This app does just that! I love it and will continue to use it and will advise others or it as well. Good job to the owners/writers! And, sincere THANK YOU!
지나가던인간
Sep 22, 2021
(translated)
Although there are occasional errors, I was very impressed with the efforts of the developers to receive feedback from users and to improve the inconveniences quickly. I will be using it more often in the future.
Antonio Hurtado
Mar 16, 2022
The most fantastic, fastest, best and easiest file converter I have ever had installed on my mobile. You deserve all the praise possible, more than happy, I am super grateful, I will always be grateful to you for this super fantastic application. This super fantastic app has literally saved my life, now I can read novels and books in any format, including pdf, which has very small print, in epub format 🌟🌟🌟🌟🌟 Thank you very much👏👍🤝😊❤️
Scott
Apr 28, 2022
I grab the webm I want to move to my phone and drag it over to the app, I click the type of file I want the webm converted to (mp4), it does it in 10 seconds. easiest 5/5 of my life.
Payments are processed by .
MConverter does not see your full credit card number.
Already purchased Premium?

Verifying Your Premium

This may take a second...