The PWA Toolkit is a starting point for building Progressive Web Apps using Ionic and Stencil. This combination of tools gives you the ability to build a fast, efficient PWA out of the box.
For more info check out our homepage!
@ionic/corefor the UI.
To start building, clone this repo to a new directory:
npm init stencil ionic-pwa
To build for production, run:
npm run build
A production build includes:
Apps should be hosted on through HTTPS, and if possible, through a provider that supports HTTP2. One provider that does support this is Firebase Hosting.
We recommend setting up HTTP2 Push on Firebase. H2 Push may sound complicated, but it's actually a simple concept. To learn about it, take a look at this article.
To set this up for
npm run build
sw.jsfile, these are the files you want to H2 push.
Service workers are generated via the Stencil build tool. For more information on how they can be configured, see the Service Worker docs.
For most cases, you'll want to develop your app without generating a Service Worker. But if you'd like to test out Web Push Notifications or Background Sync, you'll need to have one generated. To generate a Service Worker during dev builds, we've added the npm script:
npm run start.sw
This will start a dev build and generate a Service Worker as well.
To run the unit tests once, run:
To run the unit tests and watch for file changes during development, run:
npm run test.watch
We recommend using https://www.webpagetest.org/easy with the
Run Lighthouse Audit option turned on.
This will give you an in depth look into your app's load performance on the average device connected to the average network.
For more info on how to use webpagetest check out this article