This article has been updated to the latest version of 7. Some content may still be applicable to Angular 2 or other previous versions. With the release of the latest Angular 2. In this post, we will cover how to make a simple Hello World Angular app and leverage Service Workers make our app lightning fast and offline capable. Then we will look at a small more useful app and how Service Workers improved its performance. Service Workers So first what is a Service Worker. Well, you can kind of think about it as a standalone JavaScript program that you can run in your browser. Why would this be useful. Well with Service Workers we can have excellent grain control of our outgoing and incoming network requests angular cli service worker well as our browser cache. We can think of our Service Worker as a middleman between our app and the network. With this control, we can programmatically control how our app should respond to specific network situations. What should we do if the app is offline. If we do have a connection, we can tell the app always to use cache on certain static assets. We can even create scenarios such as using the network first and if that fails to fall back angular cli service worker the cache. We get a lot of flexibility in controlling our apps behavior with the network. We will cover more of the ideas of the Service Worker as we go along. So with Single Page Apps, specifically Angular apps, we can change the way we think about how our app is structured. Most of this part of our app is unchanging. So ideally we would like to tell the browser to hold onto that unchanging content of our app to prevent additional requests and to speed up rendering. This is where Service Workers come in. This allows the browser to use our application shell by default. Instead of requesting the resources from the network, we use the cache every time even when there is no network connection. This, in turn, speeds up our app startup and allows our app to work better offline. To install run the following npm install -g angular-cli latest. Once installed you can run ng new my-app. This will create a new Angular project and install all the related tooling needed to get up and running. This will spin up a local development server and watch our source code angular cli service worker for changes to compile. Once running, browse to localhost:4200 and you should see something like this in your browser: So now we have a working Angular app. Next, we are going to add a simple Service Worker to our app. First in your app directory we are going to add the following code to our index. Service Workers and offline capabilities are a progressive enhancement to our app. We need to check if the browser supports Service Workers and if so we will install the service-worker. If we look at the application tab in the Chrome dev tools, we can see our Service Worker was successfully installed. Once installed the browser will always use this copy of the Service Worker. The browser will check on the server for any updates to the Service Worker. If there is even one byte difference to the one on the server, the browser will reinstall the latest version for us. So now that we have successfully created a Service Worker, what does it do for us. Well, right now not too much. In our Service Worker, we could write out all the logic for caching our static assets but that complex and has a lot of edge cases to handle. Engineers at Google have created a couple of small libraries on top of Service Workers to develop some useful offline patterns. This tool, in particular, helps us precache static assets for our app. This generated Service Worker contains a hash specifically for each file in that build for the browser to cache and use even when offline. In subsequent builds the hash changes which causes the browser to request the updated files. After it runs we should see something similar to this: This dist folder contains all the generated compiled code we need to deploy and serve our Angular app. Once installed we are going to create a couple of npm scripts in our project. Next stripPrefix: 'dist' tells sw-precache that the dist folder is the root of our web app and should not add dist to file paths. The last part staticFileGlobs tells sw-precache which static files we would like the browser to cache and use. Now lets run our npm command npm run sw. We should get the following output: If we look at our generated Service Worker in our dist directory, we should see some generated code. If we look through the directory, we can get an idea of how the code is handling all the cache logic for our application. The next step is the tricky part. To do this, run npm install -g live-server. We will use a small lightweight server called live-server to host our static generated code. Now run npm run static-serve. If we go back to the application tab, we can see our Service Worker is now installed and running. We can see our app still works. Congrats you have created your first offline capable Angular application. We can see in the network response times they are very fast since we immediately serve the content from memory instead of trying to go to the network. The Service worker makes our Angular app more resilient to adverse network connections. For this post, I created. This is a small app that lists Pokémon and details about each kind. This app has basic routing, components and works entirely offline using the same techniques we learned above. This app has a couple of unique features turned on to make this app fast. This enables our bundle to be smaller. Because the templates are pre-compiled to JavaScript at build time, the startup time of our app is very, very fast. This gives us some great performance improvements. angular cli service worker Since we are using Observables to determine data changes we can tell Angular that there is no need to run the expensive change detection in our application. We do this by adding changeDetection: ChangeDetectionStrategy. OnPush to our top-level component. You can read more about OnPush in the Angular documentation. Check out the to read more about how it works. A small side note, we also get some first-time load benefits from our app being hosted on. Results So with these performance features built into Angular and Service Workers, what does this mean for our Pokedéx application. With the first test, we can see after the Service Worker is installed subsequent reloads are very fast to render. As we can see here in an offline situation on an emulated low-end device, we can get a rendered page in less than 3 seconds. We get time to interactive in just over 3 seconds. This is quite impressive for an app built on a framework. To test this even further we are going to use to check on real devices. On a Nexus 5 with 3G we can get first time render to interactive in about 5. Using Angular Server Side rendering we could get this even faster on first time renders. Subsequent views render in just a second or two thanks to our Service Worker. We can see with Service Workers and Angular we can create fast offline progressive web app experiences. What is excellent about these results is that the Angular Framework is still evolving and improving its performance. We can likely see these performance metrics improving even more. Please feel free to check out the demo app on. The live demo is located here.
