ng serve with service worker

[StephenFluin]

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.

[mackelito]

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...

[anubees]

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

[mackelito]

@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?

[fazpu]

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

[cyraid]

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.

[Gaiidenn]

+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 !

[mackelito]

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

[christianliebel]

@StephenFluin (congratulations and all the best, btw—have 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’s 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’t 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?

[alexroldan]

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

[cnscorpions]

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

[christianliebel]

@cnscorpions This is my proposal, and it’s not implemented yet.

[balteo]

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

[glemiere]

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.

[fergalmoran]

OMG just do it already!!!

[r-holland]

Yes please

[Kimeiga]

please please

[domenichelfenstein]

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

[txone]

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

[donbowman]

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.

[ilyakonrad]

Tried to update PWA configuration yesterday using ng serve and it seemed to work fine for a few hours (I was mostly changing app shortcut images and splashscreen images) and then I got into this problem that ngsw-worker.js can't load (infinite "pending" status) so I couldn't configure my PWA stuff seeing changes on localhost real-time.

Not sure why I seemed being able to do that earlier that day but then hours later I got here...
Any ideas/explanations would be appreciated 😄

And yes, this feature would make a lot of sense.

[hdsysdev]

Would be great, shame its been this long with no implementation

[domenichelfenstein]

I'm really excited about that commit pushed by @dgp1130 and @alan-agius4

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}