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:
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?
My definition of a Progressive Web App is actually a combination of those two definitions. When a user adds your PWA to their homescreen they are expecting it to act like native apps that they are used to. Therefore, that comes with the user expectation that your PWA will be able to have all the functionality of a native app, and with modern HTML5 device APIs and service workers we are getting very close to that goal. On the other hand, until these advanced web technologies get implemented on all the big browsers we have to think about users that are using browsers that do not support these APIs yet. Those users should still get a good, if basic, experience. Then, if they load it on a browser that supports all these modern APIs then they should get the full experience of a PWA.
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?
Service workers are a relatively new API that basically allow you to build a "proxy" between your web app and the network. They are scripts that run independently of your app (even continuing to run after a user closes your app) and allow you to do things such as dynamic caching and pre-caching, background sync, push notifications, display custom 404 pages for your app and much, much more. They make heavy use of the Fetch API and promises and allow you to take full control of how your app interacts with the network. They are currently supported in Chrome, Firefox and Opera and are currently under development and already available in the dev preview of Edge.
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?