Offline Capability

I have recently implemented offline storage in PHPRunner app, mainly for storing and retrieving config and user's preferences. the user expereince is good, and I had used Web Storage for that.

I am by no means expert, so here's just sharing some background about the Offline Storage and where i see PHPR app possibly fits in:

A bit of Background

There are mainly 2 offline storage methods used currently. Web Storage and IndexDB

Web Storage (a.k.a localStorage and sessionStorage):

1. to store small amount of data as key/value strings (or JSON strings, Max 5 Mb, varies with browser).
2. Synchronous API (i.e. blocking requests) - not for large data with frequent update and retrival.
3. Very Simple to use, almost zero learning curve if you know JS.
4. There are 2 types, sessionStorage and localStorage. sessionStorage will be destroyed when browser close, while localStorage will persist, until user or your app clears it.
5. Image can only be stored as Base64 encoded string, but it will hit 5Mb limit easily, so resize your image first.
6. Do not store sensitive data, especially in localStorage, as XSS attack is possible on Web Storage. If you absolutely need, encrypt it using the JS libraries localStorage-slim or Secure-Is

I find it very useful in the following situations:

1. If you store user config eg. users' preferences, Day and Dark modes, timezone, user search strings, language translation table, etc.
2. With 5 Mb limit, you likely can't take the PHPRunner App's Database and dump it into the Web Storage. Maybe note taking app is one example that can adapt and fit into an offline app.
3. For news reader - take the headlines once from DB or via API and stores it into Web Storage and read offline.
4. Since only 1 person will be accessing the browser, storing data locally will not significantly affects the user experience, if there is no frequent update and retrival of large data from localStorage.
5. Storing PHPrunner REST API data, without a need to store in Database. So each API request, you dump it into localStorage. Always check the available space and manage it (purge it or do a new API call) when insufficient.

indexedDB:

1. Support significantly larger amounts of data (Gigs).
2. Non blocking API.
3. Supports Query, Indexes and transactions, and provides simple data type (e.g. Date).
4. Very Complex.

Difficult to support, if there is a problem, and it is due to indexDB residing in a user browser, developer can't see what's going on there. They are some wrapper libraries out there, but imo, it adds another layer of debugging uncertainty to it. Some say indexDB is horrific, I can imagine that. However, i would be interested to try again at a suitable time when things are less complicated.

indexedDB info, if you are interested to learn more.

Refer to this link for more detail discussions. The thread is quite old, but many of the things still apply.

Playground

Try W3School - WebStorage API and open your Chrome Console, and click to Applications Tab and observe the data stored in your browser's local storage.

The above Web Storage is a good start to understand it and actually implement it in PHPRunner App.

There is also a forum member asking about putting a few lines of webstorage javascript codes into Javascript Onload Event recently and had sucessfully done it, you can get some hint there too.

There are areas to consider too, such as versioning and caching of JS/CSS/HTML assets, and other related technologies, such as Service Workers, Background Sync etc, but this is another topic altogether.

Thanks @acpan. This is very interesting and I will definitely look into this.