Use a HACKDAY to PWA a React app

  1. Be organised
  2. Manifest
  3. Offline homepage
  4. Asset caching
  5. Runtime API cache
  6. Interactive offline/Optimistic UI
  7. Pre-cache popular journeys

1. Be organised

2. Manifest

{  
"name": Our app",
"short_name": "Our app",
"start_url": "/?utm_source=homescreen",
"display": "standalone",
"background_color": "<COLOUR>",
"theme_color": "<COLOUR>",
"orientation": "portrait",
"description": "Our app",
"icons": [{
"src": "/128x128.png",
"sizes": "128x128",
"type": "image/png" },{
"src": "/192x192.png",
"sizes": "192x192",
"type": "image/png" },{
"src": "/384x384.png",
"sizes": "384x384",
"type": "image/png" },{
"src": "/512x512.png",
"sizes": "512x512",
"type": "image/png" }]
}

3. Offline homepage

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');workbox.precaching.precacheAndRoute([  
{ url: '/index.html' },
{ url: '/' }
]);
<script type="text/javascript" dangerouslySetInnerHTML={ { __html:
`window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});`
} } />

4. Asset caching

// Caching JS assets
workbox.routing.registerRoute(
new RegExp('.*\.js'),
workbox.strategies.staleWhileRevalidate({
cacheName: 'js-cache'
})
);
// Caching CSS assets
workbox.routing.registerRoute(
new RegExp('.*\.css'),
workbox.strategies.staleWhileRevalidate({
cacheName: 'css-cache'
})
);

5. Runtime API cache

workbox.routing.registerRoute(
"<our API url>",
workbox.strategies.cacheFirst({
cacheName: 'api-cache',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 50,
maxAgeSeconds: 5 * 60, 5 minutes
}),
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
],
}),
);

6. Interactive offline/Optimistic UI

What is an Optimistic UI?

Normal UI:
User clicks CTA -> AJAX request to server -> UI updated
Optimistic UI:
User clicks CTA -> UI updated -> AJAX request to server

Introducing redux-offline:

7. Pre-cache popular journeys

BEFORE: 
A. Request products recommendations
AFTER:
A. Request products recommendations
B. Request product details for each recommendation

Debugging

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store