Udemy

Platform

English

Language

Web Development

Category

Angular Progressive Web Apps (PWA) MasterClass & FREE E-Book

Practical Guide to Angular Progressive Web Applications (PWA)

4.65 (372 reviews)

Students

4 hours

Content

Jun 2021

Last Update
Regular Price

EXCLUSIVE OFFER
Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

Code in Github repository with downloadable ZIP files per section

Learn in detail multiple features made available by the Angular Service Worker

Learn How to turn your Angular Application into a PWA

Make your Angular Application Downloadable and Installable

Make you Angular Application One-Click Installable with an App Manifest

Add an Application Shell for boosting Initial Startup Performance

Add Push Notifications using the Angular Service Worker

Improve Application Performance with Application Data Caching

Learn Service Worker Fundamentals

Learn the Service Worker Lifecycle in Detail

Debug Service Workers using the Chrome Dev Tools


Description

This Course In a Nutshell - Part 1 Angular Service Worker (includes the Typescript Jumpstart Ebook)

In the first part of the course we are going to dive straight into the Angular Service Worker and the built-in Angular CLI PWA support. We are going to take as the starting point a plain Angular Application, and we are going to start adding PWA features on top of it in order to turn it into a Progressive Web Application.

We will start by adding the Angular Service Worker and have the Application Download & Installation feature up and running. We will learn all about Application Version Management and we will learn about the multiple caching strategies available for caching not only the application bundles, but also the application data.

We will then add an Application Shell using the Angular CLI and Angular Universal, and make the application One-Click Installable using an App Manifest. Finally we will add Push Notifications to the application using the Angular Service Worker, for a complete mobile-like PWA experience.

This Course In a Nutshell - Part 2 - Service Workers Fundamentals

In this second part, you will learn about Progressive Web Applications in general (including Service Workers, App Manifest, and the Cache Storage API.), and you will use these APIs to implement several native-like features: One-Click Install, Offline support, application download and installation, application data caching and more.

We will also learn Service Worker Web Fundamentals from first principles using built-in browser APIs directly and we will confirm our understanding of what is going on in every step of the way using the PWA built-in Chrome Dev Tools.

The knowledge learned on this section has a long shelf live, as its about browser fundamentals and how the new PWA Web works in general, so everything learned here is still applicable to any other development platform other than Angular.

Why PWAs? Build the Future Of the Web Today

The future of the Web is clearly going in one direction: Progressive Web Applications! With the upcoming Safari support and the ability to install a PWA directly to a Windows desktop, PWAs are the new generation of web applications that will bridge the gap towards Native Apps: this will even include in the near future things like Bluetooth and Payments.

PWAs look and feel like native apps, but there is no App Store and all its issues involved: instead a web application can now be installed directly to the user desktop or home screen with one single click!

The application will then install itself immediately on the background, so that it does not have to be downloaded again unless a new version is available.

The application will feel blazing fast in a way that until now only native apps could: A PWA is offline, background sync and notification capable.

PWAs are not mobile-specific: any application can benefit from starting up an order of magnitude faster! The Angular CLI PWA support and the Angular Service Worker take PWA features to another level: we will be able to add PWA features reliably to our application in a transparent way via the Angular CLI, as part of the production build process.

But we will still need to understand how PWA features work under the hood, in order to troubleshoot any issues, interact with the Angular Service Worker or configure the Angular CLI.

Course Overview

In part 1, 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.

What Will you Learn In this Course?

You will learn how the PWA Browser features work in general, not only in the context of an Angular application. You will know how to analyze and troubleshoot PWAs using the Chrome PWA Dev Tools. You will also learn how to leverage the Angular Service Worker, and all the Angular CLI PWA features to build PWA-enabled web applications.

What Will You be able to do at the End Of This Course?

You will be able to design, develop and troubleshoot PWAs, plus you will know how to quickly add PWA features to an Angular Application leveraging the Angular CLI and the Angular Service Worker.

Have a look at the course free lessons below, and please enjoy the course!


Screenshots

Angular Progressive Web Apps (PWA) MasterClass & FREE E-Book
Angular Progressive Web Apps (PWA) MasterClass & FREE E-Book
Angular Progressive Web Apps (PWA) MasterClass & FREE E-Book
Angular Progressive Web Apps (PWA) MasterClass & FREE E-Book

Content

Angular Service Worker

Angular Progressive Web Apps Course Helicopter View

Recommended Software Versions

The Typescript Jumpstart Ebook

Course Kick-Off - Install Node, NPM, IDE And Service Workers Section Code

How To Convert an Angular Application Into a PWA

How To Run The Angular Service Worker In Production Mode

Angular Service Worker - How Does it Work?

Service Worker Version Management - How Does it Work?

The Angular Service Worker Kill Switch

Performance Caching Policy - Cache First, Network Last

Freshness Caching Policy - Network First, Cache Last

App Manifest - Add Application To Home Screen

App Manifest - Making a PWA One-Click Installable

The Angular Application Shell

What is an Application Shell, What Problem Does it Solve?

Learn the Relation Between the App Shell and Angular Universal

Learn How the App Shell is Rendered Using the Angular Router

The App Shell In Action - View Performance Benefits

Push Notifications

New Section Kickoff - Push Notifications

Server Identification - Generating a VAPID key with the web-push library

VAPID Public Key and Private Key - Learn the Differences

How do Push Notifications Work? Browser-specific Push Service Providers

Push Notifications Request - Implementation Completed

How To Display The Allow or Deny Notifications Popup Again

Push Notification in Node - Server Implementation With web-push

View Web Push Notifications In Action

Service Worker Fundamentals

Service Workers In a Nutshell - Service Worker Registration

Service Workers Hello World - Lifecycle Part 1 and PWA Chrome Dev Tools

Service Workers and Application Versioning - Install & Activate Lifecycle Phases

Downloading The Offline Page - The Service Worker Installation Phase

Introduction to the Cache Storage PWA API

View Service Workers HTTP Interception Features In Action

Service Workers Error Handling - Serving The Offline Page

Service Workers In Practice

Section Introduction - Service Workers and Application Download and Installation

Downloading an Application In The Background Using Service Workers

Using Service Workers To Implement a Cache Then Network Fetch Strategy

Service Worker Version Management in Action

Service Worker Version Management - Deleting Previous Application Versions

Performance Benefits of a Service Worker over a Slow Connection

Service Worker Lifecycle - Understanding The Default Behavior

Service Worker Lifecycle Customization -Early Activation with clients.claim()

Service Worker Lifecycle Customization with skipWaiting()

Service Worker Lifecycle Customization - Manually Check For New Versions

Conclusion

Other Courses

Bonus Lecture

Course Conclusion and Key Takeaways


Reviews

A
Alessandro14 March 2020

Many thanks for this course! I've successfully trasformed my angular7 application into a pwa in a very short time. However there are a couple of things that made me a bit confused and I think they can be improved. The first one is related to angular cli, having use the command "ng add @angular/pwa". The result is a bit different respect what is explained in the course (for instance the sw registration is done in app.module.ts and not in main.ts). So, following the course, it is a bit difficult to understand what has been already done by the cli command and what should be added manually. The second point is related to the version of angular. What is valid only for the latest version and what is correct for previous versions as well is not so clear... However, my congratulations, great course and I've reached my goal, so... thank you again! Cheers Alessandro

P
Pragati4 February 2020

Guves a giid understanding of topic, it would be great if you you include some scenerios and discuss some more case studies for this can be used where?

S
Slawek31 January 2020

Too little examples with Angular's implementation of Service Worker. You should more deeply explain how to configure and use Service Worker from Angular framework.

R
Rodolfo14 January 2020

Class is great but some parts seem out of date. Section 3 commands don't work with Angular 8. Q&A already has questions about it but no proper answers. Code samples use .angular-cli.json but assets specified in this file are ignored, so Angular 8 probably doesn't use this file. I overcame this issue by declaring assets in angular.json. The bundle files in branch 2-download-and-install did not work. Using original filenames worked.

S
Samuel6 January 2020

I love that man ! He is relaxing, his accent is easy to understand for a non native english speaker like me (french). Sometimes it could go faster but it is ok.

H
Hector24 December 2019

Outdated. The course is built on top of an old repo in github, basically you download the code and attempt to follow, if something breaks good luck because you just don't know what was set up previously, the instructor don't answer questions and half of the course is about how PWA's work in plain javascript not in Angular. I already know how to do PWA's in vanilla javascript, this course was supposed to be how to do it in angular. The instructor never mentions how to access native calls for IOS or Android, which is part and a big reason to implement PWA's in angular. I trully wasted my time

D
Dana21 December 2019

Very informative class. I learned a lot about service workers using native javascript. This will help with understanding Angulars PWA and how to customize it.

D
Dinabite25 November 2019

A good course with high-quality materials available. I highly recommend this to anyone who wants to get an in-depth or high-level view of Angular and its features.

J
Jim1 October 2019

the github source code does not match what is shown in the video. Starting on lesson 1, video 4-5-6 the commands stopped working and what was being illustrated wasn't what was occurring in my browser. I *do think* when the course was made it was spot on but has not kept up w/ Angular's PWAs changes and thus it is outdated.

H
Heike25 August 2019

As all courses of Angular University this course explains the concepts at a level that makes t possible to really understand how they work and why they are implemented in this way. I now feel prepared to solve the issues I come across in my own web applications.

A
Alex26 June 2019

angular.json file is completely different than the one in the video. the angular-cli commands don't work. I spent hours trying to get the http-server to work correctly. This whole course should be updated to reflect the new code that is in your repo. It's a lot easier to follow along when the code matches up. The explanations always seem vague. I don't feel like I am explained how and why things work, just how to implement the app in the course. In building a new service worker, he should start from scratch, not with all the necessary (and unnecessary) dependencies already in the package.json.

C
Christopher15 June 2019

Steps are clear to follow along with and the explanation of what the code is doing (and why) is good.

S
Secorrenti30 March 2019

Very nice explanation, Very good teacher, now I really know how to build PWAs. Thank you very much Vasco. Your videos are very helpful.

O
Oskars13 February 2019

My overall satisfaction is good and I can recommend it! But I suggest to the team to review the order of the sections, better start with manual SW implementation and only then Angular SW

S
Seshagiri1 December 2018

Maybe it's me, but I found the flow very fast like reading straight from the book. Just before I process one point in my mind, there are 2-3 points already explained. This makes me stop video too frequently which is hindering to grasp the concepts.


1391332

Udemy ID

10/12/2017

Course created date

11/20/2019

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram