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:
- Offline capabilities.
- Push notification.
Let’s see what can be done in each part.
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.
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.
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.
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.