diff --git a/build/sw_plugin.js b/build/sw_plugin.js index e008c60c9..ee952d229 100644 --- a/build/sw_plugin.js +++ b/build/sw_plugin.js @@ -16,22 +16,15 @@ const getSWMessagesAsText = async () => { } const projectRoot = dirname(dirname(fileURLToPath(import.meta.url))) -const swEnvName = 'virtual:pleroma-fe/service_worker_env' -const swEnvNameResolved = '\0' + swEnvName const getDevSwEnv = () => `self.serviceWorkerOption = { assets: [] };` const getProdSwEnv = ({ assets }) => `self.serviceWorkerOption = { assets: ${JSON.stringify(assets)} };` -export const devSwPlugin = ({ swSrc, swDest, transformSW, alias }) => { +export const devSwPlugin = ({ swSrc, swDest }) => { const swFullSrc = resolve(projectRoot, swSrc) - const esbuildAlias = {} - Object.entries(alias).forEach(([source, dest]) => { - esbuildAlias[source] = dest.startsWith('/') ? projectRoot + dest : dest - }) return { - name: 'dev-sw-plugin', - apply: 'serve', + name: 'dev-sw-plugin', apply: 'serve', configResolved() { /* no-op */ }, @@ -39,150 +32,15 @@ export const devSwPlugin = ({ swSrc, swDest, transformSW, alias }) => { const name = id.startsWith('/') ? id.slice(1) : id if (name === swDest) { return swFullSrc - } else if (name === swEnvName) { - return swEnvNameResolved } return null }, async load(id) { if (id === swFullSrc) { return readFile(swFullSrc, 'utf-8') - } else if (id === swEnvNameResolved) { - return getDevSwEnv() } return null }, - /** - * vite does not bundle the service worker - * during dev, and firefox does not support ESM as service worker - * https://bugzilla.mozilla.org/show_bug.cgi?id=1360870 - */ - async transform(code, id) { - if (id === swFullSrc && transformSW) { - const res = await esbuild.build({ - entryPoints: [swSrc], - bundle: true, - write: false, - outfile: 'sw-pleroma.js', - alias: esbuildAlias, - plugins: [ - { - name: 'vite-like-root-resolve', - setup(b) { - b.onResolve({ filter: new RegExp(/^\//) }, (args) => ({ - path: resolve(projectRoot, args.path.slice(1)), - })) - }, - }, - { - name: 'sw-messages', - setup(b) { - b.onResolve( - { filter: new RegExp('^' + swMessagesName + '$') }, - (args) => ({ - path: args.path, - namespace: 'sw-messages', - }), - ) - b.onLoad( - { filter: /.*/, namespace: 'sw-messages' }, - async () => ({ - contents: await getSWMessagesAsText(), - }), - ) - }, - }, - { - name: 'sw-env', - setup(b) { - b.onResolve( - { filter: new RegExp('^' + swEnvName + '$') }, - (args) => ({ - path: args.path, - namespace: 'sw-env', - }), - ) - b.onLoad({ filter: /.*/, namespace: 'sw-env' }, () => ({ - contents: getDevSwEnv(), - })) - }, - }, - ], - }) - const text = res.outputFiles[0].text - return text - } - }, - } -} - -// Idea taken from -// https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/plugins/build.ts -// rollup does not support compiling to iife if we want to code-split; -// however, we must compile the service worker to iife because of browser support. -// Run another vite build just for the service worker targeting iife at -// the end of the build. -export const buildSwPlugin = ({ swSrc, swDest }) => { - let config - return { - name: 'build-sw-plugin', - enforce: 'post', - apply: 'build', - configResolved(resolvedConfig) { - config = { - define: resolvedConfig.define, - resolve: resolvedConfig.resolve, - plugins: [swMessagesPlugin()], - publicDir: false, - build: { - ...resolvedConfig.build, - lib: { - entry: swSrc, - formats: ['iife'], - name: 'sw_pleroma', - }, - emptyOutDir: false, - rolldownOptions: { - output: { - entryFileNames: swDest, - }, - }, - }, - configFile: false, - } - }, - generateBundle: { - order: 'post', - sequential: true, - async handler(_, bundle) { - const assets = Object.keys(bundle) - .filter((name) => !/\.map$/.test(name)) - .map((name) => '/' + name) - config.plugins.push({ - name: 'build-sw-env-plugin', - resolveId(id) { - if (id === swEnvName) { - return swEnvNameResolved - } - return null - }, - load(id) { - if (id === swEnvNameResolved) { - return getProdSwEnv({ assets }) - } - return null - }, - }) - }, - }, - closeBundle: { - order: 'post', - sequential: true, - async handler() { - console.info('Building service worker for production') - await build(config) - }, - }, } } diff --git a/src/services/sw/sw.js b/src/services/sw/sw.js index 68922bafb..797f4c448 100644 --- a/src/services/sw/sw.js +++ b/src/services/sw/sw.js @@ -18,8 +18,9 @@ function isPushSupported() { function getOrCreateServiceWorker() { if (!isSWSupported()) return const swType = process.env.HAS_MODULE_SERVICE_WORKER ? 'module' : 'classic' - return navigator.serviceWorker - .register(import.meta.env.MODE === 'production' ? '/sw-pleroma.js' : '/dev-sw.js?dev-sw', { type: swType }) + return navigator + .serviceWorker + .register('/sw-pleroma.js', { type: swType }) .catch((err) => console.error('Unable to get or create a service worker.', err), ) diff --git a/src/sw-pleroma.js b/src/sw.js similarity index 100% rename from src/sw-pleroma.js rename to src/sw.js diff --git a/vite.config.js b/vite.config.js index 967247215..f79f2327a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -12,6 +12,7 @@ import { getCommitHash } from './build/commit_hash.js' import copyPlugin from './build/copy_plugin.js' import emojisPlugin from './build/emojis_plugin.js' import { + devSwPlugin, swMessagesPlugin, } from './build/sw_plugin.js' import { VitePWA } from 'vite-plugin-pwa' @@ -109,7 +110,7 @@ export default defineConfig(async ({ mode, command }) => { }, } - const swSrc = 'src/sw-pleroma.js' + const swSrc = 'src/sw.js' const swDest = 'sw-pleroma.js' const alias = { src: '/src', @@ -160,23 +161,7 @@ export default defineConfig(async ({ mode, command }) => { ), }), swMessagesPlugin(), - VitePWA({ - strategies: 'injectManifest', - srcDir: 'src', - filename: 'sw-pleroma.js', - manifest: false, - injectRegister: null, - devOptions: { - enabled: true, - type: 'classic', - }, - injectManifest: { - injectionPoint: undefined, - buildPlugins: { - vite: [swMessagesPlugin()], - }, - } - }), + devSwPlugin({ swSrc, swDest }), ], optimizeDeps: { // For unknown reasons, during vitest, vite will re-optimize the following @@ -221,6 +206,7 @@ export default defineConfig(async ({ mode, command }) => { devtools: {}, // enable devtools mode input: { main: 'index.html', + sw: 'src/sw.js', }, output: { entryFileNames(chunkInfo) {