Generally, when you build an app with a HTML5 mobile framework like Ionic, you package it with Corodva (which wraps the application in a native shell, and provides access to native APIs) and put it up on the app stores to be installed on people’s device – this is a hybrid app. Skip the part where you build the application with Cordova, and just host your application directly on the Internet and you have a mobile web app or a progressive web app (PWA).
In this post, we will be covering what exactly a progressive web app is, we will be having a chat to Justin Willis, and also looking at some examples of progressive web apps out in the wild.
A Quick Introduction to Progressive Web Apps
A progressive web app is, more or less, another word for a mobile web app – an application that creates a native-like experience through the web. Unlike a native app or a hybrid app that you have to install through app stores, a progressive web app can be viewed simply by going to a URL in your browser.
The progressive part of the name is something that has come about more recently, and it is certainly picking up steam. It isn’t just a new fancy word for the sake of it, it does imply more than just a native-like app that is hosted on the web. It may depend on who you ask but in general a progressive app may:
- Make use of modern web based APIs
- Use service workers for offline capability
- Enhance “progressively” based on the capabilities of the device it is running on
- Be able to be installed to the users home screen
Although progressive web apps are gaining popularity, they are still a long way from mainstream use. The two biggest limiting factors are perhaps that many native APIs are still not exposed directly to the browser, and there is not widespread support in browsers for technology important to progressive web apps like service workers (more on that later). There is also the issue of the learning curve for users, most people are acustomed to installing apps from an app store now, but might be confused about “installing” an app from the web. Until these issues are solved, we will likely be creating hybrid apps with Cordova (which gives us access to all of the native APIs we need) for a while to come.
Progress is being made to that end though, and we will likely get there eventually. I recently saw this tweet about Cordova doing the rounds on Twitter:
— David East (@_davideast) May 20, 2016
which is both humourous and accurate. A polyfill is common term for a bit of code that fills in missing functionality that you may want to use – they are used very frequently to enable support for functionality in browsers that don’t support the same features that modern browsers do. In fact, if you take a look at PhoneGap Beliefs, Goals, and Philosophy, an article from 2012, you will see that this has always been the goal:
“The ultimate purpose of PhoneGap is to cease to exist.”
and to expand upon that a little further:
“The web is decidedly not a first class development platform: opaque introspection, blunt tools, poor API surface area, and a rather limited set of GUI elements. The web has host of other problems, or perhaps features, such as the sandbox and many missing APIs which need addressing which provides a fantastic opportunity. In short, we feel the web as a platform is at a disadvantage, and we’re working to polyfill those gaps with PhoneGap.”
The final form of progressive web apps is essentially the realisation of this goal, the evolution of the mobile web into a first class development platform. In the mean time, the purpose of PhoneGap and Cordova is to fill the gaps between the mobile web and native apps. The future many of us are waiting for is when native applications and app stores are only used for highly specialised apps, and the web is used for everything else.
Although there’s a long way to go before we can do away with the app stores, progressive web apps are maturing, and we can make some pretty cool mobile web apps that take advantage of progressive features already.
Progressive Web Apps in Ionic 2
With that quick introduction to progressive web apps out of the way, I want to introduce you to Justin Willis, a Support Engineer at Ionic, who has been getting his hands more than a little bit dirty in the progressive web app world. We’re going to get some of his thoughts on progressive web apps in general, and then take a look at some of the progressive web apps that he has been building with Ionic 2. Here’s Justin’s answers to some questions I asked him.
Q. I’ve seen “progressive” used in the context of “modern, forward thinking” i.e using HTML5 APIs, but also in the context of the app improving “progressively” based on the device the user is on. What is your definition of a Progressive Web App?
Justin brings up the topic of “service workers” here, which I eluded to before, and it’s certainly an important part of creating that native like experience in a progressive web app.
Q. Service workers and offline support are things that most developers will have at least heard about, but not as many understand what it is or what it involves – can you briefly explain the concept and why it is important to progressive web apps?
Justin’s response here highlights the extent to which service workers can help improve your progressive web apps – not only are these features useful in allowing offline access to content and handling various events, the fact that we can cache static resources will greatly improve performance by lowering network requests and improving loading times.
Q. What do you think are the key advantages of progressive web apps when compared to native or hybrid apps?
Finally, with the advent of service workers and with the focus that we have always had in the web world with making efficient use of the network, a PWA can be much more frugal with a user’s data. In places like Africa where data can be very expensive, downloading a big native app and installing its future updates can be the difference between a user having data that month and not having any data. On the other hand with PWAs we can do small incremental updates, use service workers to cache as much data as possible and provide good experiences while completely offline and, since most PWAs are much smaller than a native app, we can ensure that users will not take a big hit to their data the first time they use your app.
Q. Let’s say I’m building an Ionic 2 application and then decide that I want to publish it as a progressive web app. What steps will I need to take that are different to building it as a hybrid app with Cordova?
Q. You’ve been using Ionic to build your progressive web apps, is there anything in particular that Ionic is doing well when it comes to progressive web apps?
The reason I use Ionic so extensively is because, I believe, it is the best HTML5 mobile framework available. It has a great set of components, an amazing default user interface tailored to various platforms, and most importantly it has achieved a level of performance that makes most apps feel completely native, and that performance is continuuing to improve. Naturally, the same reasons that make Ionic such a powerful framework for hybrid apps will translate directly over to progressive web apps as well. Anything that the Ionic team does on top of this, like support for service workers as Justin mentioned, is icing on the cake.
Progressive Web App Examples
We’ve covered what progressive web apps are all about, and dived into deeper discussion about the topic with Justin, so now let’s look at some real life examples!
All of the following progressive web apps have been developed by Justin using the Ionic 2 framework. If you want to take a look at them for yourself, just grab your device and load up any of the URLs below (or just look at them right there in your browser, these are progressive web apps, baby!).
Some of these are still in development and due to lack of support in Safari some features won’t work – so for the best experience, use an Android device (hopefully we’ll see support for these features in all browsers soon enough).
My Ionic 2 Hacker News PWA is built using the awesome new Firebase Hacker News API. It provides you a simple, mobile first interface to access all your favorite Hacker News articles. The big thing I focused on with this app is performance. Because of our use of
translate3D with our
ion-list component IonicHN provides 60fps scrolling even as the list of articles starts to get big. Also, it uses
infinite-scroll to ensure that it is not downloading a huge list of articles to a user’s device when they first load the app.
Anon Chat was built to showcase the Web Sockets API that allows you to implement things like the real time chat this app provides, web push notifications and to showcase that things like real time chat, which tend to be associated with native apps on mobile can also be done just as well with a PWA. It generates a random nickname for you when you first use it which allows you to anonymously chat over a secure https connection in the the various chat rooms available. Anon Chat also uses a service worker to implement web push notifications. Web push notifications allow you to send push notifications to your users even when your PWA and the user’s browser is fully closed. This is just one more example of what is traditionally thought of as native functionality that is now available on the web.
Hodi is a showcase for what is possible with WebRTC. WebRTC is a Web API that allows for real time streaming of data such as video and audio output between secure connections. Hodi shows the true power of the modern web by providing you with two way video chat, something that is traditionally thought of as native functionality, but with all the advantages that a PWA provides.
Hopefully this article has given you some insight into what a progress web app is, and how they are different to hybrid or native applications. In the near future, I will also start publishing some tutorials on building some progressive web apps, so if that’s something you would like to see sooner rather than later let me know!
Also a big thank you to Justin for taking the time to provide us with the PWA knowledge that’s kicking around in his brain, if you’ve made it this far in the article you should go follow Justin on Twitter for more PWA goodness.