From 967270f529d2d5dfb5d2a53575450609449fbd80 Mon Sep 17 00:00:00 2001 From: Pascal Schilp Date: Thu, 2 Jul 2020 13:17:42 +0200 Subject: [PATCH] feat(building-rollup): allow customizing sw name (#1738) * feat(building-rollup): allow customizing sw name * refactor: reuse workboxs swDest * chore: guard for swDest * chore: use typeguard instead --- packages/building-rollup/README.md | 17 +++++++++++++++++ .../demo/js/rollup.spa-js-input.config.js | 3 +++ packages/building-rollup/src/createSpaConfig.js | 13 ++++++++++++- packages/building-rollup/src/types.d.ts | 6 +++++- packages/building-rollup/src/utils.js | 4 ++-- 5 files changed, 39 insertions(+), 4 deletions(-) diff --git a/packages/building-rollup/README.md b/packages/building-rollup/README.md index 4c115a7c..09f850ce 100644 --- a/packages/building-rollup/README.md +++ b/packages/building-rollup/README.md @@ -161,6 +161,23 @@ const baseConfig = createSpaConfig({ }); ``` +If you overwrite the workbox configuration and the `swDest` property of the workbox config, `injectServiceWorker` will automatically use the value of `swDest` in the service worker registration. Example: + +```js +const baseConfig = createSpaConfig({ + injectServiceWorker: true, + workbox: { + swDest: './my-sw.js', + }, +}); +``` + +Will result in: + +```js +navigator.serviceWorker.register('./my-sw.js'); +``` + ## Supporting older browsers The default build output works only on browsers that support modules. If you need to support older browsers, such as IE11 or the old Edge, you can set the `legacyBuild` option when you use the create config function. diff --git a/packages/building-rollup/demo/js/rollup.spa-js-input.config.js b/packages/building-rollup/demo/js/rollup.spa-js-input.config.js index a91412f8..eef5a537 100644 --- a/packages/building-rollup/demo/js/rollup.spa-js-input.config.js +++ b/packages/building-rollup/demo/js/rollup.spa-js-input.config.js @@ -4,6 +4,9 @@ const { createSpaConfig } = require('../../index.js'); const baseConfig = createSpaConfig({ developmentMode: false, injectServiceWorker: true, + workbox: { + swDest: './dist/foo.js', + }, }); module.exports = merge(baseConfig, { diff --git a/packages/building-rollup/src/createSpaConfig.js b/packages/building-rollup/src/createSpaConfig.js index ce899021..f706b503 100644 --- a/packages/building-rollup/src/createSpaConfig.js +++ b/packages/building-rollup/src/createSpaConfig.js @@ -16,6 +16,8 @@ const { defaultPolyfills } = require('./polyfills'); */ function createSpaConfig(options) { const basicConfig = createBasicConfig(options); + + /** @type {SpaOptions} */ const userOptions = merge( { html: true, @@ -27,9 +29,18 @@ function createSpaConfig(options) { ); let outputDir = basicConfig.output.dir; + let swPath; + if (typeof userOptions.workbox === 'boolean') { + swPath = './sw.js'; + } else { + swPath = userOptions.workbox.swDest.replace(`${outputDir}/`, ''); + } + + const applySw = htmlString => applyServiceWorkerRegistration(htmlString, swPath); + const htmlPlugin = pluginWithOptions(html, userOptions.html, { minify: !userOptions.developmentMode, - transform: [userOptions.injectServiceWorker && applyServiceWorkerRegistration].filter(isFalsy), + transform: [userOptions.injectServiceWorker && applySw].filter(isFalsy), inject: false, }); diff --git a/packages/building-rollup/src/types.d.ts b/packages/building-rollup/src/types.d.ts index a066dd67..fded7ea8 100644 --- a/packages/building-rollup/src/types.d.ts +++ b/packages/building-rollup/src/types.d.ts @@ -10,6 +10,10 @@ export interface BasicOptions { export interface SpaOptions extends BasicOptions { html?: boolean | object; polyfillsLoader?: boolean | object; - workbox?: boolean | object; + workbox?: boolean | WorkboxOptions; injectServiceWorker?: boolean; } + +interface WorkboxOptions { + swDest: string +} \ No newline at end of file diff --git a/packages/building-rollup/src/utils.js b/packages/building-rollup/src/utils.js index 6cc56e00..c5116716 100644 --- a/packages/building-rollup/src/utils.js +++ b/packages/building-rollup/src/utils.js @@ -41,7 +41,7 @@ function pluginWithOptions(plugin, userConfig, defaultConfig, ...otherParams) { * @param {string} htmlString * @returns {string} */ -function applyServiceWorkerRegistration(htmlString) { +function applyServiceWorkerRegistration(htmlString, swPath) { const documentAst = parse(htmlString); const body = query(documentAst, predicates.hasTagName('body')); const swRegistration = createScript( @@ -50,7 +50,7 @@ function applyServiceWorkerRegistration(htmlString) { if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker - .register('./sw.js') + .register('${swPath}') .then(function() { console.log('ServiceWorker registered.'); })