diff --git a/README.md b/README.md index 5fa5c72c..309fdf55 100644 --- a/README.md +++ b/README.md @@ -291,6 +291,8 @@ module.exports = withPWA({ - default: `true` - customWorkerDir - customize the directory where `next-pwa` looks for a custom worker implementation to add to the service worker generated by workbox. For more information, check out the [custom worker example](https://github.com/shadowwalker/next-pwa/tree/master/examples/custom-ts-worker). - default: `worker` +- customWorkerWebpack - Function to customize the webpack configuration for bundling custom workers. Receives the configuration object with default settings and must return the modified one. + - default: `undefined` ### Other Options diff --git a/build-custom-worker.js b/build-custom-worker.js index 8d90ff6e..ad56c056 100644 --- a/build-custom-worker.js +++ b/build-custom-worker.js @@ -6,7 +6,7 @@ const webpack = require('webpack') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const TerserPlugin = require('terser-webpack-plugin') -const buildCustomWorker = ({ id, basedir, customWorkerDir, destdir, plugins, minify }) => { +const buildCustomWorker = ({ id, basedir, customWorkerDir, destdir, plugins, minify, webpack: customWebpack }) => { let workerDir = undefined if (fs.existsSync(path.join(basedir, customWorkerDir))) { @@ -36,7 +36,7 @@ const buildCustomWorker = ({ id, basedir, customWorkerDir, destdir, plugins, min const customWorkerEntry = customWorkerEntries[0] console.log(`> [PWA] Custom worker found: ${customWorkerEntry}`) console.log(`> [PWA] Build custom worker: ${path.join(destdir, name)}`) - webpack({ + const baseConfig = { mode: 'none', target: 'webworker', entry: { @@ -106,7 +106,15 @@ const buildCustomWorker = ({ id, basedir, customWorkerDir, destdir, plugins, min minimizer: [new TerserPlugin()] } : undefined - }).run((error, status) => { + }; + + let config = baseConfig; + if (typeof customWebpack === 'function') { + console.log('> [PWA] Using provided webpack config to build custom worker') + config = customWebpack(baseConfig); + } + + webpack(config).run((error, status) => { if (error || status.hasErrors()) { console.error(`> [PWA] Failed to build custom worker`) console.error(status.toString({ colors: true })) diff --git a/examples/custom-worker-webpack/.eslintrc.json b/examples/custom-worker-webpack/.eslintrc.json new file mode 100644 index 00000000..bffb357a --- /dev/null +++ b/examples/custom-worker-webpack/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/examples/custom-worker-webpack/README.md b/examples/custom-worker-webpack/README.md new file mode 100644 index 00000000..d52dea2e --- /dev/null +++ b/examples/custom-worker-webpack/README.md @@ -0,0 +1,68 @@ +# next-pwa - custom worker example + +[TOC] + +This example demonstrates how to use `next-pwa` plugin to turn a `next.js` based web application into a progressive web application easily. It demonstrates how to add custom worker code to the service worker generated by workbox. + +## New Method + +Simply create a `worker/index.js` and start implementing your service worker. `next-pwa` will detect this file automatically, and bundle the file into `dest` as `worker-*.js` using `webpack`. It's also automatically injected into `sw.js` generated. + +In this way, you get benefit of code splitting and size minimization automatically. Yes! `require` modules works! Yes! you can share codes between web app and the service worker! + +> - Typescript support for `worker/index.ts` current not supported. +> +> - In dev mode, `worker/index.js` is not watch, so it will not hot reload. + +### Custom Worker Directory + +You can customize the directory of your custom worker file by setting the `customWorkerDir` relative to the `basedir` in the `pwa` section of your `next.config.js`: + +```javascript +const withPWA = require('next-pwa')({ + customWorkerDir: 'serviceworker' + ... +}) + +module.exports = withPWA({ + // next.js config +}) +``` + +In this example, `next-pwa` would look for `serviceworker/index.js`. + +## Old Method (Still Works) + +Basically you need to create a file such as `worker.js` in `public` folder, then add an option `importScripts` to `pwa` object in `next.config.js`: + +```javascript +const withPWA = require('next-pwa')({ + dest: 'public', + importScripts: ['/worker.js'] +}) + +module.exports = withPWA({ + // next.js config +}) +``` + +Then service worker generated will automatically import your code and run it before other workbox code. + +## Usage + +[![Open in Gitpod](https://img.shields.io/badge/Open%20In-Gitpod.io-%231966D2?style=for-the-badge&logo=gitpod)](https://gitpod.io/#https://github.com/shadowwalker/next-pwa/) + +```bash +cd examples/custom-server +yarn install +yarn build +yarn start +``` + +## Recommend `.gitignore` + +``` +**/public/workbox-*.js +**/public/sw.js +**/public/worker-*.js +``` diff --git a/examples/custom-worker-webpack/next.config.js b/examples/custom-worker-webpack/next.config.js new file mode 100644 index 00000000..d005bd07 --- /dev/null +++ b/examples/custom-worker-webpack/next.config.js @@ -0,0 +1,17 @@ +const withPWA = require('next-pwa')({ + dest: 'public', + customWorkerWebpack(config) { + return { + ...config, + resolve: { + ...config.resolve, + alias: { + ...config.resolve.alias, + '@util': path.resolve(__dirname, './src'), + } + } + }; + } +}) + +module.exports = withPWA() diff --git a/examples/custom-worker-webpack/package.json b/examples/custom-worker-webpack/package.json new file mode 100644 index 00000000..bc9d6d14 --- /dev/null +++ b/examples/custom-worker-webpack/package.json @@ -0,0 +1,23 @@ +{ + "name": "next-pwa-example", + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "private": true, + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "babel-loader": "^8.2.5", + "next": "^12.2.5", + "next-pwa": "latest", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "eslint": "^8.22.0", + "eslint-config-next": "12.2.5" + } +} diff --git a/examples/custom-worker-webpack/pages/_document.js b/examples/custom-worker-webpack/pages/_document.js new file mode 100644 index 00000000..5b3d1c9f --- /dev/null +++ b/examples/custom-worker-webpack/pages/_document.js @@ -0,0 +1,50 @@ +import Document, { Html, Head, Main, NextScript } from 'next/document' + +const APP_NAME = 'next-pwa example' +const APP_DESCRIPTION = 'This is an example of using next-pwa plugin' + +class _Document extends Document { + static async getInitialProps(ctx) { + return await Document.getInitialProps(ctx) + } + + render() { + return ( + + + + + + + + + + + {/* TIP: set viewport head meta tag in _app.js, otherwise it will show a warning */} + {/* */} + + + + + + + +
+ + + + ) + } +} + +export default _Document diff --git a/examples/custom-worker-webpack/pages/index.js b/examples/custom-worker-webpack/pages/index.js new file mode 100644 index 00000000..b70feea0 --- /dev/null +++ b/examples/custom-worker-webpack/pages/index.js @@ -0,0 +1,12 @@ +import Head from 'next/head' + +const Index = () => ( + <> + + next-pwa example + +

Next.js + PWA = AWESOME!

+ +) + +export default Index diff --git a/examples/custom-worker-webpack/public/favicon.ico b/examples/custom-worker-webpack/public/favicon.ico new file mode 100644 index 00000000..e69327b5 Binary files /dev/null and b/examples/custom-worker-webpack/public/favicon.ico differ diff --git a/examples/custom-worker-webpack/public/icons/android-chrome-192x192.png b/examples/custom-worker-webpack/public/icons/android-chrome-192x192.png new file mode 100644 index 00000000..a78d2e98 Binary files /dev/null and b/examples/custom-worker-webpack/public/icons/android-chrome-192x192.png differ diff --git a/examples/custom-worker-webpack/public/icons/apple-touch-icon.png b/examples/custom-worker-webpack/public/icons/apple-touch-icon.png new file mode 100644 index 00000000..7127ada9 Binary files /dev/null and b/examples/custom-worker-webpack/public/icons/apple-touch-icon.png differ diff --git a/examples/custom-worker-webpack/public/icons/icon-512x512.png b/examples/custom-worker-webpack/public/icons/icon-512x512.png new file mode 100644 index 00000000..a2bf7fd1 Binary files /dev/null and b/examples/custom-worker-webpack/public/icons/icon-512x512.png differ diff --git a/examples/custom-worker-webpack/public/manifest.json b/examples/custom-worker-webpack/public/manifest.json new file mode 100644 index 00000000..81851325 --- /dev/null +++ b/examples/custom-worker-webpack/public/manifest.json @@ -0,0 +1,22 @@ +{ + "name": "next-pwa", + "short_name": "next-pwa", + "display": "standalone", + "orientation": "portrait", + "theme_color": "#FFFFFF", + "background_color": "#FFFFFF", + "start_url": "/", + "icons": [ + { + "src": "/icons/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any maskable" + }, + { + "src": "/icons/icon-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ] +} diff --git a/examples/custom-worker-webpack/util/index.js b/examples/custom-worker-webpack/util/index.js new file mode 100644 index 00000000..4e0103e0 --- /dev/null +++ b/examples/custom-worker-webpack/util/index.js @@ -0,0 +1,8 @@ +'use strict' + +module.exports = () => { + console.log('Hello from util.') + console.log('es6+ syntax test:') + let foo = { message: "working" } + console.log(foo?.message) +} diff --git a/examples/custom-worker-webpack/worker/index.js b/examples/custom-worker-webpack/worker/index.js new file mode 100644 index 00000000..d15044a7 --- /dev/null +++ b/examples/custom-worker-webpack/worker/index.js @@ -0,0 +1,20 @@ +'use strict' + +// To disable all workbox logging during development, you can set self.__WB_DISABLE_DEV_LOGS to true +// https://developers.google.com/web/tools/workbox/guides/configure-workbox#disable_logging +// +// self.__WB_DISABLE_DEV_LOGS = true + +const util = require('@util') + +util() + +// listen to message event from window +self.addEventListener('message', event => { + // HOW TO TEST THIS? + // Run this in your browser console: + // window.navigator.serviceWorker.controller.postMessage({command: 'log', message: 'hello world'}) + // OR use next-pwa injected workbox object + // window.workbox.messageSW({command: 'log', message: 'hello world'}) + console.log(event.data) +}) diff --git a/index.js b/index.js index cc936682..c3002278 100644 --- a/index.js +++ b/index.js @@ -53,6 +53,7 @@ module.exports = scope = basePath, customWorkerDir = 'worker', subdomainPrefix, // deprecated, use basePath in next.config.js instead + customWorkerWebpack = undefined, ...workbox } = pluginOptions @@ -107,7 +108,8 @@ module.exports = customWorkerDir, destdir: _dest, plugins: config.plugins.filter(plugin => plugin instanceof webpack.DefinePlugin), - minify: !dev + minify: !dev, + webpack: customWorkerWebpack }) if (!!customWorkerScriptName) {