[Do Not Merge: Spike] => feat(performance): Add basic service-worker setup

[damassi]

⚠️ Do not merge: Spike for discussion!

The type of this PR is: Feat

This PR solves DIA-960

Description

This adds service worker ("Progressive Web App") support to Force via Google's Workbox plugin.

Service workers are specialized JavaScript assets that act as proxies between web browsers and web servers. They aim to improve reliability by providing offline access, as well as boost page performance.

Some various docs:

• https://web.dev/learn/pwa/service-workers
• https://developer.chrome.com/docs/workbox/service-worker-overview
• https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

Comparisons:

• https://web.dev/articles/service-worker-caching-and-http-caching
• https://developer.chrome.com/docs/workbox/caching-strategies-overview#the_cache_interface_versus_the_http_cache

⚠️ Reviewers! If you pull this down and test, be sure to go to devtools > application > web-workers and hit 'unregister worker' after you're done testing the PR. The worker seems to persist per domain, so checking out a new branch and making code changes in dev seems to create issues if the worker is still registered in the background.

This is a big subject and there's room to debate whether this is truly valuable with the defaults out of the box, vs normal http caching. However, service workers are very powerful and feature-rich, and provide complete control over various things. So this wires up the functionality, and we can explore how this might benefit us.

They also support robust offline access -- that's what service-workers are typically used for -- with js assets that are pre-cached via webpack, so pages don't hard-error out at the asset level, but we still need to perform fetch for data. So again, questionable if this provides much value in Artsy's use-case. (Something like this would be very cool for Eigen tho -- if it were a web-app.)

Network responses can also be pushed into the cache. Here's a rough example:

{
  urlPattern: /^https:\/\/metaphysics-cdn\.artsy\.net\/.*$/,
  handler: 'NetworkFirst', // Or use 'StaleWhileRevalidate' 
  options: {
    cacheName: 'api-cache',
    networkTimeoutSeconds: 10, 
    expiration: {
      maxEntries: 50, 
      maxAgeSeconds: 5 * 60, // Cache for 5 minutes
    },
    cacheableResponse: { statuses: [0, 200] }, 
  },
}

I spiked on this many many years ago, but back then force was much more fragmented. Now that its unified, and we're on a performance kick, wanted to revisit and implement this as a spike, which is much easier due to site-wide consistency and Google's Webpack plugin.

@joeyAghion and @mzikherman - perhaps y'all can train your sharp thinking on this to see if there might be some yield? We can go deep here.

Some Screen-caps:

Example of first load, vs subsequent load:

service-worker.mp4

Example of offline not erroring out:

offline.mp4

cc @artsy/diamond-devs

[artsy-peril]

workbox-webpack-plugin

Author: Google's Web DevRel Team and Google's Aurora Team

Description: A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.

Homepage: https://github.com/GoogleChrome/workbox

Created	over 7 years ago
Last Updated	about 5 hours ago
License	MIT
Maintainers	8
Releases	101
Direct Dependencies	upath, pretty-bytes, workbox-build, webpack-sources and fast-json-stable-stringify
Keywords	workbox, workboxjs, webpack, service worker, caching, fetch requests, offline and file manifest

README

This module's documentation can be found at https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/

New dependencies added: workbox-webpack-plugin.

Generated by 🚫 dangerJS against cb273a1

[relativeci]

#820 Bundle Size — 9.57MiB (+0.26%).

cb273a1(current) vs ffe4f84 main#484(baseline)

Important

Bundle introduced 1 and removed 4 duplicate packages – View changed duplicate packages

Warning

Bundle introduced 3 new packages: web-vitals, @sentry-internal/browser-utils, stylis – View changed packages

Bundle metrics   9 changes 1 regression 3 improvements

	Current #820	Baseline #484
Initial JS	3.84MiB(-2.79%)	3.95MiB
Initial CSS	0B	0B
Cache Invalidation	82.37%	2.04%
Chunks	139(-2.8%)	143
Assets	144(-1.37%)	146
Modules	5666(+0.51%)	5637
Duplicate Modules	472(+3.74%)	455
Duplicate Code	6.17%(+4.93%)	5.88%
Packages	282(-3.09%)	291
Duplicate Packages	39(-7.14%)	42

Bundle size by type   2 changes 1 regression 1 improvement

	Current #820	Baseline #484
JS	9.35MiB (+0.35%)	9.31MiB
Other	230.18KiB (-3.22%)	237.84KiB

Bundle analysis report Branch damassi/service-workers Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}