Disconnected web

I recently asked myself if we as developers should start considering the offline first approach as a must have. When I started my adventure with the World Wide Web using 56 kbps pages were much smaller, but that didn’t mean they loaded faster ;) There were also RSS feeds, where the user would get a simple XML file with i.e. news with a description or a link. But if you would like to download a modern page using this bandwidth, it would take ages.

So…. I want the data!

If your page is rendered server-side, you have two options to decrease the size of the loaded data:
1. Build a simple API
While having cached scripts, you can send requests to get only needed content, and then render the data on the user side (i.e. handlebars).
2. Build a parallel page template
Instead of responding with a full page (header, content, footer etc.) you render only the page dedicated to the content and place it in the content container.

If you already have a page where the content was API based, you are a few steps ahead ;) Allow the user to save your page on their device. You need to dig into two topics: web app manifest and progressive web apps. Both can be easily found on the MDN pages
- Manifest
- Progressive_web_apps

From the progressive web app, you should check the Offline Service workers under Offline_Service_workers.

A quick look on it and we can see a list of files we want to cache, so the user will have access to them even offline. While you can decide what you want to cache, you do have full flexibility. For an already existing page, with the progressive enhancement approach, it will be easier to prepare a new, simple version of your page.

Structure makes difference

While you know how to prepare your page to be installable on a device and how to cache certain elements, you need to plan how to split your layout and UI styles and prepare minified version of your UI styles. Also, the more generic your page is, the less space it will consume. Respect the user and do not store too many files on his device, save only what is needed.

Save energy

Skip animations, make simple CSS, use dark mode (!)… For more information, see the short article thinking about power usage and websites where you can also find link to more detailed description - save planet improving website performance.

Additional thoughts

As I’m currently working on a page that uses maps, caching requests to map tiles can take up megabytes of space really quickly. I found it useful to have an estimated path to follow that can be easily displayed on the map view engine using GPS coordinates, so the users know if they are on the right path without a map. It is also good to get familiar with the progressive enhancement the new hotness, so you can prepare your styles and HTML for each stage (offline/mobile/desktop) without repeating and overwriting code.

May the bandwidth be with you!