Signup for the Ionic Newsletter to get the latest news and 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 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:

  • 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. , , . 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?

  • 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 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 ….

  • Chirag thaker

    What if my ionic project has cordova plugins like keyboard,social login,network information

    how i will get that details, or support for this

    • adevx5

      Great question. What I did not see in the article is that you either have a full blown app store / play store app with cordova and all, or you have a glorified website/webapp which utilizes PWA in Chrome to add a desktop icon and caching.

      So either I misunderstand the PWA concept, or you will not be able to use cordova as cordova needs a native environment.

  • Ekene

    I created an app and deployed the /www folder. The main.js and the main.css files are not minified. When offline I get error like “error loading chunk 0” and my app freezes. I’ve tried running all ionic commands I know, didn’t still work