Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA based on React and WordPress

PWA based on React and WordPress

This talk is about building an offline-first REACT PWA using the WordPress REST API, lessons learned.

This talk was given at the Ieper Wordpress Meetup group. https://www.meetup.com/nl-NL/Ieper-WordPress-Meetup/


Koen Van den Wijngaert

June 05, 2019


  1. Progressive Web Apps using React and WordPress

  2. None
  3. @vdwijngaert Koen Van den Wijngaert SiteOptimo.com Geek

  4. None
  5. None
  6. None
  7. WHAT? Progressive Web App using React and WordPress REST API

  8. Table of Contents 1. WordPress REST API 2. React 3.

    Progressive Web App
  9. WordPress REST API

  10. What is a REST API? A way to transfer state

    between two systems using a common protocol. REpresentational STate Application Programming Interface
  11. What is a REST API? • Resources • Verbs •

    Requests • Responses
  12. REST Resources A resource has a certain location and can

    have an identifier and links to other resources. https://api.example.com/cars https://api.example.com/cars/123456
  13. REST Verbs Verbs that are used to display, create and/or

    manipulate resources. We describe them using the HTTP request method.
  14. REST Verbs https://api.example.com/cars GET Retrieve a list of cars POST

    Create a new car PUT Replace the list of cars with a new one PATCH Update one or more cars in the list DELETE Delete the list of cars
  15. GET https:/ /api.example.com/cars/123456

  16. POST https:/ /api.example.com/cars > HTTP/1.1 201 CREATED

  17. GET https:/ /api.example.com/cars

  18. WordPress REST API

  19. WordPress Rest API https://api.example.com/wp-json/wp/v2/posts • Posts, categories, pages, settings, …

    • Calypso • Extendable • Modifiable (meta fields, …) • Libraries
  20. Calypso

  21. What I did • Custom REST Controller for activities •

    Added ACF Fields • Shaved some data off
  22. Table of Contents 1. WordPress REST API 2. React 3.

    Progressive Web App
  23. React A JavaScript library for building user interfaces

  24. Crash Course React

  25. React vs jQuery

  26. State and Props

  27. Let’s Build a React App Together®

  28. Let’s Build a React App Together® WORDCAMP EUROPE 2019 20–22

    June, Berlin, Germany | #WCEU
  29. Let’s Build a React App Together®

  30. Where do we get the good stuff? GET https://2019.europe.wordcamp.org/wp-json/wp/v2/sessions

  31. What Components do we need? • App • SessionList •

    Session • Speaker • Category • ...
  32. Let’s Build a React App Together® Demo time! https:/ /localhost:5000

  33. Table of Contents 1. WordPress REST API 2. React 3.

    Progressive Web App
  34. Progressive Web Apps

  35. What is this PWA thing? A type of mobile app

    delivered through the web, built using HTML, CSS and JavaScript. They can be installed on any platform that uses a standards-compliant browser. ✓ Progressive ✓ Working offline ✓ Push notifications ✓ Native experience
  36. Main criteria for a valid PWA ✓ Originate from a

    secure origin ✓ Load while offline ✓ Manifest file with basic information ✓ An icon of at least 144×144
  37. manifest.webmanifest

  38. ServiceWorker.js

  39. ServiceWorker.js • Runs in its own global script context •

    Sits between clients and server • Can handle multiple clients simultaneously • Has no direct access to the client DOM
  40. ServiceWorker.js Lifecycle Installed Downloaded Activated

  41. What can it do? • Intercept HTTP Request Useful for

    caching and providing fallbacks • Subscribe for Push Notifications • Synchronize in the background • Register navigation routes
  42. Caching strategies • Cache First • Network First • Network

    Only • Cache Only • StaleWhileRevalidate • ...
  43. https://googlechrome.github.io/samples/service-worker/basic/

  44. Recap 1. WordPress REST API 2. React 3. Progressive Web

  45. That’s it. Meer weten? Stel je vraag