Open file with system application in a Progressive Web App

Question

I'm trying to figure out if it is possible to open a file from a Progressive Web App with the default system application.

The idea is that a PWA would store for offline use some files (e.g. a .docx file), and that the user would be able to open them without (re)downloading them.

The ideal situation would be that the PWA is able to load into memory the file, make it accessible to the default system application for that file type (e.g. Word for .docx files), watch for changes (i.e. the user saves edits), and then store it back into the PWA storage. Even a read-only solution would be great.

Since there are serious security issues implied, and since from a Google search nothing came up, my best bet is that this is not (yet) supported. However, I'm hoping that there might be a way to do it of which I'm unaware and that does not require the user to download a copy of the file.

Solution 1

Since this question has gained a lot of attention lately, for anyone interested on the subject there are very exiting news: the Writable Files API (it is now called the File System Access API).

At this time the proposed new APIs are merely in the design phase, and there is a vivid discussion about the opportunity itself of introducing them. So it looks like we are still far from a production ready solution.

UPDATE 2019-04-12

There is now an explainer (also linked in the above mentioned post) with a lot of useful info on how the proposed APIs will/should work.

UPDATE 2021-02-19

The File System Access API is still evolving nicely. On top of the explainer mentioned in the previous update, there is also a draft doc on MDN Web Docs

UPDATE 2021-10-14

A very good starting point to know more about the File System Access API is still this post on web.dev, which is being constantly updated.

Solution 2

No, PWA cant listen to regular file system changes except for the files that are sandboxed to the app itself(which is like a virtual file system for each PWA installed)

You can refer to the only event listener for storage change here, which will be only for what you store from PWA to your PWA specific store space, which your external apps cant access.

<input type="file"> is the only way you can access regular storage file system, which will not have any even listener.

What you are expecting is something many developers are hoping to get soon, but not in the general PWA spec form. Its mainly blocked by security constraint as you have mentioned. Think of all PWA websites(which looks like a normal web to end users) we visit in web browser have access to your full file system.. who will accept and like that fact? No one. PWA should evolve to have separate permissions once its added to home screen and we can expect to see these features after that.

Update: Only alternate solution you have to use both filesystem and PWA is to wrap your PWA in a Cordova and use native file system API along with PWA features like Service workers to have offline capability. If your targeted users webview is recent enough(v40+), it will support service workers. With this option, can't distribute the apps via "Add to home screen" option though and if you do, it wont support file system access.

Using Electron to wrap your web app can be another alternate, which will also give access to your file system. IDEs like Atom, VS Code are built using Electron and HTML/CSS/JS.

Comments

[don]

Thanks for the clarification on the listening part. Do you know if opening a file stored by the PWA is/would be supported (ie the PWA opens a file that it is already stored within it s storage file system)? As mentioned, even in read only mode would be good for my purposes

[Anand]

Your question is not clear. If you want to open a file “in” PWA, which is also created by PWA, it’s possbile. If u want to open the same file in some other app like word, I doubt.. may depend on the OS. May possible I. android but not in iOS I believe. Even if u find the sneaky path in Android and find a way to open it, it may not be a thing ur users would like to do. Wrap

[Anand]

@ghego1 check the update in the answer. Thats the only option you have for now, if you need both PWA and filesystem access.

[don]

Thanks for the additional info, however I'm looking into PWA precisely to avoid app wrappers like Cordova and Electron.

[Anand]

I understand PWA is the preference here. But gave the other two options as there is no pure PWA solution available. I also don't get what you mean by this, as that seems to be different from what you have originally asked. " PWA opens a file that it is already stored within it s storage file system". Regardless, NO PWA solution for direct file system accessing and monitoring.

[Amirhosein Al]

What if we need to list files (without showing a file picker)? Like list users audio files.

[don]

As per the current implementation, you need to show a folder picker, becajse you need to have explicit user consent to do so. The folder picker can be opened only after a user input (for example: click on a button) and must be obtained each time the pwa is loaded. You can however store the reference to the folder, so the next time the user opens the pwa you don't need to show the folder picker, but only the gran permission pop up