Angular Progressive Web App Tutorial

Requirements:

You should have the following environments/packages installed.

• Angular 7 with Angular CLI 7
• NodeJS,
• The firebase-tools npm package,
• The @angular/fire and firebase npm packages,
• The http-server npm package,
• The idb npm package,

Today you will learn how to create your first Progressive Web App based on Angular 7 and MDB Angular!

Progressive Web Apps combine the convenience and functionality of native mobile applications with the simplicity of creating and managing web applications. A Progressive Web App or PWA for short is simply a web app that behaves like a normal web app on a desktop and like a native app on mobile devices. So you can use it with Push Notifications, without an Internet connection, and much more!

If you notice an error, or something below is not clear to you - please visit our support forum.

What will I learn?

1. How to build a Progressive Web App
2. How to work with databases
3. How to synchronize data in offline & online modes
4. How to deploy your project on Firebase

After completing this guide you should have a basic knowledge of how PWA works, what Service Workers are, how to use IndexedDB and Firebase databases and how to deploy the project on Firebase.

You can see how the application we will build together looks like! Live Example

You can also download the complete app!

Note!

Within this tutorial we are using Material Design for Bootstrap, you can download it for free from here.

Also, please visit our official Quickstart Guide guide to go through the MDB Angular installation process.