From b8a9191653e072dc03e9fcfcc1b2322729af57a1 Mon Sep 17 00:00:00 2001 From: Moody Salem Date: Wed, 25 Aug 2021 14:46:56 -0500 Subject: [PATCH] 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 Co-authored-by: Lint Action --- package.json | 4 +- src/index.tsx | 2 +- src/service-worker.ts | 95 +++++++++++++++---------------------------- yarn.lock | 9 +--- 4 files changed, 36 insertions(+), 74 deletions(-) diff --git a/package.json b/package.json index e00df50e6..936dd7a3b 100644 --- a/package.json +++ b/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" diff --git a/src/index.tsx b/src/index.tsx index 2bdfb59e8..ecaf9d0fc 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -86,4 +86,4 @@ ReactDOM.render( document.getElementById('root') ) -serviceWorkerRegistration.unregister() +serviceWorkerRegistration.register() diff --git a/src/service-worker.ts b/src/service-worker.ts index 97d20ec8d..556a940d0 100644 --- a/src/service-worker.ts +++ b/src/service-worker.ts @@ -1,80 +1,51 @@ /// /* 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')) diff --git a/yarn.lock b/yarn.lock index 0dcda1c1d..2f3e444a6 100644 --- a/yarn.lock +++ b/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==