Magesh Ravi

Magesh Ravi

Artist | Techie | Entrepreneur

A self-taught UI/UX designer, full-stack web developer and passionate business owner. Lives in Sheffield, United Kingdom.

cover-image

Notes App update - Minimal offline support

Here is my first update on the Notes App.

As mentioned earlier, the aim is to make this app fully PWA compliant, which includes offline support. In this update, I have added caching mechanism for all the static assets and certain data URLs (folders and tags list). This means, you will be able to see the list of folders and tags even when you are offline (after the initial load, of course).

You can check this out by following the steps below.

  1. Visit notes.mageshravi.com from your mobile device. Please make sure you're not using the Private/Incognito mode.
  2. From your browser menu, click on 'Add to homescreen'. On iOS, this can be found under the share menu.
  3. Open the app from your homescreen once just to make sure the service worker is installed/activated correctly.
  4. Now, turn on airplane mode and open the app from homescreen again. You will still see the folders and tags list instead of 'Safari cannot open the page'.

Please note, this is NOT a complete offline solution. You might find clicking on the folders/tags/notes as not working properly. This is because the app builds up its cache as you start using it more and more. If you have clicked on every note under every folder/tag, the cache will have all of your data and then your offline experience will feel complete.

This update is essentially a proof of concept and a necessary first step in making the app truly PWA compliant.

Useful links:

Find similar articles tagged with