What you'll learn

Learn How to turn your Angular Application into a PWA
Learn in detail multiple features made available by the Angular Service Worker

Requirements

Just some previous knowledge of Angular and Typescript

Description

we are going to take PWA features one at a time.These features where designed to be used together, so using them to implement a concrete use case is the best way to learn them. The main component of a PWA is a Service Worker, so that is our starting point.

We are going to learn all about the Service Worker lifecycle, how multiple versions of the service worker are handled by the browser, and we will learn multiple Service worker installation and activation GOTCHAs. We are then going to build a service worker that gives to an application the ability of showing an offline page when the network is down, using the Cache API.

Most of the PWA APIs are Promise-based, so to make the code more readable we are going to be using Async / Await in our examples. We are then going to implement Application Download and Installation: we are going to see how we can use a Service Worker to completely download a version of the website into a user's mobile or desktop, and how to handle the installation of multiple versions of the application.

We are going to demo the performance benefits of caching the complete application locally by simulating a slow network, and learn how to clean previous versions of an application. We will also learn how to cache UI-specific data and derived View Model data on the client side using Indexed DB and a Service Worker, and we will also earn how to implement Background Sync.

The next section of the course will cover all about the App Manifest and how to configure that one-click installation experience that we are looking for. After that, we will inspect our application with the Lighthouse tool and analyze the generated report.

The last part of this PWA fundamentals section will cover Web Push and Notifications. In this section, we are going to setup a node server with Web Push capabilities, and then we are going to link it to our service worker in order to implement mobile-like Notifications.

Who this course is for:

Developers looking to get in-depth knowledge on the Angular Service Worker