For PWA, implement the Native File System API

[Jaifroid]

Chrome and Edge Chromium have both implemented the Native File System API, which allows users to pick a file and returns a file handle which can be serialized and stored in IndexedDB for future use. This is already implemented and available in Edge under a flag (edge://flags), and is an Origin trial in Chrome.

See https://web.dev/native-file-system/

It would be a game changer, as the PWA would then have feature parity with the UWP app.

[Jaifroid]

I've now implemented a working version of the Native File System API (for Edge Chromium and Chrome) in the PWA version at https://kiwix.github.io/kiwix-js-windows . To test,, it may be necessary to load, exit and reload the app a couple of times until the new code is cached by the Service Worker. Or else, open Dev Tools -> Application -> unregister service worker, force reload (Ctrl-Shift-R). The code is only properly implemented for the Select folder option that is displayed on startup (the Select file option is only partially implemented).

The kiwix.github.io address is implemented as a Chrome Origin Trial for the Native FS API, which is also working for Edge (Chromium), so the user does not need to set any flags.

The experience is as follows:

• The user must of course pick the folder in which their ZIMs are stored;
• A browser prompt (part of the API) asks the user if they wish to allow access to the files in the folder;
• If the user accepts, then access to the folder is serialized in IndexedDB, and the user can access any file in the folder merely by clicking on the archive name in the list of archives (see screenshot);
• If the user exits and restarts the app (or browser tab if the PWA is not installed), then the previously accessed folder contents are shown in the list of archives (but not at this stage refreshed);
• If the user then clicks on one of the archives, the browser prompt requesting permission to the folder shows, and if the user accepts, then all archives in the folder are accessible to the app with a simple click.

[Jaifroid]

Advantages of this API:

• It reduces significantly the number of clicks required to access archives in a folder, particularly at startup of the app after having selected a folder with ZIM archives in a previous session;
• Number of clicks are reduced to two: one click on an archive title, and a click to give access permission;
• It is a near-native experience if the PWA is installed via the onbeforeinstall event (but still works fine without installing).

On the downside:

• It's only near-native, because although the file/directory handle is serializable in IndexedDB, files cannot be accessed without a user-initiated click/tap (the API throws a security error saying user activation is needed) followed by user granting permission;
• Installing the PWA through the Store (as opposed to installing it from https://kiwix.github.io/kiwix-js-windows) provides a superior native experience without the need for permission prompts, and thus still feels faster (because a PWA installed via the Store has access to more powerful UWP APIs);
• Only Chrome and Edge are supporting this API currently; Firefox is taking a more conservative approach.

Still, the experience is pretty acceptable IMHO, and I'll provide feedback to the Origin Trial to suggest they allow an installed PWA to serialize permissions along with the file or directory handle.

[Jaifroid]

This is implemented.