From 0c8e57de67e82c314210885eb2b606493bc7d076 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Mon, 23 May 2022 14:22:56 +0800 Subject: [PATCH] refactor(pwa): migrate sw.js to TS (#7467) * refactor(pwa): migrate sw.js to TS * add gitattributes --- .gitattributes | 4 ++ .../src/{sw.js => sw.ts} | 72 ++++++++----------- packages/docusaurus-plugin-pwa/tsconfig.json | 6 +- .../tsconfig.worker.json | 17 +++++ 4 files changed, 57 insertions(+), 42 deletions(-) rename packages/docusaurus-plugin-pwa/src/{sw.js => sw.ts} (63%) create mode 100644 packages/docusaurus-plugin-pwa/tsconfig.worker.json diff --git a/.gitattributes b/.gitattributes index 6ab8de85c3e5..8f814b940eb4 100644 --- a/.gitattributes +++ b/.gitattributes @@ -32,9 +32,13 @@ # See https://github.com/github/linguist/blob/master/docs/overrides.md # generated files' diff will be minimized **/__fixtures__/** linguist-generated +**/__mocks__/** linguist-generated examples/** linguist-generated .husky/** linguist-vendored jest/** linguist-vendored admin/** linguist-documentation website/** linguist-documentation packages/create-docusaurus/templates/** linguist-vendored +.eslintrc.* linguist-vendored +jest.config.* linguist-vendored +.stylelintrc.* linguist-vendored diff --git a/packages/docusaurus-plugin-pwa/src/sw.js b/packages/docusaurus-plugin-pwa/src/sw.ts similarity index 63% rename from packages/docusaurus-plugin-pwa/src/sw.js rename to packages/docusaurus-plugin-pwa/src/sw.ts index de5d83e6317d..ec46930f806a 100644 --- a/packages/docusaurus-plugin-pwa/src/sw.js +++ b/packages/docusaurus-plugin-pwa/src/sw.ts @@ -6,11 +6,11 @@ */ /* eslint-disable no-restricted-globals */ -import {PrecacheController} from 'workbox-precaching'; +import {PrecacheController, type PrecacheEntry} from 'workbox-precaching'; function parseSwParams() { const params = JSON.parse( - new URLSearchParams(self.location.search).get('params'), + new URLSearchParams(self.location.search).get('params')!, ); if (params.debug) { console.log('[Docusaurus-PWA][SW]: Service Worker params:', params); @@ -22,7 +22,7 @@ function parseSwParams() { // https://developers.google.com/web/tools/workbox/guides/using-bundlers#code_splitting_and_dynamic_imports // https://twitter.com/sebastienlorber/status/1280155204575518720 // but looks it's working fine as it's inlined by webpack, need to double check -async function runSWCustomCode(params) { +async function runSWCustomCode(params: {offlineMode: boolean; debug: boolean}) { if (process.env.PWA_SW_CUSTOM) { const customSW = await import(process.env.PWA_SW_CUSTOM); if (typeof customSW.default === 'function') { @@ -38,40 +38,34 @@ async function runSWCustomCode(params) { /** * Gets different possible variations for a request URL. Similar to * https://git.io/JvixK - * - * @param {string} url */ -function getPossibleURLs(url) { - const possibleURLs = []; +function getPossibleURLs(url: string) { const urlObject = new URL(url, self.location.href); if (urlObject.origin !== self.location.origin) { - return possibleURLs; + return []; } // Ignore search params and hash urlObject.search = ''; urlObject.hash = ''; - // /blog.html - possibleURLs.push(urlObject.href); - - // /blog/ => /blog/index.html - if (urlObject.pathname.endsWith('/')) { - possibleURLs.push(`${urlObject.href}index.html`); - } else { + return [ + // /blog.html + urlObject.href, + // /blog/ => /blog/index.html // /blog => /blog/index.html - possibleURLs.push(`${urlObject.href}/index.html`); - } - - return possibleURLs; + `${urlObject.href}${urlObject.pathname.endsWith('/') ? '' : '/'}index.html`, + ]; } (async () => { const params = parseSwParams(); // eslint-disable-next-line no-underscore-dangle - const precacheManifest = self.__WB_MANIFEST; + const precacheManifest = ( + self as typeof globalThis & {__WB_MANIFEST: (string | PrecacheEntry)[]} + ).__WB_MANIFEST; const controller = new PrecacheController({ // Safer to turn this true? fallbackToNetwork: true, @@ -80,9 +74,7 @@ function getPossibleURLs(url) { if (params.offlineMode) { controller.addToCacheList(precacheManifest); if (params.debug) { - console.log('[Docusaurus-PWA][SW]: addToCacheList', { - precacheManifest, - }); + console.log('[Docusaurus-PWA][SW]: addToCacheList', {precacheManifest}); } } @@ -90,31 +82,30 @@ function getPossibleURLs(url) { self.addEventListener('install', (event) => { if (params.debug) { - console.log('[Docusaurus-PWA][SW]: install event', { - event, - }); + console.log('[Docusaurus-PWA][SW]: install event', {event}); } - event.waitUntil(controller.install(event)); + (event as ExtendableEvent).waitUntil( + controller.install(event as ExtendableEvent), + ); }); self.addEventListener('activate', (event) => { if (params.debug) { - console.log('[Docusaurus-PWA][SW]: activate event', { - event, - }); + console.log('[Docusaurus-PWA][SW]: activate event', {event}); } - event.waitUntil(controller.activate(event)); + (event as ExtendableEvent).waitUntil( + controller.activate(event as ExtendableEvent), + ); }); self.addEventListener('fetch', async (event) => { if (params.offlineMode) { - const requestURL = event.request.url; + const requestURL = (event as FetchEvent).request.url; const possibleURLs = getPossibleURLs(requestURL); - for (let i = 0; i < possibleURLs.length; i += 1) { - const possibleURL = possibleURLs[i]; + for (const possibleURL of possibleURLs) { const cacheKey = controller.getCacheKeyForURL(possibleURL); if (cacheKey) { - const cachedResponse = caches.match(cacheKey); + const cachedResponse = caches.match(cacheKey) as Promise; if (params.debug) { console.log('[Docusaurus-PWA][SW]: serving cached asset', { requestURL, @@ -124,7 +115,7 @@ function getPossibleURLs(url) { cachedResponse, }); } - event.respondWith(cachedResponse); + (event as FetchEvent).respondWith(cachedResponse); break; } } @@ -133,15 +124,14 @@ function getPossibleURLs(url) { self.addEventListener('message', async (event) => { if (params.debug) { - console.log('[Docusaurus-PWA][SW]: message event', { - event, - }); + console.log('[Docusaurus-PWA][SW]: message event', {event}); } - const type = event.data?.type; + const type = (event as MessageEvent).data?.type; if (type === 'SKIP_WAITING') { - self.skipWaiting(); + // lib def bug, see https://github.com/microsoft/TypeScript/issues/14877 + (self as typeof globalThis & ServiceWorkerGlobalScope).skipWaiting(); } }); })(); diff --git a/packages/docusaurus-plugin-pwa/tsconfig.json b/packages/docusaurus-plugin-pwa/tsconfig.json index 5eb9d05af96b..9da13f25341a 100644 --- a/packages/docusaurus-plugin-pwa/tsconfig.json +++ b/packages/docusaurus-plugin-pwa/tsconfig.json @@ -1,6 +1,9 @@ { "extends": "../../tsconfig.json", - "references": [{"path": "./tsconfig.client.json"}], + "references": [ + {"path": "./tsconfig.client.json"}, + {"path": "./tsconfig.worker.json"} + ], "compilerOptions": { "noEmit": false, "incremental": true, @@ -13,6 +16,7 @@ "exclude": [ "src/theme/", "src/registerSw.ts", + "src/sw.ts", "src/renderReloadPopup.tsx", "**/__tests__/**" ] diff --git a/packages/docusaurus-plugin-pwa/tsconfig.worker.json b/packages/docusaurus-plugin-pwa/tsconfig.worker.json new file mode 100644 index 000000000000..12209de70c65 --- /dev/null +++ b/packages/docusaurus-plugin-pwa/tsconfig.worker.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "noEmit": false, + "composite": true, + "incremental": true, + "lib": ["webworker", "esnext"], + "tsBuildInfoFile": "./lib/.tsbuildinfo-worker", + "rootDir": "src", + "outDir": "lib", + "module": "esnext", + "target": "esnext", + "types": ["node"] + }, + "include": ["src/sw.ts"], + "exclude": ["**/__tests__/**"] +}