Build your first PWA (for users’ good!)

Spending a lot of time online, users now dislike to have bad online experience.

They search for fast, reliable and engaging experience and a PWA (Progressive Web App) can offer all those things. 🎉

To better understand the mechanism, you are going to develop a simple PWA showing some text and an image: when the connection is not available the image, the styles and some dummy text will be visible anyway.

You can see the final result here.

Fast, reliable, integrated, engaging

  • Fast, quickly responding to user interactions.
  • Reliable, being capable of working with non optimal network conditions or no network at all.
  • Integrated, offering a seamless experience in the OS.
  • Engaging, with a beautiful design and using notifications.

and that’s why users are at ease interacting with them!

Recipe for a PWA

Embracing the App Shell Model, you are splitting the application UI and logic (the shell) from the content: on first access, the shell is cached so everything you have to do is update the data, minimizing the transfer load.

App Shell is the immutable part of the web app: just HTML, CSS and the minimum Javascript required to run the application and to show the UI; data is just going to fit there.

The caching mechanism is implemented by using a service worker, i.e. a script that runs in background and decides if a resource should be loaded from the cache or requested online. Additionally, Service Workers can also manage push notifications to enrich the user experience.

Index file

The main application script registers the service worker and fetch the data to be displayed in the PWA.

Service worker

Service Worker uses cache API to load assets and store them for subsequent online/offline uses.

Adding the manifest file

Going offline (with styles!)

To test offline behaviour, click on the “Network” tab and select “Disable cache” and “Offline”, then press F5 to reload the page.

Since the service worker is fetching pages from cache, the user will see the dummy text…but with images and styles!

Fonts are not available, since they are loaded from Google font site.

Next steps — publish your PWA

Please refer to Rihanna Kedir’s fabulous article on how to quickly publish your PWA!

Full-time Human-computer interpreter

Full-time Human-computer interpreter