Angular: Progressive Web Apps

Course details

Progressive web apps today are compatible not just with iOS and Android, but also with desktop operating systems, so you can leverage the strengths of both desktop and mobile operating systems. With the additional abilities a PWA can have today, you can enhance the project even more. Angular today has the same base as the original version, but there is a whole new process to create a PWA with the Angular tools. In this course, mobile and web developer, trainer, speaker, and writer Maximiliano Firtman guides you through the entire process. Find out what makes a web app a progressive web app. Create a basic Enterprise-style app in Angular 16 and upgrade it to a PWA. Explore technologies available to make the app available offline, like a native app. Learn how to support the specs needed, so the app can be installed in a device as a native app with an icon and out-of-the-browser behavior. Plus, go over how to work with web services in a PWA, in different network situations.

Concepts

0. Introduction

01 - Build a progressive web app with Angular
02 - What you should know
03 - Using the exercise files

1. Progressive Web Apps

04 - What is a progressive web app
05 - Progressive architecture
06 - PWAs today
07 - Android, iOS, and iPadOS demo
08 - Windows and macOS demo

2. Preparing the Angular App

09 - Technology review
10 - Setting up the basic project
11 - Running the app
12 - Creating the business logic classes
13 - Creating services - Geolocation and maps
14 - Creating services - Data

3. Creating the User Interface

15 - Using Angular material
16 - Creating the page components
17 - Adding routes to the project
18 - Creating components - List
19 - Creating components - Coffee
20 - Adding place location
21 - Adding coffee ratings
22 - Styling coffee component

4. Connecting to Web Services

23 - Creating a RESTful API
24 - Connecting Angular with http module
25 - Connecting the form with the service
26 - Editing a coffee entry
27 - Connecting mobile actions

5. Creating an Installable PWA

28 - The Web App Manifest
29 - Defining icons and maskable icons
30 - Inviting the user to install the app
31 - Enhancing the app experience
32 - Creating app shorcuts
33 - Using minimal-UI display mode
34 - Making a dynamic title and status bar

6. Going offline with service workers

35 - What is a service worker
36 - Serving the app while offline
37 - Update UI on network status change
38 - Customizing ngsw-manifest
39 - Supporting app updates
40 - Adding web push notifications
41 - Validating with DevTools

Conclusion

42 - Continue learning progressive web apps