Welcome to the workshop of building a production ready Progressive Web App based on Angular, Ionic and Firebase.
This workshop consists of 10 steps for producing a PWA by transforming a regular web app - Ionic Conference App into a PWA, finally deploying it to Firebase.
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 experince in multiple platforms.
We will not use Ionic for building a hybrid mobile app, but instead we will use it for building a PWA!
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.
- 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
- Add @angular/pwa schematic
- Change web app manifest
- Customize app icons and splash screens
- Display A2HS on iOS
- Add asset groups for app shell and icons
- Add data group for conference data
- Extend NGSW
- Update PWA
- Host on Firebase
- 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.