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.

Answer 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.

Answer 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.