Angular: Progressive Web Apps

Learn how to create progressive web apps using Angular tools.

Introduction

• Build a progressive web app with Angular
• What you should know
• Using the exercise files

1. Progressive Web Apps

• What is a progressive web app?
• Progressive architecture
• PWAs today
• Android, iOS, and iPadOS demo
• Windows and macOS 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 http 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 maskable icons
• Inviting the user to install the app
• Enhancing the app experience
• Creating app shorcuts
• Using minimal-UI display mode
• Making a dynamic title and status bar

6. Going offline with service workers

• What is a service worker?
• Serving the app while offline
• Update UI on network status change
• Customizing ngsw-manifest
• Supporting app updates
• Adding web push notifications
• Validating with DevTools

Conclusion

• Continue learning progressive web apps