Ionic v4, capacitor, pwa

I want to start a new project and would like to

  1. Use Ionic v4 beta
  2. Capacitor
  3. PWA first
    (4. Later: mobile support)

I am a bit lost in documentation as of how to start this setup.

What I did now:

  1. Create Ionic project v4:
  • ionic start Appname blank
  • Say yes to use v4
  1. Add capacitor:
  • npm install --save @capacitor/core @capacitor/cli
  • npx cap init
  • npm run build
  1. Add ng PWA as found in some ionic doc (
  • ng add @angular/pwa
  • ionic build --prod

Was that right? Trying to use “ionic serve” it doesn’t seem to work. According chromes dev tools no service worker is found.
edit: OK i found the missing piece in, which mentiones ng serves does not work with service workers and suggests a different http server to be used.

I just found another doc regarding ionic PWA toolkit ( which tells a different way starting the whole project directly with this toolkit, which seems to have some prepared stuff?
Is there any advantage to one or the other way?

Additional question:
When I need some custom code in a service worker - where to add it? the service workers are generated directly in /www/ dir which will be overriden by next build, right?

The PWA toolkit doesn’t use Angular, its agnostic. It use Ionic and the compilation StencilJS. So it depends what do you want to achieve, you want to use Angular, you did the correct steps. You don’t want to use Angular, definitely give a try to the Ionic PWA toolkit.

That’s a good question, I’m not sure actually because the @angular/pwa generate automatically at prod build time your service worker. It probably need a bit of googling to find a solution, spontaneously I would think that a solution might be to create your own service worker .js file and add a post bundling script which concatenate the automatic service worker file with your file, but just an idea

Also why do you need custom service worker code?