As many of you know, we’ve been working incredibly hard to make Ionic a great option for building Progressive Web Apps, and today I’m happy to announce a project that furthers those initiatives: The beta release of the Ionic PWA Toolkit!

The Ionic PWA toolkit is the recommended way to easily build fast, production-ready PWAs with Ionic. Let’s dive in and go over why we’re building this, what it offers you as a developer, what’s in store for the stable release, and finally, how to get started using it!

PSA – if you are not familiar with what PWAs are, make sure to read this overview first.

Why?

PWAs have become the de facto way to ship a great web experience to your users, but they have been very challenging to build. Making sure you are code-splitting your bundles correctly, lazy-loading them, handling service worker updates correctly, following best practices, etc. can quickly turn into a mountain of engineering work.

We looked at these challenges and, with inspiration from the Preact CLI and the Polymer App Toolbox, realized we had a unique opportunity to create something that would make building great PWAs dead-simple. And thus, the Ionic PWA Toolkit was born.

What do I get from it?

Everything you need to easily build a great PWA!

  • Ionic
  • Routing
  • Stencil
  • Push Notifications setup
  • Showing a toast when a new version of the PWA is available
  • Unit Tests
  • Pre-Rendering
  • zero config lazy-loading
  • zero config code-splitting
  • Polyfills selectively loaded depending on the browser support
  • ES6 by default for new browsers, ES5 for older browsers
  • Everything needed for an add to homescreen PWA (service worker, web manifest and iOS meta tags)
  • lazy-img component for lazy loading below the fold images

Let’s go over some of the key things in this list:

  • Ionic: We have been hard at work on porting Ionic to web components and the Ionic PWA Toolkit is using an early release of Ionic. This means you have all the awesome pre-designed, pre-built UI widgets that you’re familiar with from Ionic-Angular, but ported to Web Components.
  • Stencil: Stencil is a compiler that makes it easy to build Web Components that are automatically lazy loaded and code split. Check out stenciljs.com for more info!
  • Push Notifications: All of the boilerplate code for web push notifications, including the service worker, are included out of the box saving you time and setup.
  • Add to Homescreen: We include a service worker (thanks to Workbox), a web manifest, and the correct meta tags for iOS. This means your PWA can be added to the homescreen on both Android and iOS devices out-of-the-box.

When is the 1.0 release?

The team is fast approaching the next big release of Ionic (v4), which as mentioned above will be ported to Web Components. This means you will be able to use the Ionic components you know and love in Angular, Vue, React (really any framework of your choice), or even with no framework at all!

Also, as we head towards a 1.0 release of Stencil, the Ionic PWA Toolkit will be updated to use it as soon as it is released. The 1.0 release of Stencil will be even smaller and faster than the current release thanks to our use of Dynamic ES Imports. We’ll have more to say about this soon, stay tuned…

And finally, one of the best features we will soon be adding is an integration with our upcoming Ionic PWA Hosting service (part of Ionic Pro)! Ionic Hosting provides zero config, PWA-focused hosting with all the best practices built in, and performance best practices such as zero config HTTP2 push out-of-the-box.

Get started today

The Ionic PWA Toolkit is available on GitHub. To get started, simply follow these directions. As you’ll find out, it’s incredibly simple to get going – you’re only a few commands away from building your next great PWA!

As we continue our work on making PWAs a first-class citizen in Ionic we also want to make sure that its incredibly easy to make any Ionic app, including ones built for the app stores, work as a PWA. We are working hard on a project called Capacitor(formerly known as Avocado) that will bring this to reality. Keep an eye out for more on that in the future!

We’re excited to finally release the first beta of the Ionic PWA Toolkit, and even more so to see what you build! As with any beta release, you may find some bugs, but we feel confident it’s stable enough to successfully build great PWAs. If you do find any bugs feel free to open an issue here. Let us know what you think and feel free to provide feedback in the comments!

Signup for the Ionic Newsletter to get the latest news and updates!

  • Kirill Groshkov

    Looking forward to have Ionic 4 ready!

    • Justin Willis

      We are too! This includes an early release of Ionic 4 that already has most of the components and will be updated as we make progress!

  • http://www.kydevolution.com.ng/ Abati “AceKYD” Adewale

    This is awesome!

  • Volodymyr Bilyachat

    I just started new project using that 😀

  • Matan Yedayev

    You guys only focusing PWA, but what about desktop app? Ionic apps not look good on desktop, and not compatible with Electron, I think it will be very good target for the Ionic team

    • justin willis

      Hey, so we actually are focusing on desktop support. We recently expanded the framework team to provide some more resources into desktop support for our components. It won’t all be done in time for the next release, but it’s definitely coming!

    • Florian Hübner

      What kind of problems does Ionic have with Electron? I tried it a month ago and it seemed to work just fine.

    • http://eyejot.com/users/davidg davidgeller

      Why not use the PWA as a desktop app? I am. Our stuff works well on mobile and on the desktop. We take advantage of the ion-split-pane feature and it seems to work really well. We’ve also using more max-width CSS commands for some of our elements so they don’t expand to be too large when hosted inside a desktop browser window.

  • http://AutomateLife.TV Mike Lallemont

    Wow it looks so different. When will we see some documentation and tutorials? Maybe the conference app will be upgraded to use stencil and Ionic 4?

    • Josh Thomas

      Absolutely. You will see many examples of the conference app. Angular, Stencil, React, Vue… All relying on Ionic 4.

  • Micah Rairdon

    Cool! Will this be easy to integrate with other other cli tools like ionic cli and angular cli?

    • Justin Willis

      Hey! We have not yet integrated this with the Ionic CLI but have plans too in the future (:

  • Am

    This is very exciting. Great shout with the PWA starter! I can’t wait till Ionic and Capacitor are fully released. It’s a game changer.

  • Fabian

    Is there a easy way to use it with angular?

    • Justin Willis

      Hey! So for the best performance we recommend using Stencil for your app logic as is default in the PWA toolkit, but the upcoming release of ionic-angular, which will have all the ionic components ported to web components will be much more suited to PWAs then ionic-angular 3. So TLDR, if you like angular and want to continue to use it, ionic-angular 4 will be much more suited to PWAs but if you can live without some of the features that Angular provides and want to ensure that your PWA is as performant as it can be, we recommend using the Ionic PWA Toolkit.

      • Thomas Lohmann

        Hi Justin, what about routing if I use Ionic-Angular 4 and not the PWA Toolkit? Will Ionic continue to use the push/pull strategy or what is necessary for a real PWA: Web-based-routing like the Angular Router?

        • yesimahuman

          Yep! We’re keeping the low-level nav push/pop system much is a must-have for native apps, and rather integrating it with external routers where we can. We’re working on direct Angular Router integration right now in fact.

  • henock tshib

    c est bon.

  • Guilherme Rosa

    I really appreciate all the support Ionic is giving to PWAs. For those that do not want to use Stencil however, will Ionic v4 be only UI web-components, or will it also offer routing with the correct animations?

    • Josh Thomas

      We consider this a core feature of Ionic and yes routing with correct animations will be included. We are still working on the best way to handle this scenario. Most likely we will be relying on framework specific routers to do most of the work and then Ionic will handle the animations and transformation.s.

      • Guilherme Rosa

        That seems like a lot of work. Even something simple like a JavaScript driven ‘light’ routing solution, like a simple stack we can push and pop view-like components to, which a ‘route’ web-component would then render. It doesn’t even need to worry about handling browser navigation, which is a pain and seldom works well between browsers, mobile and cordova.
        I don’t know what others have experienced, but for me most routing solutions are way overkill for what I need for 97.32% of the apps my consulting company writes.

        • yesimahuman

          It appears that it’ll be a small shim to handle router events. We think many users will use the push/pop system on its own because it tends to be simpler and more native-like but we’ll see

  • Abu Nj

    many asking about cordova plugin support i pwa, will this work ?

    • Justin Willis

      Hey, good question! With PWAs you do not need cordova plugins, you just use the available web APIs. But, if you have an app that uses cordova plugins and you want to deploy that app as a PWA, our upcoming capacitor native interop layer will handle calling the actual web API when running as a PWA and then a plugin when running as a native app.

  • RobFergusonOrg
  • Pavel Razgovorov

    Can you give us any clue about when will be Ionic 4 released? 😉

  • Joshua Rosinger

    If one were to start a whole new ionic application from scratch now, with desire to be complete in 10 weeks for prod, what would the ionic team recommend to use? The app should have functionality such as camera / photos, location / maps, push notifications etc.

    1. Classic Ionic 3 / Angular / Cordova; or
    2. Ionic 3 / Angular / PWA; or
    3. Ionic 3 / Angular / Cordova / PWA; or
    4. Ionic 4 / Stencil / PWA; or
    5. Other tech stack options

    Kind of overwhelmed with so many stack options currently talked about. Also, in context of timeframes, availability and prod readiness.

    • https://www.quemesa.com/ Rodney

      You didn’t mention if you need native apps AND PWA.

      I did the following for QueMesa: Ionic 3 / Angular / Cordova and then PWA (I comment out some stuff in the Index.html for each build).

      The risk of waiting for new toys is that you have no control over them and if you find bugs in beta you have no recourse…

      • Joshua Rosinger

        This is why there needs to be a well defined technology stack transition / migration plan which includes timeframes an capabilities as well. No use creating / updating technologies all the time; causes confusion in the dev community.

    • Jeffrey Chen

      +1 for this.
      I am currently using ionic3 to develop a PWA and facing a lot of difficulties.
      What I am planning is to make a PWA first, if the user grows then consider to develop ios or android app. I was a fan of ionic since ionic v1, as they provide more and more stack, it’s really easy to get confused when or where to use these stacks.

      If I use stencil to make a PWA first, then build an android or ios, will I facing a lot more work then using ionic3 to build PWA?

    • Gabriel Barreto

      Simply go with what you (and your team) are more familiarized with. Organize your project, all the work you’ll have, prototype screens and everything else to start your product without any impediments, then see the difficult and what technology stack is better for you.

  • Bart

    Wasaah, nice going. I’m curious about avacado, but will see if I can find the time to use this.

    • yesimahuman

      re: Avocado, we just renamed it to “Capacitor” and recently opened up the repo, though it’s not quite ready for public use: https://github.com/ionic-team/capacitor. Stay tuned!

  • Ward Berckmans

    Looks nice! How will it work when you want for example a firebase realtime database as backend?

  • http://www.blagoplanet.com/ Thomas Bodetti

    Very Interesting, One of the things that I see on a daily basis is requests from vendors, clients and hobbyists as well is the ability to have a fall back option when there is no active internet connection, (as you likely are aware, 4G coverage is not really as well defined as commercials on TV tend to lead viewers to believe) so more than what I would like I find that internet on a mobile platform is often hit or miss, good bad and sometimes ugly. When I am designing product for anyone the idea of running into an internet roadblock and having an application fail because of that issue is something that is “preventable”

  • http://luisvasconcellos.com Luis

    Why both ionic and stencil at this moment? As I understand, ionic will only be fully stencil-based in its next major release, right?

    • yesimahuman

      Stencil is used in two ways: building Ionic Web Components (specifically: custom elements), and as a view layer library for building full apps.

      If you want to use our web components, then you never actually use Stencil. You’re using Custom Elements that we compiled using Stencil. In this case, Stencil is like TypeScript for Custom Elements 😀

      If you want to use it as a view layer, then you’d use it like you would React or Angular, and write components in it that interact with other components. Turns out you that approach scales to big apps.

      We are taking approach #2 for this PWA toolkit because we can get better performance than we could with #1 (for now). However, we will fully support #1 and we want to have official starters and examples for the major frameworks.

      Make sense?

  • Bo83

    React with Ionic components – oh yeeaaahhh!!!

  • RainMakerBr

    Stencil is not a JS framework, right? So, in this beta version I need use Angular to logic layer? Its possible use this code with Ionic 4 alpha/beta and Vue.js?

    • yesimahuman

      It’s really more like React in that it’s primarily the view-layer. Turns out you can build big apps with that approach just fine, and we have some additional libraries like a router and redux if you want to expand from there.

      You’ll be able to use other frameworks with Ionic 4, and you can today, but getting other frameworks to have a baseline level of PWA performance to meet standards Google is setting without a lot of customizations is a challenge right now. We wouldn’t be able to say that apps would be small and load fast enough using another framework without a lot of framework-specific configuration.

      Stencil has several unique features that make it well suited for PWA perf out of the box, including pre-rendering, lazy loading of components, and relying on native Custom Elements to reduce the amount of code we ship.

      So, for now, this kit is PWA focused and we’ll hopefully be able to add more framework choices (that also goes for all of Ionic beyond PWAs!) We want to make sure every app built with this kit meets these Google/Chrome standards out of the box!

      • adnan chowdhury

        by ‘pre-rendering’ are you refering to Server-Side-Rendering , SSR. That is necessary for SEO?

  • Nueng Chaiwat

    Wow ! …

  • Steve Kenney

    Will support for the new DevApp be added to this PWA Toolkit?

  • Thomas Kientz

    What about large screens/desktop support ? Could you guys share a little more about your plans for that ? What are your goals and your vision ? You are expanding Ionic to the web with PWAs and Ionic 4, but they are little to no words at all about desktops support in your last road map. Can we hope to develop responsive web app, beautiful for large screens as well with Ionic ? What are you thoughts on this subject ? Thank you 🙂

    • Justin Willis

      Hey! So desktop support is a WIP, but we recently started making advances here. PWAs for example are not just mobile focused, but also work on the desktop and any device where a browser can be run. This means that Ionic needs to look good on bigger viewports and is therefore something we are focusing on. We recently expanded our team to put more resources behind desktop support and you can expect much more about it coming soon!

  • Jaeho Song

    Will the new Ionic 4 and PWA support IE10?
    I suppose Ionic 4 will support IE11 since I read the stencil doc that Web components made by stencil will support IE11 and its the core of Ionic 4.
    I know that few people are using IE10 but for me, it’s very much important. Many of my country are using IE10.
    Thank you for your supporting to build great apps.

    • Owen Melbourne

      PWA is not supported at all in IE10 or IE11 – PWA are not even supported in IOS11 yet – only really Google Chrome. This is a limitation of the browser, if you want PWA in IE10/11 you’d need to get lucky with Microsoft

      • Jaeho Song

        Thank you for your reply.

        I think I was not able to express my thoughts properly.

        What was I asking is…

        If new Ionic ( version 4 ) will support IE 10 since Stenciljs supports IE11.
        I was thinking if there is any chance for IE10 to work with IE10.

        Thank you.

  • luis

    hello Justin,
    Can I use ionic-stencil with ngrx to manage the state?

  • Lola

    Guys, you’re changing the world for good! And you’re helping us to change the world for good.

  • Kim Rasmussen

    Awesome, Looking forward to more on this front. I believe this is absolutely on the right course!

  • Waleed Shaukat

    Started developing apps using ionic 3 recently, I am impressed to see the level of ease it provides in developing native-like mobile apps. I can’t wait to jump to ionic 4, and explore it with angular and stencil to build PWA.

    Though, there is a bit of leaning curve as stencil is written in JSX which would have to be understood first. But overall, ABSOLUTELY REMARKABLE work you guys at ionic are doing!

    It’s almost like as if you guys are indirectly helping people in making their lives better by offering technologies that will help them realize their positive ideas. Never.ending respect for you guyz!

  • http://crestdesign.in Crest Design

    Awesome!

  • luis

    hello Justin, my app is with
    ionic 3 + ngrx, can I update my app to convert into a pwa with stencil?

  • http://eyejot.com/users/davidg davidgeller

    I performed some load testing of my PWA using the recommended site/utility and got A+ across the board, except when it came to asset caching. The utility recommended using a CDN, but I thought everything was neatly bundled together by Ionic. All my app graphics are stored with the app and referenced with relative paths. Would moving them out and up to a CDN likely make a big difference? The app already performs great!

  • Thomas Gangsøy

    I currently have an app that i want to try to port to this. How do i create services/injectables w/o angular? And also how should i handle http request / observables? Any examples for this, or should i just stick with angular?. @disqus_2TIruW0y3N:disqus

  • http://www.proyecti.com Carlos

    Thanks!! This sounds awesome!!!
    But what about projects which use Cordova plugins, like deep links ? Will it be possible to port them to pwa?
    Also, will a PWA project made with this toolkit be possible to package as an iOS and android app?