Progressive Web Apps – Offline And Add To Home Screen

Screenshot 2015-05-13 18.04.53


Progressive Web Apps are all about an amazing experience. To me, it’s the moment you see your users happy from the quality experience you gave them.
Web apps should be useful to users from the very first visit (where it’s fast and useful even with bad connection), to the launch from a home screen or push notification. There are many good use-cases for a new web apps with these capabilities. However, think on your own site/app today and see if it can benefit from these aspects.
I think that in most cases, the answer will be: Yes Please!


We needs to follow these two steps: Serve our web app over HTTPS and leverage service worker.
The third step, is in the hands of our users. It is a good reflection to our quality of work and if our web app is useful for them.
Screen Shot 2016-03-20 at 2.48.48 PM

Let’s see what are some of the good resources we have today in order to jump into the water.

Offer an offline experience

You should serve your site over HTTPs and implement Service Workers. Here are two good tutorials to show you how to implement it on a new project or a current one:

  1. Offline code lab – The famous Air Horner web app. It is extra useful during a good football game.
  2. Your first PWA – Weather web app.

Have a manifest file

This will enable you to define what to launch and how to launch it. Moreover, it is a must if you wish Chrome to offer users to install your web app.
Currently, if the user is navigating to your site two times within 5 minutes. She will get a new suggestion from Chrome to add this site to her home screen.
See the image below for an example of this native suggestion that came from Chrome on Android.Add to home screen - web app example

Push notifications

The last step will give us the ability to engage with users with native push notifications. This is critical, because the browser might be close but we still wish to be able to send an important message to our user (e.g. an airline wish to inform a passenger that the flight is delay. I know it’s not common, but still). Since we have our service worker as a proxy script that is waiting (in the dark) for such events, we can use it!
Check this “push notifications” code lab to learn how you can implement it.
See the image below for the most important aspects to remember when working with this powerful feature.

You push notification should be:

What push notification be for your web app

You can allow users to interact with your notifications:


It’s all about the user experience and the goal to make her as productive (and happy) as possible.
So this ability is quite nice.


Good luck!


One thought on “Progressive Web Apps – Offline And Add To Home Screen

  1. Pingback: MOBILE WEB WEEKLY NO.100 – ENUE

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s