This document is a presentation on progressive web apps (PWAs) given by Filip Rakowski. It discusses key aspects of PWAs including service workers, caching strategies, payment APIs, push notifications, background synchronization, web workers, and web app manifests. The presentation emphasizes how these technologies allow PWAs to provide native app-like experiences through features like offline support, push notifications, and one-click installation.

1. #MM18PL#MM18PL
Introduction to
Progressive Web Apps
@filrakowski

2. #MM18PL#MM18PL
Filip Rakowski
Co-founder
Front-end Dev
@filrakowski
This is my face!

3. #MM18PL#MM18PL
Who knows
what Progressive Web Apps are?
@filrakowski

4. #MM18PL#MM18PL
How many of you
think PWA is a buzzword?
@filrakowski

5. #MM18PL#MM18PL
@filrakowski
Let me tell you
about PWA

6. #MM18PL#MM18PL
„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 Developer Network
@filrakowski

7. #MM18PL#MM18PL
Don’t rely on modern APIs.
Always have a fallback
@filrakowski

8. #MM18PL#MM18PL
@filrakowski
Fast

9. #MM18PL#MM18PL
@filrakowski
Fast
Reliable

10. #MM18PL#MM18PL
@filrakowski
Fast
Engaging
Reliable

11. #MM18PL#MM18PL
Key technology
Service Worker
@filrakowski

12. #MM18PL#MM18PL
Service Workers are Web Workers that can
intercept navigation and resource requests.
They also work on a separate thread so they
are not terminated with your Web App!
Service Worker
@filrakowski

13. #MM18PL#MM18PL
Service Worker
@filrakowski

14. #MM18PL#MM18PL
Service Worker
@filrakowski
Service Worker can work even
when Web App has been closed!

15. #MM18PL#MM18PL
Service Worker Registration
@filrakowski

16. #MM18PL#MM18PL
Service Worker Registration
@filrakowski
Just a JavaScript code

17. #MM18PL#MM18PL
Service Worker
Cache and Offline
@filrakowski

18. #MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET https://name.com/api/users

19. #MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET https://name.com/api/users
response with users data

20. #MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET https://name.com/api/users
error
server is down, lack of
internet connection etc

21. #MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET /users
error
server is down, lack of
internet connection etc
Service
Worker/users

22. #MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET /users
error
server is down, lack of
internet connection etc
Service
Worker/users
Oops! I can’t fetch /users.
Let’s serve it from cache!
Cache

23. #MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET /users
error
server is down, lack of
internet connection etc
Service
Worker/users
Do i have response
for /users cached?
Cache

24. #MM18PL#MM18PL
Service Worker
@filrakowski
Your Web App
https://name.com
Server with API
https://name.com/api
GET /users
error
server is down, lack of
internet connection etc
Service
Worker/users
Cache
/users
/users

25. #MM18PL#MM18PL
This was
Network-first caching strategy
@filrakowski

26. #MM18PL#MM18PL
@filrakowski

27. #MM18PL#MM18PL
You can do more!
Cache-first strategy
@filrakowski

28. #MM18PL#MM18PL
@filrakowski

29. #MM18PL#MM18PL
There is much more about handling Cache
Google.com: ‘Google Offline Cookbook’
@filrakowski
or type https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/

30. #MM18PL#MM18PL
Service Worker
@filrakowski
Depending on type of a request and handled
circumstances Service Worker decides where to look for a
particular resource:
- Images/fonts always from cache
- JSON data from network
and from cache while offline
- ...

31. #MM18PL#MM18PL
@filrakowski
Simplify PWA development
https://developers.google.com/web/tools/workbox

32. #MM18PL#MM18PL
@filrakowski
Runtime Caching
example with Workbox
sw.js

33. #MM18PL#MM18PL
@filrakowski

34. #MM18PL#MM18PL
What else you can do with PWA
to improve User Experience?
@filrakowski

35. #MM18PL#MM18PL
One-click checkout with
Payment Request API
@filrakowski

36. #MM18PL#MM18PL
@filrakowski
Payment Request API
- One-click checkout without
needing to register or
provide order details
- Credit cards and Shipping
details shared between all
websites making use of
Payment Request API

37. #MM18PL#MM18PL
@filrakowski
Use traditional checkout as a fallback

38. #MM18PL#MM18PL
Engage your users by sending
Push Notifications
@filrakowski

39. #MM18PL#MM18PL
@filrakowski
Web Push Notifications
- Send native Push Notifications on
mobile and desktop
- Deliver them in a real-time from the
background Service Worker even
when your website is closed

40. #MM18PL#MM18PL
@filrakowski
Notifications API – an interface used to configure and
display notifications to the user
Push API – an interface used to subscribe your app to a
push service and receive push messages in the service
worker

41. #MM18PL#MM18PL
@filrakowski
Notification & Web Push API
- Ask for subscription (if
user declines you can’t do it
again!!)
- Display notifications from
Service Worker working on
background
Inside Service Worker

42. #MM18PL#MM18PL
@filrakowski
Let’s learn more!

43. #MM18PL#MM18PL
Let network requests wait for
stable connectivity with
Background Synchronization
@filrakowski

44. #MM18PL#MM18PL
@filrakowski
Request Network
Offline network requests
1. Try to reach the network
2. Fail

45. #MM18PL#MM18PL
@filrakowski
Request
Network
Offline network requests
with background sync
1. Queue task in the
background (Service
Worker)
2. Wait until connectivity is
restored
3. Send it to the server even
when website is closed

46. #MM18PL#MM18PL
@filrakowski

47. #MM18PL#MM18PL
What else you can do with PWA
to improve performance?
@filrakowski

48. #MM18PL#MM18PL
Prefetch resources before they are needed
to stay reliable!
@filrakowski

49. #MM18PL#MM18PL
1. Workbox precache module
https://developers.google.com/web/tools/work
box/modules/workbox-precaching
2. link rel=”prefetch”
@filrakowski

50. #MM18PL#MM18PL
Perform computationally expensive tasks without
interrupting user interface (main thread)
in Web Workers!
@filrakowski

51. #MM18PL#MM18PL
Reminder: Web Worker is a JS code executing
on a different thread which means it’s not
blocking the UI.
@filrakowski

52. #MM18PL#MM18PL
@filrakowski
Fetch /users for me please!

53. #MM18PL#MM18PL
@filrakowski
Hey! Sure!
Fetching...

54. #MM18PL#MM18PL
@filrakowski
Here’s your response!

55. #MM18PL#MM18PL
@filrakowski

56. #MM18PL#MM18PL
Bonus! Add to homescreen with
Web App Manifest
@filrakowski

57. #MM18PL#MM18PL
@filrakowski

58. #MM18PL#MM18PL
@filrakowski
Web App Manifest
- Add to homescreen like a
native app*
- Display without
browser’s UI so user can’t
see the difference
*from latest chrome version Homescreen
installation banner is not displaying
automatically. You need to run `prompt()`
method on prompt object.

59. #MM18PL#MM18PL
Workerize - delegate js modules to Web Workers
https://github.com/developit/workerize
ServiceWorkerWare - Express-like request middleware in Service Worker
https://github.com/fxos-components/serviceworkerware
Other awesome PWA stuff https://github.com/hemanth/awesome-pwa
@filrakowski

60. #MM18PL#MM18PL
You can follow me on twitter where I addictively
tweet about PWA @filrakowski (slides will be
there too)
Thank you!