Build a production ready PWA with Angular and Firebase

Welcome to the workshop of building a production ready Progressive Web App based on Angular, Ionic and Firebase.

This workshop consists of multiple steps for producing a PWA by transforming a regular web app - Ionic Conference App into a PWA, optimizing it for various platforms and powering it up with Firebase services.

Ionic Conference App

The end application is purely a kitchen-sink demo of a PWA based on Ionic Framework and Angular. We will be using some of Ionic's UI components and services with Angular for creating a uniform and native-like user experiences in multiple platforms.

We will not use Ionic for building a hybrid mobile app, but instead we will use it for building a PWA!

How this workshop works?

Since we depend on Angular CLI and some other tools which are not available for online code editor environments, we're going to develop and build the app on our local computers.

Every next step/branch includes the solution of the previous step.

If you're stuck at any of the steps, you can switch to the next step/branch and continue from there. Note that you need to discard your local changes on git when you checkout a solution.

Requirements for local development environment

• Google Chrome - Download
• node.js > 8.0.0 & npm > 5.2.0 - Download
• Open a Firebase Account (FREE) - Link
• GIT - Download
• Clone this repo - Run git clone https://github.com/onderceylan/pwa-workshop-angular-firebase
• Run npm i

Table of Contents

1. Add @angular/pwa schematic
2. Change web app manifest
3. Customize app icons and splash screens
4. Display A2HS on iOS
5. Add asset groups for app shell and icons
6. Add data group for conference data
7. Extend NGSW
8. Update PWA
9. Host on Firebase
10. Use an Android Emulator
11. Serve a secure local server
12. Test the A2HS functionality on Android
13. Add maskable icons
14. Subscribe to push notifications and manage permission
15. Send and receive push notifications
16. Save push subscriptions in a DB
17. Use an API from project Fugu
18. What's next?

Once you're ready with your local environment, you can start the workshop by navigation to the first step -> Add @angular/pwa schematic.

For questions, remarks and feedback; please contact me on Twitter -> @onderceylan.