Tuesday, 16 January, 2018 UTC
Summary
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!