Angular Progressive Web Apps PWA MasterClass FREE EBook
What you’ll 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
Requirements
Just some previous knowledge of Angular and Typescript
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!
Overview
Section 1: Angular Service Worker
Lecture 1 Angular Progressive Web Apps Course Helicopter View
Lecture 2 Recommended Software Versions
Lecture 3 The Typescript Jumpstart Ebook
Lecture 4 Course Kick-Off – Install Node, NPM, IDE And Service Workers Section Code
Lecture 5 How To Convert an Angular Application Into a PWA
Lecture 6 How To Run The Angular Service Worker In Production Mode
Lecture 7 Angular Service Worker – How Does it Work?
Lecture 8 Service Worker Version Management – How Does it Work?
Lecture 9 The Angular Service Worker Kill Switch
Lecture 10 Performance Caching Policy – Cache First, Network Last
Lecture 11 Freshness Caching Policy – Network First, Cache Last
Section 2: App Manifest – Add Application To Home Screen
Lecture 12 App Manifest – Making a PWA One-Click Installable
Section 3: The Angular Application Shell
Lecture 13 What is an Application Shell, What Problem Does it Solve?
Lecture 14 Learn the Relation Between the App Shell and Angular Universal
Lecture 15 Learn How the App Shell is Rendered Using the Angular Router
Lecture 16 The App Shell In Action – View Performance Benefits
Section 4: Push Notifications
Lecture 17 New Section Kickoff – Push Notifications
Lecture 18 Server Identification – Generating a VAPID key with the web-push library
Lecture 19 VAPID Public Key and Private Key – Learn the Differences
Lecture 20 How do Push Notifications Work? Browser-specific Push Service Providers
Lecture 21 Push Notifications Request – Implementation Completed
Lecture 22 How To Display The Allow or Deny Notifications Popup Again
Lecture 23 Push Notification in Node – Server Implementation With web-push
Lecture 24 View Web Push Notifications In Action
Section 5: Service Worker Fundamentals
Lecture 25 Service Workers In a Nutshell – Service Worker Registration
Lecture 26 Service Workers Hello World – Lifecycle Part 1 and PWA Chrome Dev Tools
Lecture 27 Service Workers and Application Versioning – Install & Activate Lifecycle Phases
Lecture 28 Downloading The Offline Page – The Service Worker Installation Phase
Lecture 29 Introduction to the Cache Storage PWA API
Lecture 30 View Service Workers HTTP Interception Features In Action
Lecture 31 Service Workers Error Handling – Serving The Offline Page
Section 6: Service Workers In Practice
Lecture 32 Section Introduction – Service Workers and Application Download and Installation
Lecture 33 Downloading an Application In The Background Using Service Workers
Lecture 34 Using Service Workers To Implement a Cache Then Network Fetch Strategy
Lecture 35 Service Worker Version Management in Action
Lecture 36 Service Worker Version Management – Deleting Previous Application Versions
Lecture 37 Performance Benefits of a Service Worker over a Slow Connection
Lecture 38 Service Worker Lifecycle – Understanding The Default Behavior
Lecture 39 Service Worker Lifecycle Customization -Early Activation with clients.claim()
Lecture 40 Service Worker Lifecycle Customization with skipWaiting()
Lecture 41 Service Worker Lifecycle Customization – Manually Check For New Versions
Section 7: Conclusion
Lecture 42 Bonus Lecture
Lecture 43 Course Conclusion and Key Takeaways
Developers looking to get in-depth knowledge on the Angular Service Worker,Developers looking to learn Service Worker Fundamentals (part 2 of the course)
Course Information:
Udemy | English | 3h 44m | 1.70 GB
Created by: Angular University
You Can See More Courses in the Developer >> Greetings from CourseDown.com