Creating an Ionic PWA

When it comes to building PWAs with Ionic & Angular, we’ll need to install and use the @angular/pwa Node package.

Creating a new project

Using the command-line, we create a new Ionic project, imaginatively named ionic-pwa, with the following command:

ionic start ionic-pwa blank --type=angular

Once the project has been created, we change into its root directory and install the @angular/pwa node package with the following commands:

cd ./ionic-pwa
ng add @angular/pwa --project app

Here, we’re simply using the underlying Angular CLI tool to install the package to a project named app, (this is the value associated with the defaultProject key within the angular.json file situated at the root of the ionic-pwa project directory).

Once the Angular PWA package has been installed, we’ll need to run a production build to generate the application’s www directory:

ionic build --prod

Note: Try running these commands one by one in the terminal provided below and answer the prompts as they appear!