$30 off During Our Annual Pro Sale. View details »

Progressive Web Apps with React

Progressive Web Apps with React

Jonathan Mills

October 10, 2018
Tweet

More Decks by Jonathan Mills

Other Decks in Technology

Transcript

  1. @ j o n a t h a n f

    m i l l s #reactPWA P R O G R E S S I V E W E B A P P S W I T H R E A C T
  2. None
  3. None
  4. None
  5. Progressive Web Apps to the rescue!

  6. What is a PWA? RELIABLE

  7. What is a PWA? RELIABLE FAST

  8. What is a PWA? RELIABLE FAST ENGAGING

  9. Demo

  10. None
  11. Service Workers

  12. Have you heard of a Web Worker?

  13. ServiceWorker != WebWorker

  14. None
  15. if('serviceWorker' in navigator) { navigator.serviceWorker.register('/offline.js', { scope: '/' }) .then(function(registration)

    { console.log('Service Worker Registered'); }); navigator.serviceWorker.ready .then(function(registration) { console.log('Service Worker Ready'); }); } SERVICE WORKER
  16. INSTALL const CACHE_NAME = ‘DevUp’ // Version 0.6.5 self.addEventListener('install', e

    => { console.log('installing service worker!!') const timeStamp = Date.now(); e.waitUntil( caches.open(CACHE_NAME).then(cache => { return cache.addAll([ `/`, `/index.html`, `/json/data.json`, `/static/js/bundle.js` ]) .then(() => self.skipWaiting()); }) ); });
  17. INSTALL const CACHE_NAME = ‘DevUp’ // Version 0.6.5 self.addEventListener('install', e

    => { console.log('installing service worker!!') const timeStamp = Date.now(); e.waitUntil( caches.open(CACHE_NAME).then(cache => { return cache.addAll([ `/`, `/index.html`, `/json/data.json`, `/static/js/bundle.js` ]) .then(() => self.skipWaiting()); }) ); });
  18. INSTALL const CACHE_NAME = ‘DevUp' // Version 0.6.5 self.addEventListener('install', e

    => { console.log('installing service worker!!') const timeStamp = Date.now(); e.waitUntil( caches.open(CACHE_NAME).then(cache => { return cache.addAll([ `/`, `/index.html`, `/json/data.json`, `/static/js/bundle.js` ]) .then(() => self.skipWaiting()); }) ); });
  19. ACTIVATE self.addEventListener('activate', event => { console.log('activating service worker'); event.waitUntil(self.clients.claim()); });

  20. FETCH self.addEventListener('fetch', function(event) {…})

  21. FETCH event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return

    response if (response) { return response; } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME)
  22. FETCH event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return

    response if (response) { return response; } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME)
  23. FETCH event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return

    response if (response) { return response; } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME)
  24. event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response

    if (response) { return response; } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME) FETCH
  25. } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { //

    Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); FETCH
  26. } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { //

    Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); FETCH
  27. } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { //

    Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); FETCH
  28. } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { //

    Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); FETCH
  29. Demo

  30. None
  31. Manifest

  32. A manifest describes your web page in an

  33. INDEX.HTML <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

  34. MANIFEST { "short_name": "Library", "name": “DevUp Library Demo", "icons": [

    { "src": "book.png", "sizes": "192X192", "type": "image/png" } ], "start_url": "./index.html", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" }
  35. Demo

  36. None
  37. Let’s Deploy

  38. None
  39. Github Pages to the rescue

  40. PACKAGE.JSON – ADDING GH-PAGES { "name": "library", "version": "0.1.0", "private":

    true, "homepage": “https://jonathanfmills.github.io/DEVUPPWA”, "dependencies": { "gh-pages": "^1.1.0", … }, "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build", } }
  41. Demo

  42. http://bit.ly/devuppwa

  43. @ j o n a t h a n f

    m i l l s #reactPWA P R O G R E S S I V E W E B A P P S W I T H R E A C T