Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PWA - Progressive WordPress Apps

318 views

Published on

Progressive Web Apps (PWA) is a concept related to user experience especially for mobile users, where the focus is to deliver websites that are Reliable, Fast and Engaging.

PWA became so popular the past year but how can we apply it to our WordPress projects?

On this technical presentation, We are going to apply step-by-step features as home screen button, service worker, cache API and accessing native features as a native APP in a real project.

Published in: Technology
  • Login to see the comments

PWA - Progressive WordPress Apps

  1. 1. Progressive WordPress Apps Fellyph Cintra
  2. 2. Fellyph Cintra Front-end Developer At Deloitte ● Work with WordPress since 2008 ● WordCamp Sao Paulo organizer @fellyph
  3. 3. Agenda ● PWA ● Basic configuration ● Service Worker ● Native functionality
  4. 4. Progressive Web Apps ?
  5. 5. Progressive Web Apps means improving the user experience as a native app.
  6. 6. Principles of PWA Fast Reliable Engaging
  7. 7. Reliability Means never showing the Downasaur
  8. 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. 9. Project
  10. 10. Lighthouse Lighthouse 3.0 in the Audits panel (Chrome 68)
  11. 11. First Test
  12. 12. PWA Checklist ● Baseline PWA Checklist ● Indexability & social ● User experience ● Performance ● Caching ● Push notifications ● Additional features https://developers.google.com/web/progressive-web-apps/checklist
  13. 13. Let’s Code
  14. 14. Make it Installable Mobile and Desktop (Chrome 67) https://developers.google.com/web/updates/2018/05/dpwa
  15. 15. manifest.json
  16. 16. functions.php https://make.wordpress.org/core/2015/07/27/site-icon/ Dynamic manifest.json
  17. 17. Site icon Customizing > Site Identity > Site Icon
  18. 18. Dynamic manifest.json header.php
  19. 19. 1 manifest.json support
  20. 20. manifest.json
  21. 21. Service Worker
  22. 22. A service worker is a script that your browser runs in the background as a proxy.
  23. 23. Service Worker WebService WorkerApplication
  24. 24. Requirements HTTPSBROWSER SUPPORT
  25. 25. Installing Service Worker
  26. 26. Service Worker with WordPress
  27. 27. 1 Service Worker support
  28. 28. Cache API
  29. 29. First load
  30. 30. Second load
  31. 31. Storage the files sw.js
  32. 32. Checking the cache sw.js
  33. 33. Workbox JavaScript Libraries for adding offline support to web apps https://developers.google.com/web/tools/workbox/
  34. 34. +
  35. 35. 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
  36. 36. Our Application ● Installable ● Caching ● Offline application ● Native social share card ● Native integration
  37. 37. Check user connection
  38. 38. Native Share API
  39. 39. Calling maps href(geo:)
  40. 40. Some integrations https://github.com/fellyph/dublin-english ●Share API ● Calling maps ●Integrations with others APP ●Check my github!
  41. 41. Result 27 82
  42. 42. Obrigado!
  43. 43. 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/

×