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/

Transcript

1. Progressive Web Apps using React and WordPress
3. @vdwijngaert Koen Van den Wijngaert SiteOptimo.com Geek
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 App
45. That’s it. Meer weten? Stel je vraag