Angular: Progressive Web Apps (2017)
4h 40mIntermediate2017-09-05
Authors
Maximiliano Firtman
Mobile and Web Developer, Trainer, Speaker, Writer
Course details
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.
Learning objectives
Progressive web app architecture
Creating business logic classes
Geolocation and data services
Adding routes to a project
Creating a RESTful API
Connecting Angular with HTTP module
Connecting the form with the service
The web app manifest
Using service workers
Pre-caching an app's shell with ngsw
Serving an app while offline
Updating an interface on network status change
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.
Learning objectives
Progressive web app architecture
Creating business logic classes
Geolocation and data services
Adding routes to a project
Creating a RESTful API
Connecting Angular with HTTP module
Connecting the form with the service
The web app manifest
Using service workers
Pre-caching an app's shell with ngsw
Serving an app while offline
Updating an interface on network status change
Skills covered
AngularFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Welcome
- 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 and iOS demo
2. Preparing the Angular App
- 08 - Technology review
- 09 - Setting up the basic project
- 10 - Running the app
- 11 - Creating the business logic classes
- 12 - Creating services - Geolocation and maps
- 13 - Creating services - Data
3. Creating the User Interface
- 14 - Using Angular Material
- 15 - Creating the page components
- 16 - Adding routes to the project
- 17 - Creating components - List
- 18 - Creating components - Coffee
- 19 - Adding place location
- 20 - Adding coffee ratings
- 21 - Styling coffee component
4. Connecting to Web Services
- 22 - Creating a RESTful API
- 23 - Connecting Angular with HPPT module
- 24 - Connecting the form with the service
- 25 - Editing a coffee entry
- 26 - Connecting mobile actions
5. Creating an Installable PWA
- 27 - The web app manifest
- 28 - Defining icons and theme colors
- 29 - Making an iOS home screen web app
- 30 - Testing installation capabilities
- 31 - Inviting the user to install the app
6. Going Offline with Service Workers
- 32 - What is a service worker
- 33 - Pre-caching app's shell with ngsw
- 34 - Serving the app while offline
- 35 - Update UI on network status change
- 36 - Dynamic ngsw-manifest cache
- 37 - Supporting app updates
- 38 - Adding web push notifications
- 39 - Validating with Lighthouse and DevTools
Conclusion
- 40 - Next steps