Everything you need to easily build fast, production ready Progressive Web Apps

  • Push notifications
  • Routing
  • Pre-rendering
  • Update toasts
  • Unit Tests
  • Zero config lazy loading
  • Zero config code splitting
  • ES6 by default
  • Selective polyfills
  • Lazy image loading
  • Everything needed for an add to homescreen PWA

Getting started with the Ionic PWA Toolkit

  1. In your terminal, run:
    git clone https://github.com/ionic-team/ionic-pwa-toolkit my-pwa
  2. Run npm install
  3. Run npm run build

And with just those three commands you now have a great looking PWA that scores 100 on lighthouse right out of the box.

Under the hood

Ionic

The Ionic PWA Toolkit uses an early release of Ionic 4. Ionic 4 is built completely out of web components using Stencil. This means that you can use Ionic 4 just like any other Stencil collection and you will be able to use any of the Ionic components with minimal to no overhead.

Routing

The Ionic PWA Toolkit uses the Stencil Router. Read more about the Stencil Router

Service Worker

When your run npm run build we automatically generate a Service Worker for you using Workbox that handles pre-caching your assets. Read more about Service Workers

Web Manifest

By default we include a Web Manifest that has all the neccessary entries to get the Add to Homescreen prompt. You can see that web manifest here .

PWAs built with Stencil

Stenciljs.com

Yep, this site is built as a PWA!

Demo Source

IonicHN

Hacker News PWA built with @stencil/core and @ionic/core

Demo Source

Stencil Fiber demo

This showcases the runtime performance of stencil using our async rendering

Demo Source