Progressive Web Apps (PWAs) use modern web capabilities and a service worker to deliver an app-like user experience. Service workers allow offline use and background syncing. The document discusses key PWA technologies like service workers, caching with Cache Storage and IndexedDB, the Web App Manifest for a native-like experience, and push notifications. It provides a checklist for making an app a fully-featured PWA, including caching the app shell and dynamic data, adding a manifest, and using background syncing.

1. Everything you should know about
PWA to start (as a developer)

2. Filip Rakowski
Co-creator @ Vue Storefront
Frontend Developer @ Divante
Author @ PWA.buzz
filrakowski
frakowski

3. Subscribe!
PWA.buzz

4. What you’ll learn
01
02
03
What Progressive Web Apps are?
Short introduction to key features and ideas behind Progressive
Web Apps
Key technologies
We will take a look at technologies used in Progressive Web Apps
to achieve native-like and offline user experience.
PWA checklist
Hot to make your app a Progressive Web App.
4

5. What are PWAs?
5
Progressive web apps use modern web APIs along with traditional progressive
enhancement strategy to create cross-platform web applications. These apps work
everywhere and provide several features that give them the same user experience
advantages as native apps.
Mozilla MDN
More information: https://developers.google.com/web/progressive-web-apps/

6. What is Progressive Enhancement?
6
Progressive enhancement is a development approach, not a technology choice. You
as the developer, decide on a base level of user experience for your site or application, and
more advanced functionality is added if a browser supports it.
Shopify blog
More information: https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/

7. Progressive Web apps are...
7
Reliable - Load instantly and never show the downasaur, even in uncertain network
conditions.

8. Progressive Web apps are...
8
Fast - Respond quickly to user interactions with silky smooth animations and no janky
scrolling.

9. Progressive Web apps are...
9
Engaging - Feel like a natural app on the device, with an immersive user experience.

10. Key technologies

11. Service Worker

12. Service Worker
12
Asynchronous JavaScript that runs in a browser (on a different thread in opposite to your
web apps single-threaded JavaScript) that can react to some events (like fetch, push) and
works even when website (or browser) are closed.
More information: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
app.js

13. Service Worker - request proxy
13
Service Worker is a kind of proxy for you requests. You can modify them in your SW (e.g.
change the requested file name or serve it from cache instead of a server) before they are
proceeded to the server.
More information: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
service-worker.js

14. Why using a Service Worker requires https?
Browser is not aware of modified requests!
Website
Please give me
index.html file
Please give me
notindex.html file
Service Worker Server
notindex.htmlnotindex.html but
the website is not
aware of it

15. Cache

16. 16
In-browser database for storing JSON-like data. Best for caching dynamic data (JSON)
More information: https://developers.google.com/web/ilt/pwa/working-with-indexeddb
IndexedDB

17. IndexedDB
17
IndexedDB API is hard to work with but there are solutions that abstracts it to easier format:
Local Forage
iDB
...many others

18. Cache Storage
18
Object-request / Object-response browser database for caching network requests.
Best for caching static assets (HTML, CSS, JS)
More information: https://developer.mozilla.org/en-US/docs/Web/API/Cache

19. Caching resources
19
Static files:
- HTML
- CSS
- JS
- Fonts/Icons (bad idea)
Dynamic data
- JSONs from server
- Pending CUD operations
Cache Storage IndexedDB

20. Typical use case - serving app from cache when user is offline
20

21. Typical use case - serving app from cache when user is offline
21

22. Other use cases
22
- Serve static assets from cache for faster page
loads
- Use cache as a fallback for failed network
requests (or some of them)

23. Web App Manifest

24. What is Web App Manifest?
24
The web app manifest provides information about an application (such as name, author,
icon, and description) in a JSON text file. The purpose of the manifest is to install web
applications to the homescreen of a device, providing users with quicker access and a richer
experience.
Mozilla MDN
More information: https://developer.mozilla.org/en-US/docs/Web/Manifest

25. What is Web App Manifest?
25

26. What is Web App Manifest?
26

27. Native-like experience for Web Apps
27

28. Push API and notifications

29. Push notifications
29
Works exactly like native OS push notifications and uses Push API.
You can use them to engage your users (e.g. discounts) or send them important informations (like delayed flights).
Push notifications can be sent from Service Worker so they don’t need opened website to deliver messages
instantly.
More information: https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications

30. How Push API works?
30

31. Background Sync

32. What is Background Sync
32
Background sync is a new web API that lets you defer actions until the user has stable
connectivity. This is useful for ensuring that whatever the user wants to send, is actually sent.
Google Developers
More information: https://developers.google.com/web/updates/2015/12/background-sync

33. What is Background Sync
33
Background sync allows you to provide real offline experience with all CRUD operations
available offline (Read with cache / Create, Update, Delete with Background sync).
You can also prefetch data periodically in the background so user don’t need to download it
when entering the website (see periodic sync)
For example: Like facebook/twitter post or place order on eCommerce shop while offline

34. Background Sync example
34
app.js
service-worker.js

35. PWA checklist

36. 1. Cache your App Shell
36
Cache your App Shell (static assets) for instant loads and offline purposes. Use Cache Storage for this. Don’t forget to
make use of cached files in your Service Worker.
More information: https://developers.google.com/web/fundamentals/architecture/app-shell

37. 2. Cache dynamic data from database
37
Cache dynamic data from server (mostly JSONs) and serve it from Cache Storage when
user is offline (or choose different caching strategy).
Use IndexedDB for this but keep in mind that it’s size is limited.
At this point your App should work offline, congrats!

38. 3. Add Web App Manifest
38
Create Web App Manifest file (manifest.json) and allow users to pin your app to their
homescreens and use like a real Native App.

39. 4. Use background sync for pending requests
39
Allow your users to perform Create, Update and Delete operations while offline with
Background Sync.

40. Congrats!
40
Your app is a fully-featured PWA now!
- Works like a native app (Web App Manifest)
- Is accessible from users homescreen (Web App Manifest)
- Loads insanely fast even on slow internet connection (Cache Storage, IndexedDB, Service Worker)
- Shows cached content while user is offline (Service Worker)
- Allows user to perform some actions without internet access) (Background Sync)

41. Possible additional enhancements
41
- Push Notifications
- Payment Request API
- Credentials API

42. Tools that can help you
42
Workbox
Workbox is a set of libraries and Node
modules that make it easy to cache
assets and take full advantage of
features used to build progressive web
app's.
See details
Google Lighthouse
Lighthouse is an open-source,
automated tool for improving the quality
of web pages. You can run it against
any web page, public or requiring
authentication. It has audits for
performance, accessibility, progressive
web apps, and more.
See details

43. More resources about PWA
43
- Google Developers
- Mozilla MDN
- ServiceWorker.rs (great cookbook!)
- PWA.buzz newsletter