Converting an ordinary application into a basic Progressive Web Application is not that complex as it might seem at first glance.

1. Putting the "Progressive" in
Progressive Web App
Lukáš Kopenec, Senior Full-stack Developer
1

2. Demo application…
2
https://salsita-meetup-app.herokuapp.com/normal/

3. PWA Checklist
● Full list at https://developers.google.com/web/progressive-web-apps/checklist
● Basic points
○ Site is served over HTTPS
○ Site is responsive
○ Site has a manifest with metadata
○ Each page has a URL and each URL loads offline (service worker)
3

4. Lighthouse
● Part of Chrome developer tools
● Runs a number of audits for different aspects of a web application
● PWA audit
4

5. Manifest
● Simple JSON file
● Indicates how the app should look like and behave when installed
● Required for Chrome to show „Add to Home Screen“ prompt
● Basic data include
○ Name
○ Icons
○ Colors
○ Constraints (scope of the app, required orientation, …)
● https://realfavicongenerator.net/
5

6. Service Worker
● JavaScript Web Worker
● Programmable Network Proxy
● Terminated when not in use and restarted when next needed
6

7. Service Worker Lifecycle
7
The intent of the lifecycle is to:
● Make offline-first possible
● Allow a new service worker to get itself
ready without disrupting the current one.
● Ensure an in-scope page is controlled by
the same service worker (or no service
worker) throughout.
● Ensure there's only one version of your
site running at once.

8. Updating Service Worker
8
● 1 byte difference -> update
● New SW installed alongside the existing
● Installation error -> do not update
● Installed SW waits until the existing
controls 0 clients
○ self.skipWaiting
○ clients.claim

9. Service Worker – Practical coding
9
● Service workers are heavily promise-based

10. Service Worker – Practical coding
10
Luckily you can use async / await

11. Useful Resources
● https://developers.google.com/web/progressive-web-apps/
● https://developers.google.com/web/tools/workbox/
● https://developers.google.com/web/fundamentals/codelabs/push-notifications/
● https://web-push-codelab.glitch.me/
● https://realfavicongenerator.net/
● https://meetup-19-05.salsitasoft.com/
● https://github.com/salsita/salsita-meetup-app
1111

12. Thank you
1112
Questions? Comments?