The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

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!

  • kushagra rajpoot

    i have created a web App with ionic components. its awsome 🙂
    https://kushagragitter.github.io/Ionic2DemoWep/

  • http://nicholls.azurewebsites.net/ Juan David Nicholls

    Very very interesting, we need more examples about that 😀

  • arsene

    yeah, great post. thanks

  • Josh Garwood

    Hey guys! Quick question… Are PWA’s primarily meant for mobile, or is the intention for it to work in the browser (desktop resolution, say 1920×1080) and then scale down to mobile using media queries?

    • http://social-media-im-sport.de/ Marcel van Remmerden

      In my opinion, right now it is primarily useful for making the app available and simulating it in a browser.

      This does not mean that you cannot design it in different ways for desktop, tablet and browser, you have all the tools available to do so. However, Ionic does not already delivers those to you in its standard installation and you either have to define them yourself or implement a responsive grid.

  • Phil Merrell

    If only service workers were supported in Safari on iOS

    At least it’s “Under consideration” for the “5-year plan” 🙁

    https://jakearchibald.github.io/isserviceworkerready/

    • Alejandro Heredia

      There’s always CROSSWALK `ionic browser add crosswalk`

      • smatthews1999

        Crosswalk is great for packaged apps, but not this. User is going to the browser user uses.

        • Jonathan James

          Why not provide an in-app button that asks for a native Chrome Browser to run the app in? Would this not be a simple work-around right now for apps that rely on their Progressive Service Workers?

      • Phil Merrell

        It certainly wouldn’t hurt to have some of this functionality in a natively packaged app, but PWAs are supposed to be about bringing native-like experiences to the browser via the web.

        Safari on iOS is a great browser and in many respects still superior. But it will be very disappointing if it’s the last major browser to implement Service Workers by 4 – 5 years.

        Google has been actively and incrementally making the mobile web a better experience. Apple appears to be complacent. Maybe that’s prudent or maybe they’re falling behind. It’s tough to tell.

    • Jonathan James

      Why not provide an in-app button asking for a native Chrome Browser to run the app in? Would this not be a simple work-around right now for apps that rely on their Progressive Service Workers?

  • Olivier Jacquemart

    https://jgw96.github.io/worker.js gives a 404. Is it normal?
    Great article, btw. PWA is the next big thing 🙂

  • Smart Dev

    Very comprehensive and useful resource. Thanks for posting.

  • Oscar Bolanos

    If you add the browser platform using cordova, cordova will create the manifest file for you. What is the correct approach?

  • Amare Worku

    This is a great article and thanks for sharing. Can you please share the link for the sample HCN app?