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 (=Treat the network as a feature), push notification and 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 enable 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 requires network connection to load, but then treat 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 apps 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 a way 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 bring 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!
Filed under: Chrome Tagged: mobile, mobile web, mobile web apps, PWA