The PWA Data Trap

One of the big problems to solve when creating a PWA is how to store a user’s data without owning it.

Mobile and Desktop Apps

Mobile apps store a user’s data in the application sandbox. This sandbox is backed up by the OS using cloud services. You don’t need to worry about the user’s data unless you want it to be cross platform. Then the go to answer is a cloud database, but you can also use a file picker. If your application is desktop only, you can have the user choose a cloud folder that gets synced.

PWA’s have more limited options …

Option 1: Import / Export

This is the most basic option. Your database for a PWA is IndexedDB. You just need to import and export data into it. Implementing data backup and restore in IndexedDB (colinchjs.github.io)

Pros

• Works across all browsers

Cons

• The user must do extra work to back up their database and share it across devices.
• Data could be lost if the user changes browsers or disk space runs low and the OS cleans up web storage.
• Exporting is to the download folder.

Option 2: File APIs

The File System Access API is an improvement over importing and exporting. It allows the user to choose a file for their database anywhere on their system and you can read and write from it. The File System Access API: simplifying access to local files | Capabilities | Chrome for Developers

Pros

• The user can pick a file stored on a cloud drive like Google Drive. It will automatically get backed up and synchronized across devices.

Cons

• The API is only available on Chrome based browsers on desktops. You will need to fallback to Option 1.
• The database must be simple, like a JSON file, to write to it directly.
• If you want to use IndexedDB you will need to synchronize changes to your picked file like you would with a cloud database.
• If the file you pick changes while using it, like a cloud sync kicks off, you lose access to the file and the user must pick it again.

Option 3: Cloud Drives

You can use a user’s own cloud drive to store their data. Most have APIs and SDKS available to help. For example: Use Graph API with ASP.NET Core Blazor WebAssembly | Microsoft Learn

Pros

• Works across all browsers.

Cons

• You need to register your application with the cloud provider and pay for authentication after exceeding the free limits. For Google and Microsoft this is currently 50,000 users.

Option 4: Bookmarks

You can store your data in bookmarks and let the browser do the syncing. Work with the Bookmarks API — Mozilla | MDN

Pros

• Syncs across all devices if they are using the same browser or have set up third party cross browser bookmark synchronizing.

Cons

• The Bookmarks API is only available to browser extensions. You will need to write an extension that interfaces with your app.
• The database will be a hierarchy of small JSON values. See this example: ldenoue/yawas: Yawas Web and PDF Highlighter browser extension for Chrome and Firefox (github.com)

Option 5: Personal Cloud Database

Have the user set up their own cloud database.

Pros

• Works great for advanced users or companies deploying the app.

Cons

• The user must do a lot of extra, potentially too complicated work, to get it working.

Summary

There really is no great, free, and simple solution to this problem that I have found. Cloud databases are generally easier to set up, manage and control the data, but have costs and a greater responsibility for user data and support.

My recommendations are:

1. Option 1: Import / Export is the easiest and if you have a completely free app, there is an argument to be made “you get what you pay for”. You can enhance the export using Option 2: File APIs when the user is on a supported browser.
2. Option 3: Cloud Drives is a good option and will remain free until a user tipping point. At which point you need to find some revenue. For example, you could offer this option only to paying customers.
3. Finally, if none of these options work, and you don’t want to own the user data, you can consider turning your web app into a hybrid app instead of a PWA using tools like Electron or Tauri, or something more specific to your technology stack like Blazor Hybrid or Photino.

If you have more ideas, please leave them in the comments.