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
Tweet

More Decks by Koen Van den Wijngaert

Other Decks in Programming

Transcript

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

    between two systems using a common protocol. REpresentational STate Application Programming Interface
  2. 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
  3. REST Verbs Verbs that are used to display, create and/or

    manipulate resources. We describe them using the HTTP request method.
  4. 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
  5. WordPress Rest API https://api.example.com/wp-json/wp/v2/posts • Posts, categories, pages, settings, …

    • Calypso • Extendable • Modifiable (meta fields, …) • Libraries
  6. What I did • Custom REST Controller for activities •

    Added ACF Fields • Shaved some data off
  7. What Components do we need? • App • SessionList •

    Session • Speaker • Category • ...
  8. 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
  9. 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
  10. 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
  11. What can it do? • Intercept HTTP Request Useful for

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

    Only • Cache Only • StaleWhileRevalidate • ...