anton-karlovskiy

• Web Page Usability Matters
• PageSpeed Insights w/Lighthouse and Chrome User Experience Report
• Data Saver for Chrome on Android - enable and then look at about:flags for Lite Pages and other interventions
• web.dev/fast - code-labs and tooling for optimizing performance
• Lighthousebot for using Lighthouse in continuous integration
• Bundlesize for JavaScript budgets in CI
• Start performance budgeting

anton-karlovskiy

// array utils
// =================================================================================================

const combine = (...arrays) => [].concat(...arrays);

const compact = arr => arr.filter(Boolean);

const contains = (() => Array.prototype.includes
  ? (arr, value) => arr.includes(value)
  : (arr, value) => arr.some(el => el === value)

anton-karlovskiy

const fetchAsBlob = url => fetch(url).then(response => response.blob());

const convertBlobToBase64 = blob => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onerror = reject;
  reader.onload = () => {
    resolve(reader.result);
  };
  reader.readAsDataURL(blob);
});

anton-karlovskiy

Workbox runtime caching recipes

Your Service Worker script will need to import in Workbox and initialize it before calling any of the routes documented in this write-up, similar to the below:

importScripts('workbox-sw.prod.v1.3.0.js');
const workbox = new WorkboxSW();

// Placeholder array populated automatically by workboxBuild.injectManifest()