Angular-cli: Feature Request: ng serve with service worker

Created on 5 Mar 2018  路  19Comments  路  Source: angular/angular-cli

As a user, I would like to be able to test my service worker generation / scripts.

I can do this today with ng build --prod, but then I have to spin up my own server and manually rebuild each time. If I try running ng build --prod today, I get runtime errors because the service worker can't be found.

If ng build --prod would generate a service worker, this would risk breaking developer expectations (due to normal Service Worker behavior), but it would better match what a developer might expect from debugging a "production" build of their application, even through the refresh cycle would be at the mercy of their service worker.

devkibuild-angular dev-server feature

Most helpful comment

@StephenFluin (congratulations and all the best, btw鈥攈ave a nice vacation) @webmaxru @alxhub: following-up this discussion from https://twitter.com/christianliebel/status/1050789670412521472

@SteffenJahr and I held a couple of workshops at AngularConnect, Angular Days, WDC and other conferences. The fact that service worker generation is _not enabled_ when using ng serve --prod leads to confusion every time. (It鈥檚 not even part of our workshop schedule, developers try that themselves.)

One of the crucial downsides when using ng build --prod and a custom HTTP server is that developers can鈥檛 make use of incremental TypeScript builds and thus have to wait for 30 seconds or more (depending on project size and performance) for each build. This way, testing simple functionality such as push noted above gets a tedious task.

Proposal:

  • ng serve --prod --generateSW should serve a prod build with SW generation enabled.
  • ng serve --prod should not include a service worker, but issue a developer warning when SW generation is enabled in that project (e.g. Service worker generation is intentionally disabled when serving productive builds to prevent stale resources from being shown. Please use the --generateSW flag in order to enable it.)

What do you think? Is this something PR-worthy?

All 19 comments

This is just what I'm looking for.. of course we can use something like http-serve or alike but then we have configure our proxy in yet another location and different ways...

Exactly, I like the hot reload capabilities of ng serve and would love the service workers to work with it.

@filipesilva I know that the stated way of running SW on local is to use httpd and serve from /dist.. but we also have a proxy config setup so running from dist will show me the login bit that's it ;)

Perhaps you have some recommendations?

This feature is especially important when you want to test push notifications.

This would be a handy feature, especially when creating new projects with PWA in mind. You want to know if it all works smoothly with push features.

+1 Since one of the greatest features of PWA are Push Notifications, we'd love to be able to test all this with the comfort provided by the classic "ng serve" command !

Is there any one who has a solution for this when using ng serve?

@StephenFluin (congratulations and all the best, btw鈥攈ave a nice vacation) @webmaxru @alxhub: following-up this discussion from https://twitter.com/christianliebel/status/1050789670412521472

@SteffenJahr and I held a couple of workshops at AngularConnect, Angular Days, WDC and other conferences. The fact that service worker generation is _not enabled_ when using ng serve --prod leads to confusion every time. (It鈥檚 not even part of our workshop schedule, developers try that themselves.)

One of the crucial downsides when using ng build --prod and a custom HTTP server is that developers can鈥檛 make use of incremental TypeScript builds and thus have to wait for 30 seconds or more (depending on project size and performance) for each build. This way, testing simple functionality such as push noted above gets a tedious task.

Proposal:

  • ng serve --prod --generateSW should serve a prod build with SW generation enabled.
  • ng serve --prod should not include a service worker, but issue a developer warning when SW generation is enabled in that project (e.g. Service worker generation is intentionally disabled when serving productive builds to prevent stale resources from being shown. Please use the --generateSW flag in order to enable it.)

What do you think? Is this something PR-worthy?

ng serve --prod --generateSW=config.js
with config file

this is how i do it
"sw": "ng build --prod --aot=true --optimization=true --buildOptimizer=true --deleteOutputPath=true && workbox generateSW workbox-config.js"

I'm force to use http-server to serve the files.
but this does not solve my problem
i still need to use ssl so that pwa will work in mobile as standalone

@christianliebel hi, i type ng serve --prod --generateSW, but Unknown option: '--generateSW' returned. could you please provide a demo link or any other details?

@cnscorpions This is my proposal, and it鈥檚 not implemented yet.

I think this is an important feature for developers. Is there any schedule as to when this will be implemented?

100% agree this is vital to a healthy dev workflow. It's been a year since this has been open, and it's should be considered more urgently.

OMG just do it already!!!

Yes please

please please

May 2020 and still open.
I agree with everyone stating this is vital for developing WPAs.

June 2020 and still open.
I agree with everyone stating this is vital for developing WPAs.

https://blog.donbowman.ca/2020/06/29/using-ng-serve-with-angular-service-workers/ this workaround works for me, YMMV.
Its not perfect, i'm not sure it works other than for --prod, but it does get further.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hareeshav picture hareeshav  路  3Comments

purushottamjha picture purushottamjha  路  3Comments

rwillmer picture rwillmer  路  3Comments

JanStureNielsen picture JanStureNielsen  路  3Comments

NCC1701M picture NCC1701M  路  3Comments