elegantapp / pwa-workshop-angular-firebase

Build a production ready PWA with Angular and Firebase! This workshop consists of multiple steps for producing a PWA by transforming a regular web app - Ionic Conference App into a PWA, finally deploying it to Firebase.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Build a production ready PWA with Angular and Firebase

PWA LOGO

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!

Material Design iOS
Android Schedule iOS Schedule

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.

About

Build a production ready PWA with Angular and Firebase! This workshop consists of multiple steps for producing a PWA by transforming a regular web app - Ionic Conference App into a PWA, finally deploying it to Firebase.

License:Apache License 2.0


Languages

Language:TypeScript 51.5%Language:HTML 24.7%Language:SCSS 20.2%Language:JavaScript 3.7%