Create a PWA
from scratch
with Ionic

Agenda

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

Who dis

  • Simon (@zwacky)
  • Working with Ionic since over 2.5 years
  • Co-Organizer of IonicBerlin
  • Working at JustWatch
    • Team of 40 in Berlin & LA
    • Mobile: 3M+ downloads
    • Web: 12M+ monthly active users
JW mock

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

Demo on/offline

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

6) Populate news

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

7) Use ionic's router

  • setRoot vs push & pop (below)
  • news.ts
    • @IonicPage(name, segment)
    • use navParams.data.newsName
  • app.component.ts
    • pick random news source

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. 💅✨