cityAQ

an Angular PWA
Jack Koppa
Front-End Developer
@ SafeNet Consulting

Interests:
◎ modern web apps
◎ clean technology
◎ China

2
summary

1. cityAQ 2. OpenAQ
the app the data

3. Angular
the framework

4. PWA
the buzzword(1)

5. Service Workers
the buzzword(2)

3
1.
cityaq.com
the app
● weather app, for air quality
● quick reference
● use easily, save info, work offline

4
 https://openaq.org/

2.
OpenAQ
the data
● open-source
● research-grade
● worldwide air quality records

5
 https://angular.io/

3.
Angular
the framework
● mobile-first, Material UI components
● ServiceWorkerModule
● easy cli handle Ng-specific needs

6
 https://developers.google.com/web/progressive-web-apps/

4.
Progressive Web App
the buzzword(1)
● native-like functionality, “progressively add”
● convenient, immersive
● gaining browser support (e.g. Safari)

7
https://developers.google.com/web/fundamentals/primers/service-workers/

5.
Service Workers
the buzzword(2)
● intercept network requests
● optionally handle with cache
● for offline use, bad connections, preloading

8
 https://developers.google.com/web/tools/workbox/

Tools
Workbox
Lighthouse
“Is Service Worker Ready?”
Zombie Service Worker

9
 https://github.com/jackkoppa/cityaq

Thanks!
Jack Koppa
GitHub: jackkoppa
Twitter: @jackpkoppa

10