blue in the dessert
Chrome

How To Build A Progressive Web App That Works Everywhere?

Progressive web apps are a huge opportunity for businesses. They are all about an amazing experience and make the user productive from the first visit. We wish them to be fast and reachable everywhere. I wrote in the past on ‘How to build a PWA‘ – But in this post, I will address the issues we face with the gaps in browsers. After all, this is the web and not all browsers are equal in terms of spec (ServiceWorker API) implementation. I see you smiling after the last sentence… That’s good.

There are 3 main parts that we wish to implement:

  1. Offline capabilities.
  2. Push notification.
  3. Installation.

Let’s see what can be done in each part.

Offline

This is the main feature that let us ‘feel’ more like a native app. The user can be productive everywhere, with or without a network connection.

The good news is that Chrome, Firefox, Opera and UC browser are all supporting service worker. This is the API that enables us to give our users the magic of offline capabilities. We even know that Edge will support it soon.

The (big) elephant in the room is 
What can you do about it?
Treat network as a feature, and use Web Storage API to cache content. Your web app will require network connection to load, but then treat the network as a feature. You can use AppCache. It’s a deprecated offline spec, but you can use it to buy time and give your iOS users an offline experience. Make sure you are using it only on a single page app as it got lots of ‘douchebag parts’.
Here is an example of a web app that works with app cache. I’ve created it during 2013, so please take it easy.

Push notification

Both Firefox and Chrome support Push Notifications and the Push API – It’s giving us a native push notification on mobile devices. On Opera and UC browser we can have native push notifications (on mobile) but, at the moment, only with GCM endpoint.
Try this ‘push notification code lab‘ to learn more.

It’s not supported (yet) on Safari so try using SMS for notifications. In some cases, email might also work.

Installation

It’s important to be on the home screen and just on click away from giving your users an easy path to reach your app.
The good news is that   are all supporting the web app manifest and install prompts.

Use manifest helpers to create meta tags. For example, there is a cool library that brings Web App Manifest files to older browsers: pwacompat.
Another way is to use JS install widgets like Cupiq.

You can see it in action if you click on the nice image below. It’s a nice little PWA that give you the ability to take notes.

Good luck and be progressive!

Standard

One thought on “How To Build A Progressive Web App That Works Everywhere?

  1. would like to load and open a progressive ap. vi a phone ap. key combination. That is – A client phones – while in the call I tell client to run my progressive ap…. by pressing #123 (or something) – the progressive ap then loads to their phone. Can Service Worker do this… or can Google make this happen.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s