Talking Progressive Web Apps with Ionic’s Justin Willis



·

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?

In my opinion, the biggest advantages of Progressive Web Apps are: low entry friction for users, small size, and efficient use of the network. PWAs provide an extremely low friction way for users to get functionality on their devices. They do not have to load up an app store and then decide to use precious device storage to download your app and its future updates. Instead, they can simply visit a URL in their browser and get the full functionality of your app. Then if they decide that they like it and will use it more in the future, or if the browser detects that they visit it often then they can choose to add it to their homescreen.

The average PWA is typically much smaller than the average native app. For users that have mobile devices with low storage space (the average Android device in developing countries) installing a big native app can be a big decision. On the other hand visiting your PWA and only downloading and caching a tiny amount of minified and tree shaken Javascript is a much easier decision to make.

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?

The two things that make a PWA a PWA are a manifest file and a service worker. If you add both of those things to the `www` directory of your Ionic 2 app and then link to the manifest and register the service worker in your `index.html` file you will officially have built your first PWA! The only other thing to consider is if any Cordova plugins you are using also work on the web and if not if there are HTML5 APIs that provide the same functionality.

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?

With Ionic 2 we are very focused on making PWAs a first class citizen. Because of this we are focusing very heavily on things like performance, making it easy to add a service worker to your app and ensuring that Ionic 2 provides the user with a full native like, mobile app experience in the browser and on the user’s homescreen. Also, because Ionic 2 is built with Angular 2 which itself was built with a mobile first mindset, we are built from the ground up with mobile performance in mind. Because of this your Ionic 2 PWA can comfortably sit next to a native app on the user’s homescreen and provide the fast, smooth experience that a user expects.

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).

Ionic 2 Hacker News

Ionic 2 Hacker News

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.

View Ionic 2 Hacker News

Anon Chat

Ionic 2 Anon Chat

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.

View Anon Chat

Hodi

Ionic 2 Video Chat

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.

View Hodi

Summary

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.

What to watch next...

  • Luís Cunha

    Articles about PWAs using Ionic 2 is definitely something I’d like to see sooner than later =)

  • Steffen Tallieu

    I would be very happy to see how you efficiently share a codebase between a hybrid app built with Ionic 2 and a PWA built to be used as replacement for the hybrid app in a desktop browser.

  • jamesjmtaylor

    Same here! Can’t wait to see the tutorials that you come out with!

  • Yen Jacobs

    I would love to see PWAs tutorials, especially with Firebase Push notifications integration!

  • Gonzalo

    Thank you!. I really appreciate to see more PWA’s tutorials
    .

  • Rodrigo Rubio

    Thanks for the article super interesting. Just one quick one, where can i find a how to develop/deploy a PWA? or is deployment same as a normal website?

  • Michel K

    Kudos. A very well written article.