fix: turn service workers back on (#1944)

reconfigure service workers to only cache used assets (excluding .po language files and non-.var.woff2 font files)

* fix: turn service workers back on

* chore: configure service worker caches

* chore: add newline

* Fix code style issues with ESLint

* chore: limit service-worker caching
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>
Co-authored-by: Lint Action <lint-action@samuelmeuli.com>

package.json

@@ -116,10 +116,8 @@
     "use-count-up": "^2.2.5",
     "wcag-contrast": "^3.0.0",
     "workbox-core": "^6.1.0",
-    "workbox-expiration": "^6.1.0",
     "workbox-precaching": "^6.1.0",
-    "workbox-routing": "^6.1.0",
-    "workbox-strategies": "^6.1.0"
+    "workbox-routing": "^6.1.0"
   },
   "resolutions": {
     "@walletconnect/ethereum-provider": "1.6.4"

src/index.tsx

@@ -86,4 +86,4 @@ ReactDOM.render(
   document.getElementById('root')
 )
 
-serviceWorkerRegistration.unregister()
+serviceWorkerRegistration.register()

src/service-worker.ts

 /// <reference lib="webworker" />
 /* eslint-disable no-restricted-globals */
 
-// This service worker can be customized!
-// See https://developers.google.com/web/tools/workbox/modules
-// for the list of available Workbox modules, or add any other
-// code you'd like.
-// You can also remove this file if you'd prefer not to use a
-// service worker, and the Workbox build step will be skipped.
-
 import { clientsClaim } from 'workbox-core'
-import { ExpirationPlugin } from 'workbox-expiration'
 import { createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { registerRoute } from 'workbox-routing'
-import { StaleWhileRevalidate } from 'workbox-strategies'
 
 declare const self: ServiceWorkerGlobalScope
 
 clientsClaim()
 
-// Precache all of the assets generated by your build process.
-// Their URLs are injected into the manifest variable below.
-// This variable must be present somewhere in your service worker file,
-// even if you decide not to use precaching. See https://cra.link/PWA
-precacheAndRoute(self.__WB_MANIFEST)
-
-// Set up App Shell-style routing, so that all navigation requests
-// are fulfilled with your index.html shell. Learn more at
-// https://developers.google.com/web/fundamentals/architecture/app-shell
-const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$')
-registerRoute(
-  // Return false to exempt requests from being fulfilled by index.html.
-  ({ request, url }: { request: Request; url: URL }) => {
-    // If this isn't a navigation, skip.
-    if (request.mode !== 'navigate') {
-      return false
-    }
+// Precache the relevant assets generated by the build process.
+const manifest = self.__WB_MANIFEST.filter((entry) => {
+  const url = typeof entry === 'string' ? entry : entry.url
+  // If this is a language file, skip. They are compiled elsewhere.
+  if (url.endsWith('.po')) {
+    return false
+  }
 
-    // If this is a URL that starts with /_, skip.
-    if (url.pathname.startsWith('/_')) {
-      return false
-    }
+  // If this isn't a var woff2 font, skip. Modern browsers only need var fonts.
+  if (url.endsWith('.woff') || (url.endsWith('.woff2') && !url.includes('.var'))) {
+    return false
+  }
 
-    // If this looks like a URL for a resource, because it contains
-    // a file extension, skip.
-    if (url.pathname.match(fileExtensionRegexp)) {
-      return false
-    }
+  return true
+})
+precacheAndRoute(manifest)
 
-    // Return true to signal that we want to use the handler.
-    return true
-  },
-  createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
-)
+// Set up App Shell-style routing, so that navigation requests are fulfilled
+// immediately with a local index.html shell. See
+// https://developers.google.com/web/fundamentals/architecture/app-shell
+const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$')
+registerRoute(({ request, url }: { request: Request; url: URL }) => {
+  // If this isn't app.uniswap.org, skip. IPFS gateways may not have domain
+  // separation, so they cannot use App Shell-style routing.
+  if (url.hostname !== 'app.uniswap.org') {
+    return false
+  }
 
-// An example runtime caching route for requests that aren't handled by the
-// precache, in this case same-origin .png requests like those from in public/
-registerRoute(
-  // Add in any other file extensions or routing criteria as needed.
-  ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
-  // Customize this strategy as needed, e.g., by changing to CacheFirst.
-  new StaleWhileRevalidate({
-    cacheName: 'images',
-    plugins: [
-      // Ensure that once this runtime cache reaches a maximum size the
-      // least-recently used images are removed.
-      new ExpirationPlugin({ maxEntries: 50 }),
-    ],
-  })
-)
+  // If this isn't a navigation, skip.
+  if (request.mode !== 'navigate') {
+    return false
+  }
 
-// This allows the web app to trigger skipWaiting via
-// registration.waiting.postMessage({type: 'SKIP_WAITING'})
-self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting()
+  // If this looks like a URL for a resource, skip.
+  if (url.pathname.match(fileExtensionRegexp)) {
+    return false
   }
-})
 
-// Any other custom service worker logic can go here.
+  return true
+}, createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html'))

yarn.lock

@@ -19386,13 +19386,6 @@ workbox-expiration@^5.1.4:
   dependencies:
     workbox-core "^5.1.4"
 
-workbox-expiration@^6.1.0:
-  version "6.1.5"
-  resolved "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-6.1.5.tgz"
-  integrity sha512-6cN+FVbh8fNq56LFKPMchGNKCJeyboHsDuGBqmhDUPvD4uDjsegQpDQzn52VaE0cpywbSIsDF/BSq9E9Yjh5oQ==
-  dependencies:
-    workbox-core "^6.1.5"
-
 workbox-google-analytics@^5.1.4:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-5.1.4.tgz#b3376806b1ac7d7df8418304d379707195fa8517"
@@ -19455,7 +19448,7 @@ workbox-strategies@^5.1.4:
     workbox-core "^5.1.4"
     workbox-routing "^5.1.4"
 
-workbox-strategies@^6.1.0, workbox-strategies@^6.1.5:
+workbox-strategies@^6.1.5:
   version "6.1.5"
   resolved "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-6.1.5.tgz"
   integrity sha512-QhiOn9KT9YGBdbfWOmJT6pXZOIAxaVrs6J6AMYzRpkUegBTEcv36+ZhE/cfHoT0u2fxVtthHnskOQ/snEzaXQw==