Take advantage of the amazing new service worker in Angular 5.0 and build your own Hacker News Progressive Web App. https://angularfirebase.com/lessons/hnpwa-angular-5-progressive-web-app-service-worker-tutorial/

Live Demo: https://hnpwa-cbf63.firebaseapp.com

HNPWA: https://hnpwa.com/
ServiceWorkerModule: https://www.npmjs.com/package/@angular/service-worker
PWA Checklist: https://developers.google.com/web/progressive-web-apps/
2024-02-04T07:53:32.347Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
8269d076-cac1-418e-a904-c347b9ef6f08
7fd17086757aae85c34cb43708564224bd79c00649e9bc08cece65dc1e1fe386
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Just last month, Angular 5 was released, and with it comes the new service worker module that makes building progressive web apps easier than ever before.
All we need to do is set a few configuration variables and Angular will automatically generate a service worker with our production build.
In this video, I'm I'm going to show you
how to use the worker to score 100 on a progressive web app audit, and I'll show you how to customize the worker to fit the needs of your specific application.
I'm going to
do this by creating my own version of Hacker News, which is the gold standard for comparing performance and usability across various JavaScript works.
If you're just finding me for the first time, make sure to subscribe.
And for this video, I have a full working demo deployed to Firebase Hosting.
Feel free to mess around with it, and if you see anything you want to optimize or fix, send me a pull request on GitHub.
Before we get going, I just want to point out that Service Workers aren't supported on all modern browsers.
Safari and Microsoft Edge are the main holdouts, but they should be supported in the future.
At the time of this video, the Service Worker is only available in the beta version of the Angular CLI, so you'll want to install it with the next tag.
And then make sure the version you have installed is 1.6 or greater.
And if you're starting from an existing Angular 5 app, you can simply create the files I'm about to show you in the upcoming steps here.
To create a new app with the service worker configured automatically, run ng new with the service worker flag.
Then inside that new app, the first place I'm going to go is It's the Angular CLI JSON file.
Inside here, you'll want to add manifest JSON to the assets array.
We're going to create this file manually here in the next step.
Then down here, you'll notice that the service worker option is set to true, which tells Angular to generate the service worker at build time.
From there, you're going to create a Web App manifest in the source directory.
The purpose of the manifest is to tell browsers how to handle your Web App.
We're just going to set the bare Minimum options for now.
So we have a start URL, which is just the root, and then you'll need a theme color and background color.
Then you'll need to add some icons if you want Your app to be installable on mobile devices.
The bare minimum is just a 512 by 512 image, but you can add additional sizes here if you want to as well.
You'll want to save your images inside the assets folder in your Angular app.
Now really quickly, I wanna show you how the service worker gets registered.
Inside the app module, it will register the service worker in the n g s w worker file if the build is production.
However, this didn't work for me using AngularFire 2, so I want to show you an alternative way to register a worker.
So you can go into the main TS file.
Then after your application is bootstrapped, you can see if the service worker is in the browser navigator and then register your service worker there.
Now we're ready to move on to the important part, which is the ng service worker config file.
This file tells Angular how to generate the service worker, so So I wanna go through here and explain to you what all these different options mean.
The first option is index, which is just the entry point for your app, and then we have an assets group array, which defines the static assets that are going to be cached by the service worker.
The first asset group is called app, and the install mode is prefetch.
Prefetch means that the worker is going to go out and cache all these assets right away.
So, essentially, these are going to be all the files that are necessary to run your app offline.
So So you'll notice it has all the files that are known at build time, including our index HTML entry point, as well as the various bundle files.
We can also add additional external files, which is probably gonna be necessary if you're using something like Angular Material.
You can do that by adding an additional URLs array and Add the URLs that you wanna cache to it.
This will be a good place for web fonts or any other styles you get from a CDN.
Now Now I'm going to jump down to our next asset group which this time is installed with the lazy strategy.
We're going to add the assets directory to it and the only difference is that it will cache these assets only when they're actually requested by the user in some way through the app.
At this point, our worker knows how to cache all of our assets that are known at build time, but what happens if we receive data from an external API?
For that, we can use the DataGroups array, which has 2 distinct strategies.
The first strategy we're looking at here is API Freshness.
This strategy will always try to make a network call for the latest and greatest data Unless it times out after 10 seconds in this case, then it will default to whatever's in the cache.
For our Hacker News app, we're only going to use this strategy when the user navigates to the new URL, which contains the latest posts from Hacker News.
You can add your own URLs to the URLs array, and then you can control the cache behavior in the Cache Config object.
So freshness is great when data is constantly changing, but if it doesn't change very often, you can use the API performance strategy.
The difference here is it's going to try and use the data in the cache, but if the max age of the cache is expired then it will go out and make another network call for new data.
Data served from the cache is going to be a lot more performant and appear instantaneous in the eyes of the user.
Eventually, when you run a production build, you can go into Chrome and pull up the network tab, and you'll see that assets are served from the Service Worker.
An asset from a Service Worker only takes a few milliseconds, so it will appear instantaneous for your users.
Before getting to that point though, we first need to go into the index HTML file and add a few meta tags to ensure that we get the 100 PWA score.
The main things here are that we link the manifest JSON file and that we add a meta tag for our theme color.
The index HTML file can be thought of as the splash page similar to the initial loading page on a native mobile app.
The typical way to handle this page is with your app icon and possibly a very small amount of text.
Then the last thing we'll do is add a no script tag to Let the user know that they need JavaScript enabled to use this app.
At this point, we should be able to build our app by running ng build flag production.
After that's finished, we can go into the dist folder, and you'll notice a couple extra files here.
We have manifest.json and ngsw.json, which contains all of our actual compiled configuration for the worker.
If we open that up, you can see that it lists all of our version bundle files as well as any other configuration that we set in the main configuration file for the worker.
Then if we go into the worker JavaScript file, we can see all kinds of crazy JavaScript that we're really glad we didn't have to write from scratch.
When you're ready to test your app, you can go into Chrome, into The Audit tab and then click Perform an Audit.
It's going to simulate how your app would load on a slower 3 g connection on a mobile device.
For a progressive web app, it's going to verify that you register a service worker.
It's also going to look at your manifest file as well as a handful of other related audits.
Currently, we're at a 100 score for progressive web app, but our performance is only at 79.
It measures performance based on how quickly you can get the first meaningful content on the page and then how long it takes your page to become interactive by the user.
79 isn't a very good score compared to other Hacker News PWAs.
So in the next video, I'll show you how to optimize Angular to bring this score up into the nineties.
If you wanna start building your own Hacker News app, you can actually do it using AngularFire 2, because the Hacker News API is hosted on Firebase.
So you can achieve that by simply installing AngularFire 2, and And then when you initialize your app, you use the database URL that is the Hacker News endpoint.
If you wanna build the exact app I built here, go to angularfirebase.com, and I have greater detail of the actual app source code there.
That's it for the Angular 5 Service Worker module.
If this video helped you, please like and subscribe.
And if you want to take your PWA to the next level, consider becoming a pro member at angularfirebase.com.
You'll get a free copy of my book, as well as a whole bunch of exclusive content.
Thanks for watching, and I'll see you next time.

Speaker 0: Just last month, Angular 5 was released, and with it comes the new service worker module that makes building progressive web apps easier than ever before. All we need to do is set a few configuration variables and Angular will automatically generate a service worker with our production build.

Speaker 1: In this video, I'm I'm going to show you

Speaker 0: how to use the worker to score 100 on a progressive web app audit, and I'll show you how to customize the worker to fit the needs of your specific application.

Speaker 1: I'm going to

Speaker 0: do this by creating my own version of Hacker News, which is the gold standard for comparing performance and usability across various JavaScript works. If you're just finding me for the first time, make sure to subscribe. And for this video, I have a full working demo deployed to Firebase Hosting. Feel free to mess around with it, and if you see anything you want to optimize or fix, send me a pull request on GitHub. Before we get going, I just want to point out that Service Workers aren't supported on all modern browsers.

Safari and Microsoft Edge are the main holdouts, but they should be supported in the future. At the time of this video, the Service Worker is only available in the beta version of the Angular CLI, so you'll want to install it with the next tag. And then make sure the version you have installed is 1.6 or greater. And if you're starting from an existing Angular 5 app, you can simply create the files I'm about to show you in the upcoming steps here. To create a new app with the service worker configured automatically, run ng new with the service worker flag.

Then inside that new app, the first place I'm going to go is It's the Angular CLI JSON file. Inside here, you'll want to add manifest JSON to the assets array. We're going to create this file manually here in the next step. Then down here, you'll notice that the service worker option is set to true, which tells Angular to generate the service worker at build time. From there, you're going to create a Web App manifest in the source directory.

The purpose of the manifest is to tell browsers how to handle your Web App. We're just going to set the bare Minimum options for now. So we have a start URL, which is just the root, and then you'll need a theme color and background color. Then you'll need to add some icons if you want Your app to be installable on mobile devices. The bare minimum is just a 512 by 512 image, but you can add additional sizes here if you want to as well.

You'll want to save your images inside the assets folder in your Angular app. Now really quickly, I wanna show you how the service worker gets registered. Inside the app module, it will register the service worker in the n g s w worker file if the build is production. However, this didn't work for me using AngularFire 2, so I want to show you an alternative way to register a worker. So you can go into the main TS file.

Then after your application is bootstrapped, you can see if the service worker is in the browser navigator and then register your service worker there. Now we're ready to move on to the important part, which is the ng service worker config file. This file tells Angular how to generate the service worker, so So I wanna go through here and explain to you what all these different options mean. The first option is index, which is just the entry point for your app, and then we have an assets group array, which defines the static assets that are going to be cached by the service worker. The first asset group is called app, and the install mode is prefetch.

Prefetch means that the worker is going to go out and cache all these assets right away. So, essentially, these are going to be all the files that are necessary to run your app offline. So So you'll notice it has all the files that are known at build time, including our index HTML entry point, as well as the various bundle files. We can also add additional external files, which is probably gonna be necessary if you're using something like Angular Material. You can do that by adding an additional URLs array and Add the URLs that you wanna cache to it.

This will be a good place for web fonts or any other styles you get from a CDN. Now Now I'm going to jump down to our next asset group which this time is installed with the lazy strategy. We're going to add the assets directory to it and the only difference is that it will cache these assets only when they're actually requested by the user in some way through the app. At this point, our worker knows how to cache all of our assets that are known at build time, but what happens if we receive data from an external API? For that, we can use the DataGroups array, which has 2 distinct strategies.

The first strategy we're looking at here is API Freshness. This strategy will always try to make a network call for the latest and greatest data Unless it times out after 10 seconds in this case, then it will default to whatever's in the cache. For our Hacker News app, we're only going to use this strategy when the user navigates to the new URL, which contains the latest posts from Hacker News. You can add your own URLs to the URLs array, and then you can control the cache behavior in the Cache Config object. So freshness is great when data is constantly changing, but if it doesn't change very often, you can use the API performance strategy.

The difference here is it's going to try and use the data in the cache, but if the max age of the cache is expired then it will go out and make another network call for new data. Data served from the cache is going to be a lot more performant and appear instantaneous in the eyes of the user. Eventually, when you run a production build, you can go into Chrome and pull up the network tab, and you'll see that assets are served from the Service Worker. An asset from a Service Worker only takes a few milliseconds, so it will appear instantaneous for your users. Before getting to that point though, we first need to go into the index HTML file and add a few meta tags to ensure that we get the 100 PWA score.

The main things here are that we link the manifest JSON file and that we add a meta tag for our theme color. The index HTML file can be thought of as the splash page similar to the initial loading page on a native mobile app. The typical way to handle this page is with your app icon and possibly a very small amount of text. Then the last thing we'll do is add a no script tag to Let the user know that they need JavaScript enabled to use this app. At this point, we should be able to build our app by running ng build flag production.

After that's finished, we can go into the dist folder, and you'll notice a couple extra files here. We have manifest.json and ngsw.json, which contains all of our actual compiled configuration for the worker. If we open that up, you can see that it lists all of our version bundle files as well as any other configuration that we set in the main configuration file for the worker. Then if we go into the worker JavaScript file, we can see all kinds of crazy JavaScript that we're really glad we didn't have to write from scratch. When you're ready to test your app, you can go into Chrome, into The Audit tab and then click Perform an Audit.

It's going to simulate how your app would load on a slower 3 g connection on a mobile device. For a progressive web app, it's going to verify that you register a service worker. It's also going to look at your manifest file as well as a handful of other related audits. Currently, we're at a 100 score for progressive web app, but our performance is only at 79. It measures performance based on how quickly you can get the first meaningful content on the page and then how long it takes your page to become interactive by the user.

79 isn't a very good score compared to other Hacker News PWAs. So in the next video, I'll show you how to optimize Angular to bring this score up into the nineties. If you wanna start building your own Hacker News app, you can actually do it using AngularFire 2, because the Hacker News API is hosted on Firebase. So you can achieve that by simply installing AngularFire 2, and And then when you initialize your app, you use the database URL that is the Hacker News endpoint. If you wanna build the exact app I built here, go to angularfirebase.com, and I have greater detail of the actual app source code there.

That's it for the Angular 5 Service Worker module. If this video helped you, please like and subscribe. And if you want to take your PWA to the next level, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book, as well as a whole bunch of exclusive content. Thanks for watching, and I'll see you next time.
Just last month, Angular 5 was released, and with it comes the new service worker module that makes building progressive web apps easier than ever before. All we need to do is set a few configuration variables and Angular will automatically generate a service worker with our production build. In this video, I'm I'm going to show you how to use the worker to score 100 on a progressive web app audit, and I'll show you how to customize the worker to fit the needs of your specific application.
I'm going to do this by creating my own version of Hacker News, which is the gold standard for comparing performance and usability across various JavaScript works. If you're just finding me for the first time, make sure to subscribe. And for this video, I have a full working demo deployed to Firebase Hosting. Feel free to mess around with it, and if you see anything you want to optimize or fix, send me a pull request on GitHub.
journalism
streaming
Before we get going, I just want to point out that Service Workers aren't supported on all modern browsers. Safari and Microsoft Edge are the main holdouts, but they should be supported in the future. At the time of this video, the Service Worker is only available in the beta version of the Angular CLI, so you'll want to install it with the next tag. And then make sure the version you have installed is 1.6 or greater. And if you're starting from an existing Angular 5 app, you can simply create the files I'm about to show you in the upcoming steps here. To create a new app with the service worker configured automatically, run ng new with the service worker flag. Then inside that new app, the first place I'm going to go is It's the Angular CLI JSON file. Inside here, you'll want to add manifest JSON to the assets array. We're going to create this file manually here in the next step. Then down here, you'll notice that the service worker option is set to true, which tells Angular to generate the service worker at build time. From there, you're going to create a Web App manifest in the source directory. The purpose of the manifest is to tell browsers how to handle your Web App. We're just going to set the bare Minimum options for now. So we have a start URL, which is just the root, and then you'll need a theme color and background color. Then you'll need to add some icons if you want Your app to be installable on mobile devices. The bare minimum is just a 512 by 512 image, but you can add additional sizes here if you want to as well. You'll want to save your images inside the assets folder in your Angular app. Now really quickly, I wanna show you how the service worker gets registered. Inside the app module, it will register the service worker in the n g s w worker file if the build is production. However, this didn't work for me using AngularFire 2, so I want to show you an alternative way to register a worker. So you can go into the main TS file. Then after your application is bootstrapped, you can see if the service worker is in the browser navigator and then register your service worker there. Now we're ready to move on to the important part, which is the ng service worker config file. This file tells Angular how to generate the service worker, so So I wanna go through here and explain to you what all these different options mean. The first option is index, which is just the entry point for your app, and then we have an assets group array, which defines the static assets that are going to be cached by the service worker. The first asset group is called app, and the install mode is prefetch. Prefetch means that the worker is going to go out and cache all these assets right away. So, essentially, these are going to be all the files that are necessary to run your app offline. So So you'll notice it has all the files that are known at build time, including our index HTML entry point, as well as the various bundle files. We can also add additional external files, which is probably gonna be necessary if you're using something like Angular Material. You can do that by adding an additional URLs array and Add the URLs that you wanna cache to it. This will be a good place for web fonts or any other styles you get from a CDN. Now Now I'm going to jump down to our next asset group which this time is installed with the lazy strategy. We're going to add the assets directory to it and the only difference is that it will cache these assets only when they're actually requested by the user in some way through the app. At this point, our worker knows how to cache all of our assets that are known at build time, but what happens if we receive data from an external API?
For that, we can use the DataGroups array, which has 2 distinct strategies. The first strategy we're looking at here is API Freshness. This strategy will always try to make a network call for the latest and greatest data Unless it times out after 10 seconds in this case, then it will default to whatever's in the cache. For our Hacker News app, we're only going to use this strategy when the user navigates to the new URL, which contains the latest posts from Hacker News. You can add your own URLs to the URLs array, and then you can control the cache behavior in the Cache Config object.
google
blogging
data management
databases
data
So freshness is great when data is constantly changing, but if it doesn't change very often, you can use the API performance strategy. The difference here is it's going to try and use the data in the cache, but if the max age of the cache is expired then it will go out and make another network call for new data. Data served from the cache is going to be a lot more performant and appear instantaneous in the eyes of the user. Eventually, when you run a production build, you can go into Chrome and pull up the network tab, and you'll see that assets are served from the Service Worker. An asset from a Service Worker only takes a few milliseconds, so it will appear instantaneous for your users. Before getting to that point though, we first need to go into the index HTML file and add a few meta tags to ensure that we get the 100 PWA score. The main things here are that we link the manifest JSON file and that we add a meta tag for our theme color. The index HTML file can be thought of as the splash page similar to the initial loading page on a native mobile app. The typical way to handle this page is with your app icon and possibly a very small amount of text. Then the last thing we'll do is add a no script tag to Let the user know that they need JavaScript enabled to use this app. At this point, we should be able to build our app by running ng build flag production. After that's finished, we can go into the dist folder, and you'll notice a couple extra files here. We have manifest.json and ngsw.json, which contains all of our actual compiled configuration for the worker. If we open that up, you can see that it lists all of our version bundle files as well as any other configuration that we set in the main configuration file for the worker. Then if we go into the worker JavaScript file, we can see all kinds of crazy JavaScript that we're really glad we didn't have to write from scratch. When you're ready to test your app, you can go into Chrome, into The Audit tab and then click Perform an Audit. It's going to simulate how your app would load on a slower 3 g connection on a mobile device. For a progressive web app, it's going to verify that you register a service worker. It's also going to look at your manifest file as well as a handful of other related audits. Currently, we're at a 100 score for progressive web app, but our performance is only at 79. It measures performance based on how quickly you can get the first meaningful content on the page and then how long it takes your page to become interactive by the user. 79 isn't a very good score compared to other Hacker News PWAs. So in the next video, I'll show you how to optimize Angular to bring this score up into the nineties.
If you wanna start building your own Hacker News app, you can actually do it using AngularFire 2, because the Hacker News API is hosted on Firebase. So you can achieve that by simply installing AngularFire 2, and And then when you initialize your app, you use the database URL that is the Hacker News endpoint.
google
If you wanna build the exact app I built here, go to angularfirebase.com, and I have greater detail of the actual app source code there. That's it for the Angular 5 Service Worker module. If this video helped you, please like and subscribe. And if you want to take your PWA to the next level, consider becoming a pro member at angularfirebase.com.
You'll get a free copy of my book, as well as a whole bunch of exclusive content. Thanks for watching, and I'll see you next time.
books
publishing
reading
copyright
magazines
Just last month, Angular 5 was released, and with it comes the new service worker module that makes building progressive web apps easier than ever before. All we need to do is set a few configuration variables and Angular will automatically generate a service worker with our production build. In this video, I'm I'm going to show you how to use the worker to score 100 on a progressive web app audit, and I'll show you how to customize the worker to fit the needs of your specific application. I'm going to do this by creating my own version of Hacker News, which is the gold standard for comparing performance and usability across various JavaScript works. If you're just finding me for the first time, make sure to subscribe. And for this video, I have a full working demo deployed to Firebase Hosting. Feel free to mess around with it, and if you see anything you want to optimize or fix, send me a pull request on GitHub. Before we get going, I just want to point out that Service Workers aren't supported on all modern browsers. Safari and Microsoft Edge are the main holdouts, but they should be supported in the future. At the time of this video, the Service Worker is only available in the beta version of the Angular CLI, so you'll want to install it with the next tag. And then make sure the version you have installed is 1.6 or greater. And if you're starting from an existing Angular 5 app, you can simply create the files I'm about to show you in the upcoming steps here. To create a new app with the service worker configured automatically, run ng new with the service worker flag. Then inside that new app, the first place I'm going to go is It's the Angular CLI JSON file. Inside here, you'll want to add manifest JSON to the assets array. We're going to create this file manually here in the next step. Then down here, you'll notice that the service worker option is set to true, which tells Angular to generate the service worker at build time. From there, you're going to create a Web App manifest in the source directory. The purpose of the manifest is to tell browsers how to handle your Web App. We're just going to set the bare Minimum options for now. So we have a start URL, which is just the root, and then you'll need a theme color and background color. Then you'll need to add some icons if you want Your app to be installable on mobile devices. The bare minimum is just a 512 by 512 image, but you can add additional sizes here if you want to as well. You'll want to save your images inside the assets folder in your Angular app. Now really quickly, I wanna show you how the service worker gets registered. Inside the app module, it will register the service worker in the n g s w worker file if the build is production. However, this didn't work for me using AngularFire 2, so I want to show you an alternative way to register a worker. So you can go into the main TS file. Then after your application is bootstrapped, you can see if the service worker is in the browser navigator and then register your service worker there. Now we're ready to move on to the important part, which is the ng service worker config file. This file tells Angular how to generate the service worker, so So I wanna go through here and explain to you what all these different options mean. The first option is index, which is just the entry point for your app, and then we have an assets group array, which defines the static assets that are going to be cached by the service worker. The first asset group is called app, and the install mode is prefetch. Prefetch means that the worker is going to go out and cache all these assets right away. So, essentially, these are going to be all the files that are necessary to run your app offline. So So you'll notice it has all the files that are known at build time, including our index HTML entry point, as well as the various bundle files. We can also add additional external files, which is probably gonna be necessary if you're using something like Angular Material. You can do that by adding an additional URLs array and Add the URLs that you wanna cache to it. This will be a good place for web fonts or any other styles you get from a CDN. Now Now I'm going to jump down to our next asset group which this time is installed with the lazy strategy. We're going to add the assets directory to it and the only difference is that it will cache these assets only when they're actually requested by the user in some way through the app. At this point, our worker knows how to cache all of our assets that are known at build time, but what happens if we receive data from an external API? For that, we can use the DataGroups array, which has 2 distinct strategies. The first strategy we're looking at here is API Freshness. This strategy will always try to make a network call for the latest and greatest data Unless it times out after 10 seconds in this case, then it will default to whatever's in the cache. For our Hacker News app, we're only going to use this strategy when the user navigates to the new URL, which contains the latest posts from Hacker News. You can add your own URLs to the URLs array, and then you can control the cache behavior in the Cache Config object. So freshness is great when data is constantly changing, but if it doesn't change very often, you can use the API performance strategy. The difference here is it's going to try and use the data in the cache, but if the max age of the cache is expired then it will go out and make another network call for new data. Data served from the cache is going to be a lot more performant and appear instantaneous in the eyes of the user. Eventually, when you run a production build, you can go into Chrome and pull up the network tab, and you'll see that assets are served from the Service Worker. An asset from a Service Worker only takes a few milliseconds, so it will appear instantaneous for your users. Before getting to that point though, we first need to go into the index HTML file and add a few meta tags to ensure that we get the 100 PWA score. The main things here are that we link the manifest JSON file and that we add a meta tag for our theme color. The index HTML file can be thought of as the splash page similar to the initial loading page on a native mobile app. The typical way to handle this page is with your app icon and possibly a very small amount of text. Then the last thing we'll do is add a no script tag to Let the user know that they need JavaScript enabled to use this app. At this point, we should be able to build our app by running ng build flag production. After that's finished, we can go into the dist folder, and you'll notice a couple extra files here. We have manifest.json and ngsw.json, which contains all of our actual compiled configuration for the worker. If we open that up, you can see that it lists all of our version bundle files as well as any other configuration that we set in the main configuration file for the worker. Then if we go into the worker JavaScript file, we can see all kinds of crazy JavaScript that we're really glad we didn't have to write from scratch. When you're ready to test your app, you can go into Chrome, into The Audit tab and then click Perform an Audit. It's going to simulate how your app would load on a slower 3 g connection on a mobile device. For a progressive web app, it's going to verify that you register a service worker. It's also going to look at your manifest file as well as a handful of other related audits. Currently, we're at a 100 score for progressive web app, but our performance is only at 79. It measures performance based on how quickly you can get the first meaningful content on the page and then how long it takes your page to become interactive by the user. 79 isn't a very good score compared to other Hacker News PWAs. So in the next video, I'll show you how to optimize Angular to bring this score up into the nineties. If you wanna start building your own Hacker News app, you can actually do it using AngularFire 2, because the Hacker News API is hosted on Firebase. So you can achieve that by simply installing AngularFire 2, and And then when you initialize your app, you use the database URL that is the Hacker News endpoint. If you wanna build the exact app I built here, go to angularfirebase.com, and I have greater detail of the actual app source code there. That's it for the Angular 5 Service Worker module. If this video helped you, please like and subscribe. And if you want to take your PWA to the next level, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book, as well as a whole bunch of exclusive content. Thanks for watching, and I'll see you next time.
Just
just
last
last
month,
month
Angular
angular
5
5
was
was
released,
released
and
and
with
with
it
it
comes
comes
the
the
new
new
service
service
worker
worker
module
module
that
that
makes
makes
building
building
progressive
progressive
web
web
apps
apps
easier
easier
than
than
ever
ever
before.
before
All
all
we
we
need
need
to
to
do
do
is
is
set
set
a
a
few
few
configuration
configuration
variables
variables
and
and
Angular
angular
will
will
automatically
automatically
generate
generate
a
a
service
service
worker
worker
with
with
our
our
production
production
build.
build
In
in
this
this
video,
video
I'm
i'm
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
use
use
the
the
worker
worker
to
to
score
score
100
100
on
on
a
a
progressive
progressive
web
web
app
app
audit,
audit
and
and
I'll
i'll
show
show
you
you
how
how
to
to
customize
customize
the
the
worker
worker
to
to
fit
fit
the
the
needs
needs
of
of
your
your
specific
specific
application.
application
I'm
i'm
going
going
to
to
do
do
this
this
by
by
creating
creating
my
my
own
own
version
version
of
of
Hacker
hacker
News,
news
which
which
is
is
the
the
gold
gold
standard
standard
for
for
comparing
comparing
performance
performance
and
and
usability
usability
across
across
various
various
JavaScript
javascript
works.
works
If
if
you're
you're
just
just
finding
finding
me
me
for
for
the
the
first
first
time,
time
make
make
sure
sure
to
to
subscribe.
subscribe
And
and
for
for
this
this
video,
video
I
i
have
have
a
a
full
full
working
working
demo
demo
deployed
deployed
to
to
Firebase
firebase
Hosting.
hosting
Feel
feel
free
free
to
to
mess
mess
around
around
with
with
it,
it
and
and
if
if
you
you
see
see
anything
anything
you
you
want
want
to
to
optimize
optimize
or
or
fix,
fix
send
send
me
me
a
a
pull
pull
request
request
on
on
GitHub.
github
Before
before
we
we
get
get
going,
going
I
i
just
just
want
want
to
to
point
point
out
out
that
that
Service
service
Workers
workers
aren't
aren't
supported
supported
on
on
all
all
modern
modern
browsers.
browsers
Safari
safari
and
and
Microsoft
microsoft
Edge
edge
are
are
the
the
main
main
holdouts,
holdouts
but
but
they
they
should
should
be
be
supported
supported
in
in
the
the
future.
future
At
at
the
the
time
time
of
of
this
this
video,
video
the
the
Service
service
Worker
worker
is
is
only
only
available
available
in
in
the
the
beta
beta
version
version
of
of
the
the
Angular
angular
CLI,
cli
so
so
you'll
you'll
want
want
to
to
install
install
it
it
with
with
the
the
next
next
tag.
tag
And
and
then
then
make
make
sure
sure
the
the
version
version
you
you
have
have
installed
installed
is
is
1.6
1.6
or
or
greater.
greater
And
and
if
if
you're
you're
starting
starting
from
from
an
an
existing
existing
Angular
angular
5
5
app,
app
you
you
can
can
simply
simply
create
create
the
the
files
files
I'm
i'm
about
about
to
to
show
show
you
you
in
in
the
the
upcoming
upcoming
steps
steps
here.
here
To
to
create
create
a
a
new
new
app
app
with
with
the
the
service
service
worker
worker
configured
configured
automatically,
automatically
run
run
ng
ng
new
new
with
with
the
the
service
service
worker
worker
flag.
flag
Then
then
inside
inside
that
that
new
new
app,
app
the
the
first
first
place
place
I'm
i'm
going
going
to
to
go
go
is
is
It's
it's
the
the
Angular
angular
CLI
cli
JSON
json
file.
file
Inside
inside
here,
here
you'll
you'll
want
want
to
to
add
add
manifest
manifest
JSON
json
to
to
the
the
assets
assets
array.
array
We're
we're
going
going
to
to
create
create
this
this
file
file
manually
manually
here
here
in
in
the
the
next
next
step.
step
Then
then
down
down
here,
here
you'll
you'll
notice
notice
that
that
the
the
service
service
worker
worker
option
option
is
is
set
set
to
to
true,
true
which
which
tells
tells
Angular
angular
to
to
generate
generate
the
the
service
service
worker
worker
at
at
build
build
time.
time
From
from
there,
there
you're
you're
going
going
to
to
create
create
a
a
Web
web
App
app
manifest
manifest
in
in
the
the
source
source
directory.
directory
The
the
purpose
purpose
of
of
the
the
manifest
manifest
is
is
to
to
tell
tell
browsers
browsers
how
how
to
to
handle
handle
your
your
Web
web
App.
app
We're
we're
just
just
going
going
to
to
set
set
the
the
bare
bare
Minimum
minimum
options
options
for
for
now.
now
So
so
we
we
have
have
a
a
start
start
URL,
url
which
which
is
is
just
just
the
the
root,
root
and
and
then
then
you'll
you'll
need
need
a
a
theme
theme
color
color
and
and
background
background
color.
color
Then
then
you'll
you'll
need
need
to
to
add
add
some
some
icons
icons
if
if
you
you
want
want
Your
your
app
app
to
to
be
be
installable
installable
on
on
mobile
mobile
devices.
devices
The
the
bare
bare
minimum
minimum
is
is
just
just
a
a
512
512
by
by
512
512
image,
image
but
but
you
you
can
can
add
add
additional
additional
sizes
sizes
here
here
if
if
you
you
want
want
to
to
as
as
well.
well
You'll
you'll
want
want
to
to
save
save
your
your
images
images
inside
inside
the
the
assets
assets
folder
folder
in
in
your
your
Angular
angular
app.
app
Now
now
really
really
quickly,
quickly
I
i
wanna
wanna
show
show
you
you
how
how
the
the
service
service
worker
worker
gets
gets
registered.
registered
Inside
inside
the
the
app
app
module,
module
it
it
will
will
register
register
the
the
service
service
worker
worker
in
in
the
the
n
n
g
g
s
s
w
w
worker
worker
file
file
if
if
the
the
build
build
is
is
production.
production
However,
however
this
this
didn't
didn't
work
work
for
for
me
me
using
using
AngularFire
angularfire
2,
2
so
so
I
i
want
want
to
to
show
show
you
you
an
an
alternative
alternative
way
way
to
to
register
register
a
a
worker.
worker
So
so
you
you
can
can
go
go
into
into
the
the
main
main
TS
ts
file.
file
Then
then
after
after
your
your
application
application
is
is
bootstrapped,
bootstrapped
you
you
can
can
see
see
if
if
the
the
service
service
worker
worker
is
is
in
in
the
the
browser
browser
navigator
navigator
and
and
then
then
register
register
your
your
service
service
worker
worker
there.
there
Now
now
we're
we're
ready
ready
to
to
move
move
on
on
to
to
the
the
important
important
part,
part
which
which
is
is
the
the
ng
ng
service
service
worker
worker
config
config
file.
file
This
this
file
file
tells
tells
Angular
angular
how
how
to
to
generate
generate
the
the
service
service
worker,
worker
so
so
So
so
I
i
wanna
wanna
go
go
through
through
here
here
and
and
explain
explain
to
to
you
you
what
what
all
all
these
these
different
different
options
options
mean.
mean
The
the
first
first
option
option
is
is
index,
index
which
which
is
is
just
just
the
the
entry
entry
point
point
for
for
your
your
app,
app
and
and
then
then
we
we
have
have
an
an
assets
assets
group
group
array,
array
which
which
defines
defines
the
the
static
static
assets
assets
that
that
are
are
going
going
to
to
be
be
cached
cached
by
by
the
the
service
service
worker.
worker
The
the
first
first
asset
asset
group
group
is
is
called
called
app,
app
and
and
the
the
install
install
mode
mode
is
is
prefetch.
prefetch
Prefetch
prefetch
means
means
that
that
the
the
worker
worker
is
is
going
going
to
to
go
go
out
out
and
and
cache
cache
all
all
these
these
assets
assets
right
right
away.
away
So,
so
essentially,
essentially
these
these
are
are
going
going
to
to
be
be
all
all
the
the
files
files
that
that
are
are
necessary
necessary
to
to
run
run
your
your
app
app
offline.
offline
So
so
So
so
you'll
you'll
notice
notice
it
it
has
has
all
all
the
the
files
files
that
that
are
are
known
known
at
at
build
build
time,
time
including
including
our
our
index
index
HTML
html
entry
entry
point,
point
as
as
well
well
as
as
the
the
various
various
bundle
bundle
files.
files
We
we
can
can
also
also
add
add
additional
additional
external
external
files,
files
which
which
is
is
probably
probably
gonna
gonna
be
be
necessary
necessary
if
if
you're
you're
using
using
something
something
like
like
Angular
angular
Material.
material
You
you
can
can
do
do
that
that
by
by
adding
adding
an
an
additional
additional
URLs
urls
array
array
and
and
Add
add
the
the
URLs
urls
that
that
you
you
wanna
wanna
cache
cache
to
to
it.
it
This
this
will
will
be
be
a
a
good
good
place
place
for
for
web
web
fonts
fonts
or
or
any
any
other
other
styles
styles
you
you
get
get
from
from
a
a
CDN.
cdn
Now
now
Now
now
I'm
i'm
going
going
to
to
jump
jump
down
down
to
to
our
our
next
next
asset
asset
group
group
which
which
this
this
time
time
is
is
installed
installed
with
with
the
the
lazy
lazy
strategy.
strategy
We're
we're
going
going
to
to
add
add
the
the
assets
assets
directory
directory
to
to
it
it
and
and
the
the
only
only
difference
difference
is
is
that
that
it
it
will
will
cache
cache
these
these
assets
assets
only
only
when
when
they're
they're
actually
actually
requested
requested
by
by
the
the
user
user
in
in
some
some
way
way
through
through
the
the
app.
app
At
at
this
this
point,
point
our
our
worker
worker
knows
knows
how
how
to
to
cache
cache
all
all
of
of
our
our
assets
assets
that
that
are
are
known
known
at
at
build
build
time,
time
but
but
what
what
happens
happens
if
if
we
we
receive
receive
data
data
from
from
an
an
external
external
API?
api
For
for
that,
that
we
we
can
can
use
use
the
the
DataGroups
datagroups
array,
array
which
which
has
has
2
2
distinct
distinct
strategies.
strategies
The
the
first
first
strategy
strategy
we're
we're
looking
looking
at
at
here
here
is
is
API
api
Freshness.
freshness
This
this
strategy
strategy
will
will
always
always
try
try
to
to
make
make
a
a
network
network
call
call
for
for
the
the
latest
latest
and
and
greatest
greatest
data
data
Unless
unless
it
it
times
times
out
out
after
after
10
10
seconds
seconds
in
in
this
this
case,
case
then
then
it
it
will
will
default
default
to
to
whatever's
whatever's
in
in
the
the
cache.
cache
For
for
our
our
Hacker
hacker
News
news
app,
app
we're
we're
only
only
going
going
to
to
use
use
this
this
strategy
strategy
when
when
the
the
user
user
navigates
navigates
to
to
the
the
new
new
URL,
url
which
which
contains
contains
the
the
latest
latest
posts
posts
from
from
Hacker
hacker
News.
news
You
you
can
can
add
add
your
your
own
own
URLs
urls
to
to
the
the
URLs
urls
array,
array
and
and
then
then
you
you
can
can
control
control
the
the
cache
cache
behavior
behavior
in
in
the
the
Cache
cache
Config
config
object.
object
So
so
freshness
freshness
is
is
great
great
when
when
data
data
is
is
constantly
constantly
changing,
changing
but
but
if
if
it
it
doesn't
doesn't
change
change
very
very
often,
often
you
you
can
can
use
use
the
the
API
api
performance
performance
strategy.
strategy
The
the
difference
difference
here
here
is
is
it's
it's
going
going
to
to
try
try
and
and
use
use
the
the
data
data
in
in
the
the
cache,
cache
but
but
if
if
the
the
max
max
age
age
of
of
the
the
cache
cache
is
is
expired
expired
then
then
it
it
will
will
go
go
out
out
and
and
make
make
another
another
network
network
call
call
for
for
new
new
data.
data
Data
data
served
served
from
from
the
the
cache
cache
is
is
going
going
to
to
be
be
a
a
lot
lot
more
more
performant
performant
and
and
appear
appear
instantaneous
instantaneous
in
in
the
the
eyes
eyes
of
of
the
the
user.
user
Eventually,
eventually
when
when
you
you
run
run
a
a
production
production
build,
build
you
you
can
can
go
go
into
into
Chrome
chrome
and
and
pull
pull
up
up
the
the
network
network
tab,
tab
and
and
you'll
you'll
see
see
that
that
assets
assets
are
are
served
served
from
from
the
the
Service
service
Worker.
worker
An
an
asset
asset
from
from
a
a
Service
service
Worker
worker
only
only
takes
takes
a
a
few
few
milliseconds,
milliseconds
so
so
it
it
will
will
appear
appear
instantaneous
instantaneous
for
for
your
your
users.
users
Before
before
getting
getting
to
to
that
that
point
point
though,
though
we
we
first
first
need
need
to
to
go
go
into
into
the
the
index
index
HTML
html
file
file
and
and
add
add
a
a
few
few
meta
meta
tags
tags
to
to
ensure
ensure
that
that
we
we
get
get
the
the
100
100
PWA
pwa
score.
score
The
the
main
main
things
things
here
here
are
are
that
that
we
we
link
link
the
the
manifest
manifest
JSON
json
file
file
and
and
that
that
we
we
add
add
a
a
meta
meta
tag
tag
for
for
our
our
theme
theme
color.
color
The
the
index
index
HTML
html
file
file
can
can
be
be
thought
thought
of
of
as
as
the
the
splash
splash
page
page
similar
similar
to
to
the
the
initial
initial
loading
loading
page
page
on
on
a
a
native
native
mobile
mobile
app.
app
The
the
typical
typical
way
way
to
to
handle
handle
this
this
page
page
is
is
with
with
your
your
app
app
icon
icon
and
and
possibly
possibly
a
a
very
very
small
small
amount
amount
of
of
text.
text
Then
then
the
the
last
last
thing
thing
we'll
we'll
do
do
is
is
add
add
a
a
no
no
script
script
tag
tag
to
to
Let
let
the
the
user
user
know
know
that
that
they
they
need
need
JavaScript
javascript
enabled
enabled
to
to
use
use
this
this
app.
app
At
at
this
this
point,
point
we
we
should
should
be
be
able
able
to
to
build
build
our
our
app
app
by
by
running
running
ng
ng
build
build
flag
flag
production.
production
After
after
that's
that's
finished,
finished
we
we
can
can
go
go
into
into
the
the
dist
dist
folder,
folder
and
and
you'll
you'll
notice
notice
a
a
couple
couple
extra
extra
files
files
here.
here
We
we
have
have
manifest.json
manifest.json
and
and
ngsw.json,
ngsw.json
which
which
contains
contains
all
all
of
of
our
our
actual
actual
compiled
compiled
configuration
configuration
for
for
the
the
worker.
worker
If
if
we
we
open
open
that
that
up,
up
you
you
can
can
see
see
that
that
it
it
lists
lists
all
all
of
of
our
our
version
version
bundle
bundle
files
files
as
as
well
well
as
as
any
any
other
other
configuration
configuration
that
that
we
we
set
set
in
in
the
the
main
main
configuration
configuration
file
file
for
for
the
the
worker.
worker
Then
then
if
if
we
we
go
go
into
into
the
the
worker
worker
JavaScript
javascript
file,
file
we
we
can
can
see
see
all
all
kinds
kinds
of
of
crazy
crazy
JavaScript
javascript
that
that
we're
we're
really
really
glad
glad
we
we
didn't
didn't
have
have
to
to
write
write
from
from
scratch.
scratch
When
when
you're
you're
ready
ready
to
to
test
test
your
your
app,
app
you
you
can
can
go
go
into
into
Chrome,
chrome
into
into
The
the
Audit
audit
tab
tab
and
and
then
then
click
click
Perform
perform
an
an
Audit.
audit
It's
it's
going
going
to
to
simulate
simulate
how
how
your
your
app
app
would
would
load
load
on
on
a
a
slower
slower
3
3
g
g
connection
connection
on
on
a
a
mobile
mobile
device.
device
For
for
a
a
progressive
progressive
web
web
app,
app
it's
it's
going
going
to
to
verify
verify
that
that
you
you
register
register
a
a
service
service
worker.
worker
It's
it's
also
also
going
going
to
to
look
look
at
at
your
your
manifest
manifest
file
file
as
as
well
well
as
as
a
a
handful
handful
of
of
other
other
related
related
audits.
audits
Currently,
currently
we're
we're
at
at
a
a
100
100
score
score
for
for
progressive
progressive
web
web
app,
app
but
but
our
our
performance
performance
is
is
only
only
at
at
79.
79
It
it
measures
measures
performance
performance
based
based
on
on
how
how
quickly
quickly
you
you
can
can
get
get
the
the
first
first
meaningful
meaningful
content
content
on
on
the
the
page
page
and
and
then
then
how
how
long
long
it
it
takes
takes
your
your
page
page
to
to
become
become
interactive
interactive
by
by
the
the
user.
user
79
79
isn't
isn't
a
a
very
very
good
good
score
score
compared
compared
to
to
other
other
Hacker
hacker
News
news
PWAs.
pwas
So
so
in
in
the
the
next
next
video,
video
I'll
i'll
show
show
you
you
how
how
to
to
optimize
optimize
Angular
angular
to
to
bring
bring
this
this
score
score
up
up
into
into
the
the
nineties.
nineties
If
if
you
you
wanna
wanna
start
start
building
building
your
your
own
own
Hacker
hacker
News
news
app,
app
you
you
can
can
actually
actually
do
do
it
it
using
using
AngularFire
angularfire
2,
2
because
because
the
the
Hacker
hacker
News
news
API
api
is
is
hosted
hosted
on
on
Firebase.
firebase
So
so
you
you
can
can
achieve
achieve
that
that
by
by
simply
simply
installing
installing
AngularFire
angularfire
2,
2
and
and
And
and
then
then
when
when
you
you
initialize
initialize
your
your
app,
app
you
you
use
use
the
the
database
database
URL
url
that
that
is
is
the
the
Hacker
hacker
News
news
endpoint.
endpoint
If
if
you
you
wanna
wanna
build
build
the
the
exact
exact
app
app
I
i
built
built
here,
here
go
go
to
to
angularfirebase.com,
angularfirebase.com
and
and
I
i
have
have
greater
greater
detail
detail
of
of
the
the
actual
actual
app
app
source
source
code
code
there.
there
That's
that's
it
it
for
for
the
the
Angular
angular
5
5
Service
service
Worker
worker
module.
module
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
want
want
to
to
take
take
your
your
PWA
pwa
to
to
the
the
next
next
level,
level
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book,
book
as
as
well
well
as
as
a
a
whole
whole
bunch
bunch
of
of
exclusive
exclusive
content.
content
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speakers discuss the use of worker to score 100 on a web app audit and customize the worker to fit the specific application. They also explain how to register a worker in the n g s w worker file, add external files, and generate a worker and add a media file to the URL. The process for creating a worker in the Angular app is discussed, including creating a URL and a theme color, and the use of the service worker config file and API Freshness strategy for cache behavior. The optimization of Angular for bringing score into the 90s is also discussed, and a free book and exclusive content are provided.
Angular 5 Service Worker - Hacker News PWA
Just last month, Angular 5 was released, and with it comes the new service worker module that makes building progressive web apps easier than ever before. All we need to do is set a few configuration variables and Angular will automatically generate a service worker with our production build. In this video, I'm I'm going to show you how to use the worker to score 100 on a progressive web app audit, and I'll show you how to customize the worker to fit the needs of your specific application. I'm going to do this by creating my own version of Hacker News, which is the gold standard for comparing performance and usability across various JavaScript works. If you're just finding me for the first time, make sure to subscribe. And for this video, I have a full working demo deployed to Firebase Hosting. Feel free to mess around with it, and if you see anything you want to optimize or fix, send me a pull request on GitHub. Before we get going, I just want to point out that Service Workers aren't supported on all modern browsers. Safari and Microsoft Edge are the main holdouts, but they should be supported in the future. At the time of this video, the Service Worker is only available in the beta version of the Angular CLI, so you'll want to install it with the next tag. And then make sure the version you have installed is 1.6 or greater. And if you're starting from an existing Angular 5 app, you can simply create the files I'm about to show you in the upcoming steps here. To create a new app with the service worker configured automatically, run ng new with the service worker flag. Then inside that new app, the first place I'm going to go is It's the Angular CLI JSON file. Inside here, you'll want to add manifest JSON to the assets array. We're going to create this file manually here in the next step. Then down here, you'll notice that the service worker option is set to true, which tells Angular to generate the service worker at build time. From there, you're going to create a Web App manifest in the source directory. The purpose of the manifest is to tell browsers how to handle your Web App. We're just going to set the bare Minimum options for now. So we have a start URL, which is just the root, and then you'll need a theme color and background color. Then you'll need to add some icons if you want Your app to be installable on mobile devices. The bare minimum is just a 512 by 512 image, but you can add additional sizes here if you want to as well. You'll want to save your images inside the assets folder in your Angular app. Now really quickly, I wanna show you how the service worker gets registered. Inside the app module, it will register the service worker in the n g s w worker file if the build is production. However, this didn't work for me using AngularFire 2, so I want to show you an alternative way to register a worker. So you can go into the main TS file. Then after your application is bootstrapped, you can see if the service worker is in the browser navigator and then register your service worker there. Now we're ready to move on to the important part, which is the ng service worker config file. This file tells Angular how to generate the service worker, so So I wanna go through here and explain to you what all these different options mean. The first option is index, which is just the entry point for your app, and then we have an assets group array, which defines the static assets that are going to be cached by the service worker. The first asset group is called app, and the install mode is prefetch. Prefetch means that the worker is going to go out and cache all these assets right away. So, essentially, these are going to be all the files that are necessary to run your app offline. So So you'll notice it has all the files that are known at build time, including our index HTML entry point, as well as the various bundle files. We can also add additional external files, which is probably gonna be necessary if you're using something like Angular Material. You can do that by adding an additional URLs array and Add the URLs that you wanna cache to it. This will be a good place for web fonts or any other styles you get from a CDN. Now Now I'm going to jump down to our next asset group which this time is installed with the lazy strategy. We're going to add the assets directory to it and the only difference is that it will cache these assets only when they're actually requested by the user in some way through the app. At this point, our worker knows how to cache all of our assets that are known at build time, but what happens if we receive data from an external API? For that, we can use the DataGroups array, which has 2 distinct strategies. The first strategy we're looking at here is API Freshness. This strategy will always try to make a network call for the latest and greatest data Unless it times out after 10 seconds in this case, then it will default to whatever's in the cache. For our Hacker News app, we're only going to use this strategy when the user navigates to the new URL, which contains the latest posts from Hacker News. You can add your own URLs to the URLs array, and then you can control the cache behavior in the Cache Config object. So freshness is great when data is constantly changing, but if it doesn't change very often, you can use the API performance strategy. The difference here is it's going to try and use the data in the cache, but if the max age of the cache is expired then it will go out and make another network call for new data. Data served from the cache is going to be a lot more performant and appear instantaneous in the eyes of the user. Eventually, when you run a production build, you can go into Chrome and pull up the network tab, and you'll see that assets are served from the Service Worker. An asset from a Service Worker only takes a few milliseconds, so it will appear instantaneous for your users. Before getting to that point though, we first need to go into the index HTML file and add a few meta tags to ensure that we get the 100 PWA score. The main things here are that we link the manifest JSON file and that we add a meta tag for our theme color. The index HTML file can be thought of as the splash page similar to the initial loading page on a native mobile app. The typical way to handle this page is with your app icon and possibly a very small amount of text. Then the last thing we'll do is add a no script tag to Let the user know that they need JavaScript enabled to use this app. At this point, we should be able to build our app by running ng build flag production. After that's finished, we can go into the dist folder, and you'll notice a couple extra files here. We have manifest.json and ngsw.json, which contains all of our actual compiled configuration for the worker. If we open that up, you can see that it lists all of our version bundle files as well as any other configuration that we set in the main configuration file for the worker. Then if we go into the worker JavaScript file, we can see all kinds of crazy JavaScript that we're really glad we didn't have to write from scratch. When you're ready to test your app, you can go into Chrome, into The Audit tab and then click Perform an Audit. It's going to simulate how your app would load on a slower 3 g connection on a mobile device. For a progressive web app, it's going to verify that you register a service worker. It's also going to look at your manifest file as well as a handful of other related audits. Currently, we're at a 100 score for progressive web app, but our performance is only at 79. It measures performance based on how quickly you can get the first meaningful content on the page and then how long it takes your page to become interactive by the user. 79 isn't a very good score compared to other Hacker News PWAs. So in the next video, I'll show you how to optimize Angular to bring this score up into the nineties. If you wanna start building your own Hacker News app, you can actually do it using AngularFire 2, because the Hacker News API is hosted on Firebase. So you can achieve that by simply installing AngularFire 2, and And then when you initialize your app, you use the database URL that is the Hacker News endpoint. If you wanna build the exact app I built here, go to angularfirebase.com, and I have greater detail of the actual app source code there. That's it for the Angular 5 Service Worker module. If this video helped you, please like and subscribe. And if you want to take your PWA to the next level, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book, as well as a whole bunch of exclusive content. Thanks for watching, and I'll see you next time.
The speakers discuss the use of worker to score 100 on a web app audit and customize the worker to fit the specific application. They also explain how to register a worker in the n g s w worker file, add external files, and generate a worker and add a media file to the URL. The process for creating a worker in the Angular app is discussed, including creating a URL and a theme color, and the use of the service worker config file and API Freshness strategy for cache behavior. The optimization of Angular for bringing score into the 90s is also discussed, and a free book and exclusive content are provided.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Angular 5 Service Worker - Hacker News PWA 
        and a small summary : The speakers discuss the use of worker to score 100 on a web app audit and customize the worker to fit the specific application. They also explain how to register a worker in the n g s w worker file, add external files, and generate a worker and add a media file to the URL. The process for creating a worker in the Angular app is discussed, including creating a URL and a theme color, and the use of the service worker config file and API Freshness strategy for cache behavior. The optimization of Angular for bringing score into the 90s is also discussed, and a free book and exclusive content are provided.
        [/INST]
        
        Generate the video : Just last month, Angular 5 was released, and with it comes the new service worker module that makes building progressive web apps easier than ever before. All we need to do is set a few configuration variables and Angular will automatically generate a service worker with our production build. In this video, I'm I'm going to show you how to use the worker to score 100 on a progressive web app audit, and I'll show you how to customize the worker to fit the needs of your specific application. I'm going to do this by creating my own version of Hacker News, which is the gold standard for comparing performance and usability across various JavaScript works. If you're just finding me for the first time, make sure to subscribe. And for this video, I have a full working demo deployed to Firebase Hosting. Feel free to mess around with it, and if you see anything you want to optimize or fix, send me a pull request on GitHub. Before we get going, I just want to point out that Service Workers aren't supported on all modern browsers. Safari and Microsoft Edge are the main holdouts, but they should be supported in the future. At the time of this video, the Service Worker is only available in the beta version of the Angular CLI, so you'll want to install it with the next tag. And then make sure the version you have installed is 1.6 or greater. And if you're starting from an existing Angular 5 app, you can simply create the files I'm about to show you in the upcoming steps here. To create a new app with the service worker configured automatically, run ng new with the service worker flag. Then inside that new app, the first place I'm going to go is It's the Angular CLI JSON file. Inside here, you'll want to add manifest JSON to the assets array. We're going to create this file manually here in the next step. Then down here, you'll notice that the service worker option is set to true, which tells Angular to generate the service worker at build time. From there, you're going to create a Web App manifest in the source directory. The purpose of the manifest is to tell browsers how to handle your Web App. We're just going to set the bare Minimum options for now. So we have a start URL, which is just the root, and then you'll need a theme color and background color. Then you'll need to add some icons if you want Your app to be installable on mobile devices. The bare minimum is just a 512 by 512 image, but you can add additional sizes here if you want to as well. You'll want to save your images inside the assets folder in your Angular app. Now really quickly, I wanna show you how the service worker gets registered. Inside the app module, it will register the service worker in the n g s w worker file if the build is production. However, this didn't work for me using AngularFire 2, so I want to show you an alternative way to register a worker. So you can go into the main TS file. Then after your application is bootstrapped, you can see if the service worker is in the browser navigator and then register your service worker there. Now we're ready to move on to the important part, which is the ng service worker config file. This file tells Angular how to generate the service worker, so So I wanna go through here and explain to you what all these different options mean. The first option is index, which is just the entry point for your app, and then we have an assets group array, which defines the static assets that are going to be cached by the service worker. The first asset group is called app, and the install mode is prefetch. Prefetch means that the worker is going to go out and cache all these assets right away. So, essentially, these are going to be all the files that are necessary to run your app offline. So So you'll notice it has all the files that are known at build time, including our index HTML entry point, as well as the various bundle files. We can also add additional external files, which is probably gonna be necessary if you're using something like Angular Material. You can do that by adding an additional URLs array and Add the URLs that you wanna cache to it. This will be a good place for web fonts or any other styles you get from a CDN. Now Now I'm going to jump down to our next asset group which this time is installed with the lazy strategy. We're going to add the assets directory to it and the only difference is that it will cache these assets only when they're actually requested by the user in some way through the app. At this point, our worker knows how to cache all of our assets that are known at build time, but what happens if we receive data from an external API? For that, we can use the DataGroups array, which has 2 distinct strategies. The first strategy we're looking at here is API Freshness. This strategy will always try to make a network call for the latest and greatest data Unless it times out after 10 seconds in this case, then it will default to whatever's in the cache. For our Hacker News app, we're only going to use this strategy when the user navigates to the new URL, which contains the latest posts from Hacker News. You can add your own URLs to the URLs array, and then you can control the cache behavior in the Cache Config object. So freshness is great when data is constantly changing, but if it doesn't change very often, you can use the API performance strategy. The difference here is it's going to try and use the data in the cache, but if the max age of the cache is expired then it will go out and make another network call for new data. Data served from the cache is going to be a lot more performant and appear instantaneous in the eyes of the user. Eventually, when you run a production build, you can go into Chrome and pull up the network tab, and you'll see that assets are served from the Service Worker. An asset from a Service Worker only takes a few milliseconds, so it will appear instantaneous for your users. Before getting to that point though, we first need to go into the index HTML file and add a few meta tags to ensure that we get the 100 PWA score. The main things here are that we link the manifest JSON file and that we add a meta tag for our theme color. The index HTML file can be thought of as the splash page similar to the initial loading page on a native mobile app. The typical way to handle this page is with your app icon and possibly a very small amount of text. Then the last thing we'll do is add a no script tag to Let the user know that they need JavaScript enabled to use this app. At this point, we should be able to build our app by running ng build flag production. After that's finished, we can go into the dist folder, and you'll notice a couple extra files here. We have manifest.json and ngsw.json, which contains all of our actual compiled configuration for the worker. If we open that up, you can see that it lists all of our version bundle files as well as any other configuration that we set in the main configuration file for the worker. Then if we go into the worker JavaScript file, we can see all kinds of crazy JavaScript that we're really glad we didn't have to write from scratch. When you're ready to test your app, you can go into Chrome, into The Audit tab and then click Perform an Audit. It's going to simulate how your app would load on a slower 3 g connection on a mobile device. For a progressive web app, it's going to verify that you register a service worker. It's also going to look at your manifest file as well as a handful of other related audits. Currently, we're at a 100 score for progressive web app, but our performance is only at 79. It measures performance based on how quickly you can get the first meaningful content on the page and then how long it takes your page to become interactive by the user. 79 isn't a very good score compared to other Hacker News PWAs. So in the next video, I'll show you how to optimize Angular to bring this score up into the nineties. If you wanna start building your own Hacker News app, you can actually do it using AngularFire 2, because the Hacker News API is hosted on Firebase. So you can achieve that by simply installing AngularFire 2, and And then when you initialize your app, you use the database URL that is the Hacker News endpoint. If you wanna build the exact app I built here, go to angularfirebase.com, and I have greater detail of the actual app source code there. That's it for the Angular 5 Service Worker module. If this video helped you, please like and subscribe. And if you want to take your PWA to the next level, consider becoming a pro member at angularfirebase.com. You'll get a free copy of my book, as well as a whole bunch of exclusive content. Thanks for watching, and I'll see you next time.
        