The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

Progressive Web Apps with Ionic

As you know, we’re huge fans of progressive web apps, which are distributed with just a URL, offer an app-like experience using modern web APIs, and allow users of your app to get instant access to your app’s functionality, all without having to download your app from an app store. It’s been a top priority of ours to make PWAs a first-class citizen right out of the box, and we are happy to let you know that the first iteration of that is now available when you create a new Ionic 1 or Ionic 2 app!

Building a PWA with Ionic

The two key pieces that are needed for a web app to become a progressive web app are a manifest and a service worker. Ionic now offers both of these by default with every new app that gets created!

The manifest gives the browser metadata about your app, so that when the user chooses to add your PWA to their home screen, it knows what icon to use, how the PWA should be displayed, the PWA’s name, and more. Normally, you’d have to add this yourself, but Ionic now provides a default manifest that’s already linked to the index.html and ready to go. You’ll find it in the www folder of your Ionic project.

A service worker is a script that allows you to control how your PWA uses the network. Service workers allow you to give your PWA functionality such as the ability to work offline, send push notifications, background sync, and more! For this first iteration of built-in PWA support in Ionic 1 and 2, we’re providing users with a blank canvas on which to build their service worker. The service worker that we now provide by default for every Ionic app is very minimal and simply adds placeholders for the appropriate events that a standard service worker emits. The goal of this is to see what the Ionic community thinks are some of the best uses for service workers, so we can use that to improve our service worker support in the near future.

We also provide the service worker registration code in your index.html file.

if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
}

To enable the service worker, you can simply uncomment that registration code, and you’ll be ready to go! You’ll find the service-worker.js file in the www folder of your Ionic project.

For examples of service workers, check out the ServiceWorker Cookbook by Mozilla and the Google Chrome team’s repo of example service workers.

We’re very excited to start supporting PWA’s out of the box with Ionic and plan on steadily improving this support in the future. We are currently considering support for server-side rendering to get a blazing-fast first render and convenient hosting with the Ionic Cloud. Our service worker support will also be evolving in the near future to allow for automatic configuration of service workers. This will give your PWA offline support right out of the box, without you having to write any code. We cannot wait to see the awesome PWAs that you build! Stay tuned to our blog and our docs for updates!

  • Tom McLellan

    Awesome news! I’m new to service workers but wondering how an Ionic 2 PWA will perform for iPhone Safari users (or desktop web users) whose browsers don’t have support for service workers in separate threads. Will Ionic 2 have some kind of elegant fallback method that lets service worker code operate on the main browser thread if the browser doesn’t have full service worker support?

    Excited to follow the progress and also interested in server-based rendering / Angular Universal support… it would be awesome to render the initial screen while the rest downloads through Ionic.io or a Node Express setup.

    • Jérémie Olivier

      Wondering too how it’ll work on Iphone.

    • Justin Willis

      Good question. Unfortunately there is not currently a way to get Service Workers to run on Safari, but we do plan on adding app-cache as a fallback for Safari to give a basic offline experience. With that implemented this means that on browsers that do support Service Workers (Chrome, Edge, Firefox, Opera) the app-cache will be ignored and the service worker will be used. On browsers that do not support Service Workers (Safari) app-cache will be used.

      • activist

        Cool. So how does that change the experience for iPhone user?

      • Tom McLellan

        Thanks for clarifying. Just wondering what that would mean in practice – maybe only offer offline support in non-iOS? Would you need two separate builds for iOS vs. non-iOS for JSON REST API service calls? Since the Angular team removed ng-resource, this NG2-Resource has been incredibly helpful: https://github.com/troyanskiy/ng2-resource-rest

  • startupfoundry

    Justin, I appreciate the writeup. Could you link to a demo application so I can checkout an example on my iPhone / Nexus? Thanks!

    • Justin Willis

      Sure! I have created a few demo’s of PWA’s built with Ionic 2 that you can check out. https://jgw96.github.io/Ionic2-Hacker-News/www/ , https://jgw96.github.io/hodi/www/ , https://anon-chat.herokuapp.com/ . Thanks!

      • Stéphane

        Hello ! It is clearly a great new, but when I try the demos on Chrome (iOS) it doesn’t work – mean, still blank page, with search bar but no datas – But it works great on my Chrome desktop (on Mac El Capitain). Does it mean that Service Worker and PWA is not supported on Chrome iOS ?

        • Justin Willis

          Unfortunately because Apple only allows there browser engine to run on iOS, Chrome for iOS actually uses the same engine as Safari underneath (which does not support certain things needed in those demos) instead of the Chrome blink rendering engine and V8 JS engine. Sorry!

  • Prashant Khodade

    Nice to see series of articles on PWAs with Ionic .From the post I really liked “considering support for server-side rendering to get a blazing-fast first render”, I think this is must have. Due to current app bundle size being large, Angular 2/Ionic 2 PWAs seem to be taking bit longer to load on first visit which doesn’t seem to be good UX. On the other hand, subsequent visits are blazing-fast due to service worker.
    Also I guess tree shaking based build will help quite a bit.

    • maxx0r

      The first load will be a lot faster when Angular is out of RC. I also read about tree-shaking being introduced in one of the next releases.

      • Justin Willis

        So in beta.12 we will have a completely new build process that includes AOT compile, treeshaking, aggressive minification and more that will greatly improve start up time and general navigation performance!

    • yesimahuman

      Yep, as Justin mentioned this is the last item on the list before we go into production mode for Ionic 2. The start times in our current branches are considerably shorter and we never considered the current boot time acceptable. The whole ecosystem has had to evolve a bit and now things are ready, stay tuned!

      • Prashant Khodade

        Thanks Ionic team! I follow Ionic meeting notes too, very happy to see this appears to be the topmost item. Good things do take time. Nice to see that you guys are making it simple yet the best solution!

  • Yen Jacobs

    Which MBaaS do you recommand to use for iOS, Android, UWP and Progressive Web Apps?

    • Obinwanne Hill

      Firebase is a pretty good starting point, in my humble opinion

    • James Nielson

      I just built a demo app using Back& and I’m diggin it. Similar to Firebase, but can also run scripts.

  • Palle Simonsen

    This is really the way to go!

    There are several Use Cases for which a WPA is superior to a Hybrid app. Just be aware, that support for some features wary among browsers and platforms with IOS and Mobile Safari as the currently most troublesome.

    Keep it comin !!!!

    • Daniel C

      Could you please name a few of those use cases, as I for real can’t come up with none at all.

      • Palle Simonsen

        Fast and non-complex turn around for new features

  • Phil Merrell

    This is great news! Looking forward to how service workers in Ionic evolve.

  • Thankgod Ossaija

    This is great new, I am looking into service workers primarily because of caching and offline support, am fairly new to services worker, i was wondering if i could use services worker to cache resources that are served over the network in my ionic app, that isn’t a web app?

    • Prashant Khodade

      For me service worker did not work in webview on the other hand webworker worked (tried on Android 4.4). PouchDB/CouchDB will help you in providing offline experience.

  • Daniel C

    I love new technology and think this is great, but I also believe that the excitement for PWA’s it a bit over the top, and it feels like the people most excited don’t really understand what it is.

    Or I am missing something here? I’m genuenelly intressted and not trying to be a douche. I really see only a fre benefints with this cutting the need for the initial app install, which seems like something people are used to, and probably don’t mind doing if it provides a full experience, and avoiding the app stores).

    What are your (the devs, not the ionic team) vision for PWA’s?

    • Prashant Khodade

      Yes excitement might be more than it should be but I believe PWAs can make a big difference in few things e.g. app update process

      1) From developer perspective instead of going through play store/app store update process, developer will have to update their website and job is done. Updates get delivered to all the users regardless of platform(provided iOS also starts providing support, with Apple’s participation in latest service worker meetings at least things look positive).
      2) From end user perspective, updates will be optimal (in most cases), user need not update entire app again. Consider users in developing countries where every MB of download counts.

      In the process, ecosystem will get developer friendly too.

      I think there will be positive impact from SEO point as well.

      • Daniel C

        What you are describing is possible even with hybrid apps, look at Ionic Deploy for exemple. Every time the user starts the app, it can can update itself.

        Again, I think this is great, just like all new browser APIs, but I still think all of this is blown out of proportion.

        • Prashant Khodade

          Yes, Ionic Deploy does solve this problem. I was considering it at some point. But due to Ionic v1 only support could not try it. With PWAs, we just get generic solution to this problem.

          I agree that’s it’s just a new browser API which leads to better user experience and addresses some of the important pain points. Even webworkers should have got such attention which they deserve.

          There might be other reasons why PWAs will continue to get more attention. With PWAs, search engines will be benefited most 🙂 and hence the attention.

          • Daniel C

            You are totally right about SEO, that might actually be a big deal!

            Thanks for your input 🙂

  • chrisbenseler

    Will there be in beta12 (or in a rc) some changes in the ionic build process, so we can do something like “ionic build pwa”?
    The default index.html (inside /www) has:

    but this cannot be in the PWA package.

    Also, the icons that can be defined in the manifest file must be inside de /www folder, but they will be useless in the mobile packages.

    • Guilherme Rosa

      Really interested in this as well. Right now when starting a new App in Ionic CLI we can pass the –no-cordova flag, but that still puts the cordova.js script tag in index.html

  • kennith

    This is a great feature in ionic. I am using ionic 1 and trying to make some app in ionic 2. I am interested to make ionic PWA, can somebody share any link what will he helpful for me to complete one simple app. Any video tutorial or text blog.

  • Stephen Adams

    This is great. I think PWAs are going to be big over the next 12 months.

  • Mike Strawhat

    Does anyone know how can we handle the routing in an Ionic 2 PWA? EX: when I want to get the url for sharing an item detail?

    • Isabelle

      Hi Mike, Have you found how to handle routing? Thanks

      • pskhodad

        DeepLinkConfig – i used this one to get it working for PWA.
        IonicModule.forRoot(MyApp, {}, deepLinkConfig)

  • nagendra prasad s b r

    Hi Justin Wills,

    Thanks for the info. Can you please tell me is the cordova plugins or ionic native will work in PWA?

    Means if i use An app which has plugins like cordova device or cordova contacts will those works in my mobile browser?

  • Rajkiran Panuganti

    For advertising revenue, can we use AdMob or do we need to use AdSense ?
    Is my understanding correct that we cannot use any of the ionic-native stuff in PWA’s ?

    • pskhodad

      It seems PWAs cant use AdMob.

  • Serkan Ünal

    Hey, its just my opinion it would be better if you are redesign https://ionicframework.com/ website as ionic 2 PWA then you can share with repo. With this way we have an official example from Ionic team.

  • Isabelle

    Awesome, but no routing solution available which makes Ionic2 really weak for PWA if you want to share urls ….