Progressive Web Apps — Offline And Add To Home Screen
Why?
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!
How?
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.
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:
- Offline code lab — The famous Air Horner web app. It is extra useful during a good football game. You can also take a look at my ‘note pwa’ — Noter.
- 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.
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:
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.
Misc
- Start with progressive web app config repo for barebones PWA or WSK for a starting point with a build process).
- Check the application shell architecture for faster first-paint, and the ability to work like an app that got its skeleton and its content separated.
- Design — Try to leverage the power of Material Design and there are libraries for using it:
- Vanilla JS
- Polymer Paper
- Angular Material
- Material UI for React. Some cool date-pickers.
- Performance — Follow the RAIL performance model.
Good luck!
Filed under: Chrome
Tagged: javascript, mobile web apps, PWA, service worker
Originally published on Ido Green
