feat: added watchWorkersInDev, added .webm to defaultCache's `s…

…tatic-video-assets` (#90) [bump]
DuCanhGH · Sep 19, 2023 · c24e175 · c24e175
1 parent 561289e
commit c24e175
Show file tree

Hide file tree

Showing 15 changed files with 225 additions and 168 deletions.
diff --git a/.changeset/soft-schools-battle.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<PluginOptions, "extendDefaultRuntimeCaching" | "dynamicStartUrl">
@@ -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}`