Angular: Progressive Web Apps

Learn how to develop a progressive web app (PWA) using Angular. This course covers preparation steps, creating UI, connecting to web services, making PWAs installable, and more.

Developers are realizing that making responsive sites solves part of a user's interaction needs, but more and more users are seeking app-like experiences regardless of what browser or device they use. Progressive web apps (PWAs) fit any form factor, are connectivity independent, and feel like an app because of how the app shell separates its treatment of functions and content. This course covers how to create PWAs using Angular.

Instructor Maximiliano Firtman takes you through the steps of upgrading an enterprise-style application to a PWA. First, he discusses the preparation steps involved. Then, he explains how to lay out and create the user interface. Next, he demonstrates how to get your application to connect to web services. Maximiliano also show how to make sure your PWA is installable, followed by how to leverage service workers for going offline.

Introduction

• Welcome
• What you should know
• Using the exercise files

1. Progressive Web Apps

• What is a Progressive Web App?
• Progressive architecture
• PWAs today
• Android and iOS demo

2. Preparing the Angular App

• Technology review
• Setting up the basic project
• Running the app
• Creating the business logic classes
• Creating services: Geolocation and maps
• Creating services: Data

3. Creating the User Interface

• Using Angular Material
• Creating the page components
• Adding routes to the project
• Creating components: List
• Creating components: Coffee
• Adding place location
• Adding coffee ratings
• Styling coffee component

4. Connecting to Web Services

• Creating a RESTful API
• Connecting Angular with HPPT module
• Connecting the form with the service
• Editing a coffee entry
• Connecting mobile actions

5. Creating an Installable PWA

• The web app manifest
• Defining icons and theme colors
• Making an iOS home screen web app
• Testing installation capabilities
• Inviting the user to install the app

6. Going Offline with Service Workers

• What is a service worker?
• Pre-caching app's shell with ngsw
• Serving the app while offline
• Update UI on network status change
• Dynamic ngsw-manifest cache
• Supporting app updates
• Adding web push notifications
• Validating with Lighthouse and DevTools

Conclusion

• Next steps