Consider using @angular/service-worker and ng-pwa-tools

[Splaktar]

This project is using sw-precache instead of the latest @angular/service-worker and ng-pwa-tools.

At Google I/O last week, they announced that https://github.com/GoogleChrome/workbox would be the preferred option over sw-precache going forward.

However, Angular seems to be creating a better integrated SW and PWA story using the tools mentioned above. That said, it would be interesting to see if these tools actually reduce the size of the config and improve performance or load time.

[webmaxru]

I have the documentation in a form of workshop currently: https://bit.ly/pwa-angularsummit-2017
Will be happy to contribute

[webmaxru]

Unfortunately, there is no way to go for simplest default option to set up NGSW (to use serviceWorker: true + Angular CLI), because CLI was ejected, so I'm going for ng-pwa-tools one.

[housseindjirdeh]

@Splaktar Thank you so much for logging this, I've been meaning to set up an issue to use Angular's built in tools instead of sw-precache

@webmaxru <3 thank you!! Yep I decided to eject in order to modify the build output so we can't unfortunately rely on setting serviceWorker: true. Let me know how setting up ng-pwa-tools goes and don't hesitate to let me know if I can help in anyway.

[webmaxru]

I wrote a special notice on ng-pwa-tools compared to serviceWorker: true: https://docs.google.com/document/d/1F0e0ROaZUnTFftmC0XovpREHWHjcXa4CggiFlmifjhw/edit#heading=h.yoinubqorb1g

For now I'm struggling with ts-node part of manifest generation.

[Splaktar]

@webmaxru very helpful, thank you. There is indeed quite a bit of confusion and the presentation didn't do enough to mention how experimental ng-pwa-tools is at this point.

[housseindjirdeh]

Agreed that is extremely helpful @webmaxru <3 Thank you for taking the time to look into the tools deeper and explaining it clearly!

[housseindjirdeh]

@webmaxru although we can't simply use serviceWorker: true since this is ejected, could we be able to leverage AngularServiceWorkerPlugin to create a ngsw-manifest.json file on the fly with all the compiled assets? Just throwing ideas around but I think that might be a viable solution 🤔

[Splaktar]

ng-pwa-tools doesn't seem like an option for this project since it's using SCSS and that's not supported by those tools yet: alxhub/io17#8

I haven't tried the AngularServiceWorkerPlugin for Webpack yet, but it looks promising.

[alfredoperez]

I created an application using ng-PWA-tools, most of the code from @housseindjirdeh and setting up gulp to do some performance adjustments; since I didn't eject the angular-cli.

Can all of you take a look and tell me how I can improve it?

https://www.webpagetest.org/result/170710_YC_e36dbf524b1105e6a05b9c7b90d20668/
https://github.com/alfredoperez/ngx-hn

@jeffbcross

• I tried to put the async and defer, but it was causing intermittent bad scores on Lighthouse.
• How can I remove the pollyfills file if I am still using angular cli?
• Do you have a recommendation on how should I concat all js files and update HTML after ng deploy has executed?

Any help is appreciated!

My goal is to make it faster using some of the techniques other apps used, like Firebase functions, compression, server rendering, while still keeping the angular cli intact.