Progressive Web Apps with Ionic

Building progressive web apps can be hard. Getting what is traditionally considered a “native” look and feel on the web is something that many web technologies are just getting the hang of. The awesome thing about Ionic is that we specialize in providing the native look and feel PWA’s strive for, with performant, native style components and a complete base to build your PWA on, so you can just focus on building something cool.

This is why Ionic is the perfect platform for building progressive web apps and the reason I chose to build my latest PWA, IonicHN, with Ionic 2. Also, for those not familiar with what a PWA is, check out this article for more info.

Since Ionic 2 is built with web technologies that normally run in a WebView when packaged as a native app, it’s already built to work perfectly in the browser—in fact, IonicHN runs just as well as a packaged app as it does as a PWA. This gives you a huge advantage when building your PWA with Ionic, because if you know how to build an Ionic 2 app packaged as a native app, then you are already 95% of the way to building a PWA. Just add a service worker and a manifest, and you’re ready to deploy!

What Makes a Web App a PWA?

There are a few key things that make a PWA, well, a PWA. You’ll notice as I go down this list that Ionic already takes care of a lot of this for you.

First, a PWA is meant to be eventually installed to the user’s home screen, which means they will access it exactly like they would a native app. Due to this, many users expect a similar experience to a native app. Luckily, Ionic 2 is designed to create a native app experience with standard web technologies, so this is already handled for you.

Second, a PWA should be very performant. Remember that your PWA is gonna be installed to the home screen right alongside native apps. Ionic 2 is built from the ground up with performance in mind, which means you barely have to think about it.

Third, the thing that most differentiates a progressive web app from a normal web app is the fact that it can be installed to the home screen. This requires that you write a web manifest for your app. While this is not something Ionic currently does for you, I’ll show you just how easy it is.

Finally, the majority of native apps will launch offline and give at least a limited offline experience to the user. In the past, this was outside of what was possible with web apps, but with service workers we can now make our web apps work while offline. This is also something Ionic 2 doesn’t currently do for you, but while service workers may seem like daunting JavaScript monsters that are out to get you, I’ll show you just how simple it can be to add a service worker to your Ionic 2 PWA.

Adding a Web Manifest

So, you’ve built your Ionic 2 app and are ready to transform it into a PWA. All you’re missing at this point is a web manifest and a service worker. First, let’s add a web manifest to your Ionic 2 app. Simply open up the www directory and add a file named manifest.json. In this file, we’re going to list a few things that the browser uses to install your app to the user’s home screen.

Below is an example of my web manifest for IonicHN:

{
  "name": "IonicHN",
  "short_name": "IonicHN",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [{
    "src": "img/icon.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "background_color": "#FF9800",
  "theme_color": "#FF9800"
}

Once you’ve created this file and filled out the info for your app, you must link to your web manifest from your index.html file in the www directory. To do this, simply open that file and add this line into the head:

<link rel="manifest" href="manifest.json">

And that’s it; you’ve added a web manifest to your Ionic app!

Adding a Service Worker

Now, to tackle the offline situation. While you can get as in-depth and complicated as you like with your service workers, one of the simplest ways to get started is with the service workers provided in this handy repo from the Google Chrome team, which provides many different service workers with comments about what they do, as well as demos of each.

To add one of these service worker implementations to your Ionic app, simply create a file in the www directory named sw.js and copy and paste the service worker you picked to that file. Once that’s done, you can add a little JavaScript to your index.html file that will make the service worker do its thing. Simply open the index.html file in your www folder and add this code to the head:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js').then((registration) => { 
    // Registration was successful 
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
  }).catch((err) => {
     // registration failed 
     console.log('ServiceWorker registration failed: ', err); });
}

Now, simply run ionic serve inside your project directory from the command line and bask in the glory of your first PWA built with Ionic!

Welcome to the PWA world! We’re happy you’ve joined us.? As you can see, Ionic 2 makes building PWAs extremely easy, and we’re extremely excited to see what awesome PWAs you build with Ionic 2. If you’ve built a PWA with Ionic and are ready to show it off, feel free to tweet at us–we’d love to see what you’ve built!

Progressive Web Apps are a major initiative for us, and PWAs are going to be a first class platform for deployment with Ionic apps soon. To us, Progressive Web Apps are the future, and we look forward to supporting them extensively in Ionic. Keep an eye on our blog and our docs for updates!