The document discusses progressive web apps (PWAs) and how to build them using WordPress. It defines PWAs as improving the user experience like a native app by following principles of being fast, reliable, and engaging. It recommends using the Lighthouse tool to audit PWAs and checklists from Google to build them. It then provides steps for configuring the manifest and service workers to make WordPress sites installable and work offline including caching, precaching files, and native features. The presentation encourages integrating other capabilities like share APIs and maps to provide a native-like user experience.

1. Progressive WordPress
Apps
Fellyph Cintra

2. Fellyph Cintra
Front-end Developer
At Deloitte
● Work with WordPress since 2008
● WordCamp Sao Paulo organizer
@fellyph

3. Agenda
● PWA
● Basic configuration
● Service Worker
● Native functionality

4. Progressive Web Apps ?

5. Progressive Web Apps means
improving the user experience as
a native app.

6. Principles of PWA
Fast Reliable Engaging

7. Reliability
Means never showing
the Downasaur

8. Why?
53% of users will abandon a
site if it takes longer than 3
seconds to load!
5 Billion devices connected
to the internet
of time spent is in users top
3 apps
80%

9. Project

10. Lighthouse
Lighthouse 3.0 in the Audits panel (Chrome 68)

12. First Test

14. PWA Checklist ● Baseline PWA Checklist
● Indexability & social
● User experience
● Performance
● Caching
● Push notifications
● Additional features
https://developers.google.com/web/progressive-web-apps/checklist

15. Let’s Code

16. Make it
Installable
Mobile and Desktop (Chrome 67)
https://developers.google.com/web/updates/2018/05/dpwa

17. manifest.json

18. functions.php
https://make.wordpress.org/core/2015/07/27/site-icon/
Dynamic
manifest.json

19. Site icon
Customizing > Site Identity > Site
Icon

20. Dynamic manifest.json
header.php

22. 1
manifest.json support

23. manifest.json

24. Service Worker

25. A service worker is a script that your
browser runs in the background as a proxy.

26. Service Worker
WebService WorkerApplication

27. Requirements
HTTPSBROWSER SUPPORT

29. Installing Service Worker

30. Service Worker with WordPress

31. 1
Service Worker support

32. Cache API

33. First load

34. Second load

35. Storage the files
sw.js

36. Checking the cache
sw.js

37. Workbox
JavaScript Libraries for
adding offline support
to web apps
https://developers.google.com/web/tools/workbox/

38. +

41. GenerateSW Plugin
●Precache files.
●Simple runtime configuration needs
●You can’t use other Service Worker
features
●You can’t to import additional scripts
InjectManifest Plugin
• More control over your service
worker.
• Precache files.
• Complex needs in terms of routing.
• Use your service worker with other
API's

42. Our Application ● Installable
● Caching
● Offline application
● Native social share
card
● Native integration

43. Check user connection

44. Native Share API

45. Calling maps href(geo:)

46. Some
integrations
https://github.com/fellyph/dublin-english
●Share API
● Calling maps
●Integrations with
others APP
●Check my github!

48. Result
27 82

49. Obrigado!

50. Refer
https://github.com/GoogleChromeLabs/ProgressiveWordPress
https://developers.google.com/web/ilt/pwa/
https://www.smashingmagazine.com/2017/10/service-worker-single-page-application-wordpress-sites/
https://developers.google.com/web/updates/2018/05/beyond-spa
https://jakearchibald.com/2014/offline-cookbook/