Handle files in Progressive Web Apps

  • Article
  • 3 minutes to read

Progressive Web Apps that tin can handle files feel more than native to users and better integrated in the operating system.

Websites can already let users upload files past using the <input type="file"> or drag and drop, simply PWAs go ane step further and can register as file handlers on the operating system.

When a PWA is registered as a file handler for certain file types, the operating organization tin automatically launch the app when those files are opened past the user, similar to how Microsoft Word handles .docx files.

Enable the File Handling API

The File Treatment feature is experimental.

To enable the File Treatment feature:

  1. Go to border://flags in Microsoft Edge.

  2. Select Search flags and type "file handling API".

  3. Select Default > Enabled > Restart.

    Enable the 'File Handling API' experiment.

Define which files your app handles

The first thing to do is to declare which types of files your app handles. This is done in your app manifest file, using the file_handlers assortment member.

Each entry in the file_handlers assortment needs to have 2 properties:

  • action: The URL the operating system should navigate to when launching your PWA.
  • have: An object of accepted file types. Keys are MIME-types (partial types, using the wildcard symbol *, are accepted), and values are arrays of accepted file extensions.

Consider the following example:

              {     "file_handlers": [         {             "action": "/openFile",             "accept": {                 "text/*": [                     ".txt"                 ]             }         }     ] }

In this example, the app registers a unmarried file handler for that accepts text files. When a .txt file is opened by the user past, for example, double-clicking its icon on the desktop, then the operating organisation launches the app using the /openFile URL.

Find whether the File Handling API is available

Before treatment the files, your app needs to check whether the File Handling API is available on the device and browser.

To check whether the File Handling API is available, test whether the launchQueue object exists, as follows:

              if ('launchQueue' in window) {     panel.log('File Handling API is supported!'); } else {     panel.mistake('File Treatment API is not supported!'); }

Handle files on launch

When your app is launched by the OS after a file was opened, yous can use the launchQueue object to access the file content.

Use the following JavaScript code to process the text content:

              if ('launchQueue' in window) {     panel.log('File Handling API is supported!');      launchQueue.setConsumer(launchParams => {         handleFiles(launchParams.files);     }); } else {     panel.error('File Handling API is non supported!'); }  async function handleFiles(files) {     for (const file of files) {         const blob = await file.getFile();         blob.handle = file;         const text = wait blob.text();          console.log(`${file.proper name} handled, content: ${text}`);     } }

The launchQueue object queues all the launched files until a consumer is gear up with setConsumer. To learn more almost the launchQueue and launchParams objects, go to the File Handling explainer.

Demo

My Tracks is a PWA demo app that uses the File Handling characteristic to handle .gpx files. To endeavour the feature with this demo app:

  • Enable the feature in Microsoft Edge.
  • Go to My Tracks and install the app.
  • Download a GPX file on your calculator. Y'all tin use this test GPX file.
  • Open the downloaded GPX file.

Notice that the app launches automatically and that Microsoft Border requests your permission to handle this file.

The 'Open file?' permission request dialog.

If you allow the app to handle the file, a new entry appears in the app's sidebar, and yous can click the checkbox next to it to visualize the corresponding GPS track.

The new GPS track handled by the My Tracks app.

The source code for this app tin be accessed on the My Tracks GitHub repository.

  • The manifest.json source file uses the file_handlers array to request handling .gpx files.
  • The file.js source file uses the launchQueue object to handle incoming files.