Agenda

• Intro (15')
• Demo what we build (5')
• Build PWA in 9 steps (120')
• show, code, question
• Open Workshop (adding more features) (~)

Who dis

Short Intros

• Ionic
• Hybrid Framework: Code once & run everywhere
• based on AngularJS and Angular
• Great and big community
• PWA
• WebApps with native-like capabilities
• Offline
• Push notifications
• …

Topics

• Bootstrapping a PWA
• Ionic, Ionic CLI, Ionic Router
• Angular & Observables
• ServiceWorkers
• Deploy on Firebase

PWA: NewsFeed Reader

Let's do this!

1) Prerequisites

• npm install -g ionic
• ionic@3.4.0
• newsapi.org
• ionic start barcelona-newsreader ionic2-starter-sidemenu

2) Ionic Starters

• ionic2-starter-tabs
• ionic2-starter-tutorial
• ionic2-starter-aws
• ionic2-starter-sidemenu
• ionic2-starter-blank
• https://market.ionic.io/starters

3) Project structure

• /hooks
• /resources
• /src
• /www
• .editorconfig

4) Sources in side menu

• affected files:
• app.html
• app.component.ts
• ion-split-pane
• import angular's Http & HttpModule

5) Add new page

• ionic generate page news
• news.html
• ion-card (more 🔥: social cards)

6) Populate news

• news.ts
• Get news articles
• news.html
• *ngFor it

8) Enable Service Workers

  self.toolbox.router.get('/(.*)', self.toolbox.cacheFirst);
  self.toolbox.router.get('/(.*)', self.toolbox.cacheFirst, {
	  origin: /newsapi\.org$/
  });

9) Deploy 🚀

• ionic cordova run browser --prod
• npm install -g firebase-tools
• Cache busting problem
• firebase.com
• .firebaserc
• firebase init
• public: ./platforms/browser/www
• firebase deploy

More Resources

• https://github.com/shprink/ionic-twitter-pwa
• https://github.com/zwacky/game-music-player
• https://github.com/GoogleChrome/sw-precache
• https://workboxjs.org

Done. 💅✨