diff --git a/deploy/copy_to_dist.sh b/deploy/copy_to_dist.sh index 97e54ff51..b74b4bb30 100755 --- a/deploy/copy_to_dist.sh +++ b/deploy/copy_to_dist.sh @@ -2,13 +2,10 @@ cp -R ./public/* ${1:-"dist"} -cp ./src/lib/rlottie/rlottie-wasm.js ${1:-"dist"} cp ./src/lib/rlottie/rlottie-wasm.wasm ${1:-"dist"} +cp ./src/lib/webp/webp_wasm.wasm ${1:-"dist"} cp ./node_modules/opus-recorder/dist/decoderWorker.min.wasm ${1:-"dist"} -cp ./src/lib/webp/webp_wasm.js ${1:-"dist"} -cp ./src/lib/webp/webp_wasm.wasm ${1:-"dist"} - cp -R ./node_modules/emoji-data-ios/img-apple-64 ${1:-"dist"} cp -R ./node_modules/emoji-data-ios/img-apple-160 ${1:-"dist"} diff --git a/package-lock.json b/package-lock.json index 8f8b1b00b..205e5b24a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -81,6 +81,7 @@ "replace-in-file": "^6.3.2", "sass": "^1.50.0", "sass-loader": "^12.6.0", + "script-loader": "^0.7.2", "serve": "^13.0.2", "style-loader": "^3.3.1", "stylelint": "^14.6.1", @@ -14171,6 +14172,12 @@ "node": ">= 0.8" } }, + "node_modules/raw-loader": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz", + "integrity": "sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q==", + "dev": true + }, "node_modules/rc": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", @@ -15036,6 +15043,15 @@ "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", "dev": true }, + "node_modules/script-loader": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/script-loader/-/script-loader-0.7.2.tgz", + "integrity": "sha512-UMNLEvgOAQuzK8ji8qIscM3GIrRCWN6MmMXGD4SD5l6cSycgGsCo0tX5xRnfQcoghqct0tjHjcykgI1PyBE2aA==", + "dev": true, + "dependencies": { + "raw-loader": "~0.5.1" + } + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -28750,6 +28766,12 @@ } } }, + "raw-loader": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz", + "integrity": "sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q==", + "dev": true + }, "rc": { "version": "1.2.8", "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", @@ -29383,6 +29405,15 @@ } } }, + "script-loader": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/script-loader/-/script-loader-0.7.2.tgz", + "integrity": "sha512-UMNLEvgOAQuzK8ji8qIscM3GIrRCWN6MmMXGD4SD5l6cSycgGsCo0tX5xRnfQcoghqct0tjHjcykgI1PyBE2aA==", + "dev": true, + "requires": { + "raw-loader": "~0.5.1" + } + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", diff --git a/package.json b/package.json index 804d659fa..71e4b3459 100644 --- a/package.json +++ b/package.json @@ -99,6 +99,7 @@ "replace-in-file": "^6.3.2", "sass": "^1.50.0", "sass-loader": "^12.6.0", + "script-loader": "^0.7.2", "serve": "^13.0.2", "style-loader": "^3.3.1", "stylelint": "^14.6.1", diff --git a/src/lib/rlottie/rlottie.worker.ts b/src/lib/rlottie/rlottie.worker.ts index e4fb9f4d2..7c9ade402 100644 --- a/src/lib/rlottie/rlottie.worker.ts +++ b/src/lib/rlottie/rlottie.worker.ts @@ -2,16 +2,14 @@ import { inflate } from 'pako/dist/pako_inflate'; import createWorkerInterface from '../../util/createWorkerInterface'; import type { CancellableCallback } from '../../util/WorkerConnector'; +import 'script-loader!./rlottie-wasm'; + declare const Module: any; declare function allocate(...args: any[]): string; declare function intArrayFromString(str: String): string; -declare const self: WorkerGlobalScope; - -self.importScripts('rlottie-wasm.js'); - let rLottieApi: Record; const rLottieApiPromise = new Promise((resolve) => { Module.onRuntimeInitialized = () => { diff --git a/src/lib/webp/webp_wasm.worker.js b/src/lib/webp/webp_wasm.worker.js index 6654d8231..f3bcca581 100644 --- a/src/lib/webp/webp_wasm.worker.js +++ b/src/lib/webp/webp_wasm.worker.js @@ -1,5 +1,5 @@ /* eslint-disable */ -importScripts('webp_wasm.js'); +import 'script-loader!./webp_wasm'; Module.onRuntimeInitialized = async () => { self.postMessage({ type: 'initialized' }); diff --git a/src/serviceWorker.ts b/src/serviceWorker.ts index a8d7e3b86..a43326f07 100644 --- a/src/serviceWorker.ts +++ b/src/serviceWorker.ts @@ -1,13 +1,14 @@ import { DEBUG } from './config'; import { respondForProgressive } from './serviceWorker/progressive'; import { respondForDownload } from './serviceWorker/download'; -import { respondWithCache, clearAssetCache } from './serviceWorker/assetCache'; +import { respondWithCache, clearAssetCache, respondWithCacheNetworkFirst } from './serviceWorker/assetCache'; import { handlePush, handleNotificationClick, handleClientMessage } from './serviceWorker/pushNotification'; import { pause } from './util/schedulers'; declare const self: ServiceWorkerGlobalScope; -const ASSET_CACHE_PATTERN = /[\da-f]{20}.*\.(js|css|woff2?|svg|png|jpg|jpeg|tgs|json|wasm)$/; +const NETWORK_FIRST_ASSETS = new Set(['/', '/rlottie-wasm.wasm', '/webp_wasm.wasm']); +const RE_CACHE_FIRST_ASSETS = /[\da-f]{20}.*\.(js|css|woff2?|svg|png|jpg|jpeg|tgs|json|wasm)$/; const ACTIVATE_TIMEOUT = 3000; self.addEventListener('install', (e) => { @@ -52,9 +53,16 @@ self.addEventListener('fetch', (e: FetchEvent) => { return true; } - if (url.startsWith('http') && url.match(ASSET_CACHE_PATTERN)) { - e.respondWith(respondWithCache(e)); - return true; + if (url.startsWith('http')) { + if (NETWORK_FIRST_ASSETS.has(new URL(url).pathname)) { + e.respondWith(respondWithCacheNetworkFirst(e)); + return true; + } + + if (url.match(RE_CACHE_FIRST_ASSETS)) { + e.respondWith(respondWithCache(e)); + return true; + } } return false; diff --git a/src/serviceWorker/assetCache.ts b/src/serviceWorker/assetCache.ts index 90a624886..8bca21741 100644 --- a/src/serviceWorker/assetCache.ts +++ b/src/serviceWorker/assetCache.ts @@ -4,7 +4,21 @@ import { pause } from '../util/schedulers'; declare const self: ServiceWorkerGlobalScope; // An attempt to fix freezing UI on iOS -const CACHE_TIMEOUT = 3000; +const TIMEOUT = 3000; + +export async function respondWithCacheNetworkFirst(e: FetchEvent) { + const remote = await withTimeout(() => fetch(e.request), TIMEOUT); + if (!remote?.ok) { + return respondWithCache(e); + } + + const toCache = remote.clone(); + self.caches.open(ASSET_CACHE_NAME).then((cache) => { + return cache?.put(e.request, toCache); + }); + + return remote; +} export async function respondWithCache(e: FetchEvent) { const cacheResult = await withTimeout(async () => { @@ -12,7 +26,7 @@ export async function respondWithCache(e: FetchEvent) { const cached = await cache.match(e.request); return { cache, cached }; - }, CACHE_TIMEOUT); + }, TIMEOUT); const { cache, cached } = cacheResult || {}; diff --git a/webpack.config.js b/webpack.config.js index 7b5a16466..774b36755 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -129,6 +129,7 @@ module.exports = (_env, { mode = 'production' }) => { os: require.resolve('os-browserify/browser'), buffer: require.resolve('buffer/'), fs: false, + crypto: false, }, },