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

A PWA is:

• 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

But…how is it possible to target the points in this checklist? Just follow the App Shell Model architectural pattern!

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 index file defines the main shell layout and includes main.js, the script where the service worker is first registered.

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

Service worker

The service worker lies in a dedicated file (usually called sw.js) in the PWA root, which defines files to be cached and what should the service worker do on on install and fetch events.

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

Adding the manifest file

The manifest file specifies the PWA icon and some theme option (see the file below). To fill the file you should provide icons at different resolutions:

Going offline (with styles!)

Just to ensure that service worker has been registered and is currently running, press F12 press F12 and open the Chrome Developer Console in order to navigate to “Application” tab and check its status.

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

You can find the complete PWA seed source here and the demo here.

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