diff --git a/.changeset/soft-schools-battle.md b/.changeset/soft-schools-battle.md
new file mode 100644
index 00000000..52e6ae76
--- /dev/null
+++ b/.changeset/soft-schools-battle.md
@@ -0,0 +1,7 @@
+---
+"@ducanh2912/next-pwa": minor
+---
+
+feat: added `watchWorkersInDev`
+
+- Note that this feature is disabled by default, and can be enabled by setting `PluginOptions.watchWorkersInDev` to `true`. After a change is detected and `webpack` rebuilds the custom worker, you have to reload the page for it to take effect.
diff --git a/.changeset/weak-tables-roll.md b/.changeset/weak-tables-roll.md
new file mode 100644
index 00000000..883c5b29
--- /dev/null
+++ b/.changeset/weak-tables-roll.md
@@ -0,0 +1,7 @@
+---
+"@ducanh2912/next-pwa": minor
+---
+
+feat: added `.webm` to `defaultCache`'s `static-video-assets`
+
+- I think it'd be nice to support this extension as well, and this shouldn't cause a breaking change (if there is another entry that matches `.webm` files in `workboxOptions.runtimeCaching` and `extendDefaultRuntimeCaching`, then Workbox will still pick that entry).
diff --git a/.github/ISSUE_TEMPLATE/2-feature-request.yaml b/.github/ISSUE_TEMPLATE/2-feature-request.yaml
index e6896611..1161683c 100644
--- a/.github/ISSUE_TEMPLATE/2-feature-request.yaml
+++ b/.github/ISSUE_TEMPLATE/2-feature-request.yaml
@@ -2,6 +2,8 @@ name: Feature request
description: Create a feature request
title: "[Feature request]: "
labels: ["feature-request", "triage"]
+assignees:
+ - DuCanhGH
body:
- type: markdown
attributes:
diff --git a/docs/content/next-pwa/configuring.mdx b/docs/content/next-pwa/configuring.mdx
index 72bf5696..bae523d6 100644
--- a/docs/content/next-pwa/configuring.mdx
+++ b/docs/content/next-pwa/configuring.mdx
@@ -95,6 +95,8 @@ export default withPWA({
- `reloadOnOnline` — Reload the app when it has gone back online.
+- `watchWorkersInDev` — Watch certain workers for file changes in development mode. This currently includes the custom worker.
+
## Other options
`next-pwa` uses `workbox-webpack-plugin` under the hood, other options can be found in the documentation for [GenerateSW](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/#generatesw-plugin) and
diff --git a/examples/custom-worker/shared/utils/index.ts b/examples/custom-worker/shared/utils/index.ts
index 3c0c1ef9..031cf0f6 100644
--- a/examples/custom-worker/shared/utils/index.ts
+++ b/examples/custom-worker/shared/utils/index.ts
@@ -1,5 +1,5 @@
-export function util(message: string) {
- console.log("Hello from util.");
+export function utils(message: string) {
+ console.log("Hello from utils.");
console.log("es6+ syntax test:");
// eslint-disable-next-line prefer-const
let foo = { message: message };
diff --git a/examples/custom-worker/worker/index.ts b/examples/custom-worker/worker/index.ts
index eb91ac41..49d87dc4 100644
--- a/examples/custom-worker/worker/index.ts
+++ b/examples/custom-worker/worker/index.ts
@@ -1,5 +1,5 @@
import { message } from "@shared/constants.ts";
-import { util } from "@shared/utils/index.ts";
+import { utils } from "@shared/utils/index.ts";
declare const self: ServiceWorkerGlobalScope;
@@ -8,7 +8,7 @@ declare const self: ServiceWorkerGlobalScope;
//
// self.__WB_DISABLE_DEV_LOGS = true
-util(message);
+utils(message);
// listen to message event from window
self.addEventListener("message", (event) => {
diff --git a/packages/next-pwa/src/cache.ts b/packages/next-pwa/src/cache.ts
index a5fe24eb..a4af8a99 100644
--- a/packages/next-pwa/src/cache.ts
+++ b/packages/next-pwa/src/cache.ts
@@ -81,7 +81,7 @@ const defaultCache: RuntimeCaching[] = [
},
},
{
- urlPattern: /\.(?:mp4)$/i,
+ urlPattern: /\.(?:mp4|webm)$/i,
handler: "CacheFirst",
options: {
rangeRequests: true,
diff --git a/packages/next-pwa/src/index.ts b/packages/next-pwa/src/index.ts
index 3f96c285..d2a9795d 100644
--- a/packages/next-pwa/src/index.ts
+++ b/packages/next-pwa/src/index.ts
@@ -87,6 +87,7 @@ const withPWAInit = (
extendDefaultRuntimeCaching = false,
swcMinify = nextConfig.swcMinify ?? nextDefConfig?.swcMinify ?? false,
browserslist = "chrome >= 56",
+ watchWorkersInDev = false,
} = pluginOptions;
if (typeof nextConfig.webpack === "function") {
@@ -150,6 +151,7 @@ const withPWAInit = (
setDefaultContext("shouldMinify", !dev);
setDefaultContext("useSwcMinify", swcMinify);
setDefaultContext("browserslist", browserslist);
+ setDefaultContext("devWatchWorkers", watchWorkersInDev);
const _dest = path.join(options.dir, dest);
const _cwdest = path.join(options.dir, customWorkerDest);
diff --git a/packages/next-pwa/src/resolve-workbox-plugin.ts b/packages/next-pwa/src/resolve-workbox-plugin.ts
index a749e606..eea55f74 100644
--- a/packages/next-pwa/src/resolve-workbox-plugin.ts
+++ b/packages/next-pwa/src/resolve-workbox-plugin.ts
@@ -9,7 +9,7 @@ import { resolveRuntimeCaching } from "./resolve-runtime-caching.js";
import type { WorkboxCommon } from "./resolve-workbox-common.js";
import type { PluginOptions } from "./types.js";
import { isInjectManifestConfig, overrideAfterCalledMethod } from "./utils.js";
-import { NextPWAContext } from "./webpack-builders/context.js";
+import { nextPWAContext } from "./webpack-builders/context.js";
type PluginCompleteOptions = Required<
Pick
@@ -40,17 +40,17 @@ export const resolveWorkboxPlugin = ({
hasFallbacks: boolean;
} & PluginCompleteOptions) => {
if (!workboxOptions.babelPresetEnvTargets) {
- switch (typeof NextPWAContext.browserslist) {
+ switch (typeof nextPWAContext.browserslist) {
case "string":
- workboxOptions.babelPresetEnvTargets = [NextPWAContext.browserslist];
+ workboxOptions.babelPresetEnvTargets = [nextPWAContext.browserslist];
break;
case "object": {
- if (Array.isArray(NextPWAContext.browserslist)) {
- workboxOptions.babelPresetEnvTargets = NextPWAContext.browserslist;
+ if (Array.isArray(nextPWAContext.browserslist)) {
+ workboxOptions.babelPresetEnvTargets = nextPWAContext.browserslist;
} else {
workboxOptions.babelPresetEnvTargets = [];
for (const [browser, minimumVersion] of Object.entries(
- NextPWAContext.browserslist
+ nextPWAContext.browserslist
)) {
workboxOptions.babelPresetEnvTargets.push(
`${browser} >= ${minimumVersion}`
diff --git a/packages/next-pwa/src/types.ts b/packages/next-pwa/src/types.ts
index e8c8c055..c12e07c3 100644
--- a/packages/next-pwa/src/types.ts
+++ b/packages/next-pwa/src/types.ts
@@ -4,59 +4,66 @@ import type { BrowserslistOptions, WorkboxTypes } from "./private-types.js";
export interface PluginOptions {
/**
- * Whether `next-pwa` should be disabled.
+ * Cache every `` and `` on frontend navigation.
+ * Requires `cacheOnFrontEndNav` to be enabled.
* @default false
*/
- disable?: boolean;
+ aggressiveFrontEndNavCaching?: boolean;
/**
- * Allow this plugin to automatically register the service worker for you. Set
- * this to `false` if you want to register the service worker yourself, which
- * can be done by running `window.workbox.register()` in
- * `componentDidMount` or `useEffect`.
+ * Configure supported browsers using Browserslist.
+ * @default "chrome >= 56"
+ */
+ browserslist?: BrowserslistOptions;
+ /**
+ * One or more specifiers used to exclude assets from the precache manifest.
+ * This is interpreted following the same rules as Webpack's standard `exclude`
+ * option. Relative to `.next/static` or your custom build folder. Defaults to
+ * [].
* @example
- * ```tsx
- * // app/register-pwa.tsx
- * "use client";
- * import { useEffect } from "react";
- * import type { Workbox } from "workbox-window";
- *
- * declare global {
- * interface Window {
- * workbox: Workbox;
- * }
- * }
- *
- * export default function RegisterPWA() {
- * useEffect(() => {
- * if ("serviceWorker" in navigator && window.workbox !== undefined) {
- * window.workbox.register();
- * }
- * }, []);
- * return <>;
- * }
- *
- * // app/layout.tsx
- * import RegisterPWA from "./register-pwa";
- *
- * export default function RootLayout({
- * children,
- * }: {
- * children: React.ReactNode;
- * }) {
- * return (
- *
- *
- *
- *
- * {children}
- *
- *
- * );
- * }
+ * ```ts
+ * [/chunks\/images\/.*$/];
* ```
+ * @default
+ * ```ts
+ * [];
+ * ```
+ */
+ buildExcludes?: GenerateSWConfig["exclude"];
+ /**
+ * Enable additional route caching when users navigate through pages with
+ * `next/link`. This improves user experience in some cases but it
+ * also adds some overhead because of additional network calls.
+ * @default false
+ */
+ cacheOnFrontEndNav?: boolean;
+ /**
+ * Turn on caching for the start URL. [Discussion on use cases for this
+ * option](https://github.com/shadowwalker/next-pwa/pull/296#issuecomment-1094167025)
* @default true
*/
- register?: boolean;
+ cacheStartUrl?: boolean;
+ /**
+ * The output directory of the custom worker.
+ * @default dest
+ */
+ customWorkerDest?: string;
+ // NEXT-PWA-TODO(major): remove this option
+ /**
+ * @deprecated renamed to `customWorkerSrc`, to be removed next major version.
+ */
+ customWorkerDir?: string;
+ /**
+ * The custom worker's output filename prefix.
+ * @default "worker"
+ */
+ customWorkerPrefix?: string;
+ /**
+ * Change the directory in which `next-pwa` looks for a custom worker
+ * implementation to import into the service worker. Relative to the root or `src`
+ * directory.
+ * @default "worker"
+ */
+ customWorkerSrc?: string;
// NEXT-PWA-TODO(major): change this option's default to `"public"`
/**
* Set the output directory for service worker. Relative to Next.js's root
@@ -66,16 +73,10 @@ export interface PluginOptions {
*/
dest?: string;
/**
- * The service worker's output filename.
- * @default "/sw.js"
- */
- sw?: string;
- /**
- * Turn on caching for the start URL. [Discussion on use cases for this
- * option](https://github.com/shadowwalker/next-pwa/pull/296#issuecomment-1094167025)
- * @default true
+ * Whether `next-pwa` should be disabled.
+ * @default false
*/
- cacheStartUrl?: boolean;
+ disable?: boolean;
/**
* If your start URL returns different HTML documents under different states
* (such as logged in and not logged in), this should be set to true if you
@@ -93,30 +94,12 @@ export interface PluginOptions {
*/
dynamicStartUrlRedirect?: string;
/**
- * An array of glob pattern strings to exclude files in the public folder from
- * being precached. By default, this plugin excludes `public/noprecache`.
- * Note that you have to add `!` before each glob pattern for it to work.
- * @example
- * ```ts
- * ["!img/super-large-image.jpg", "!fonts/not-used-fonts.otf"];
- * ```
- */
- publicExcludes?: string[];
- /**
- * One or more specifiers used to exclude assets from the precache manifest.
- * This is interpreted following the same rules as Webpack's standard `exclude`
- * option. Relative to `.next/static` or your custom build folder. Defaults to
- * [].
- * @example
- * ```ts
- * [/chunks\/images\/.*$/];
- * ```
- * @default
- * ```ts
- * [];
- * ```
+ * Extend the default `runtimeCaching` array when `runtimeCaching` is specified.
+ * Entries having the same `cacheName` as any entry in the default `runtimeCaching`
+ * array will override it.
+ * @default false
*/
- buildExcludes?: GenerateSWConfig["exclude"];
+ extendDefaultRuntimeCaching?: boolean;
/**
* Configure routes to be precached so that they can be used as a fallback when
* fetching a resource from both the cache and the network fails. If you just need
@@ -124,77 +107,105 @@ export interface PluginOptions {
*/
fallbacks?: FallbackRoutes;
/**
- * Enable additional route caching when users navigate through pages with
- * `next/link`. This improves user experience in some cases but it
- * also adds some overhead because of additional network calls.
- * @default false
- */
- cacheOnFrontEndNav?: boolean;
- /**
- * Cache every `` and `` on frontend navigation.
- * Requires `cacheOnFrontEndNav` to be enabled.
- * @default false
+ * An array of glob pattern strings to exclude files in the public folder from
+ * being precached. By default, this plugin excludes `public/noprecache`.
+ * Note that you have to add `!` before each glob pattern for it to work.
+ * @example
+ * ```ts
+ * ["!img/super-large-image.jpg", "!fonts/not-used-fonts.otf"];
+ * ```
*/
- aggressiveFrontEndNavCaching?: boolean;
+ publicExcludes?: string[];
/**
* URL scope for PWA. Set to `/foo/` so that paths under `/foo/` are PWA while others
* are not.
* @default nextConfig.basePath
*/
scope?: string;
- // NEXT-PWA-TODO(major): remove this option
- /**
- * @deprecated renamed to `customWorkerSrc`, to be removed next major version.
- */
- customWorkerDir?: string;
/**
- * Change the directory in which `next-pwa` looks for a custom worker
- * implementation to import into the service worker. Relative to the root or `src`
- * directory.
- * @default "worker"
+ * The service worker's output filename.
+ * @default "/sw.js"
*/
- customWorkerSrc?: string;
+ sw?: string;
/**
- * The output directory of the custom worker.
- * @default dest
+ * Use [`swc`](https://swc.rs) to minify the custom worker, the fallback worker, and more.
+ * @default nextConfig.swcMinify
*/
- customWorkerDest?: string;
+ swcMinify?: boolean;
/**
- * The custom worker's output filename prefix.
- * @default "worker"
+ * Allow this plugin to automatically register the service worker for you. Set
+ * this to `false` if you want to register the service worker yourself, which
+ * can be done by running `window.workbox.register()` in
+ * `componentDidMount` or `useEffect`.
+ * @example
+ * ```tsx
+ * // app/register-pwa.tsx
+ * "use client";
+ * import { useEffect } from "react";
+ * import type { Workbox } from "workbox-window";
+ *
+ * declare global {
+ * interface Window {
+ * workbox: Workbox;
+ * }
+ * }
+ *
+ * export default function RegisterPWA() {
+ * useEffect(() => {
+ * if ("serviceWorker" in navigator && window.workbox !== undefined) {
+ * window.workbox.register();
+ * }
+ * }, []);
+ * return <>;
+ * }
+ *
+ * // app/layout.tsx
+ * import RegisterPWA from "./register-pwa";
+ *
+ * export default function RootLayout({
+ * children,
+ * }: {
+ * children: React.ReactNode;
+ * }) {
+ * return (
+ *
+ *
+ *