A Swiss Army knife for service workers.
Home Page: https://serwist.pages.dev
License: MIT License
Serwist is a collection of JavaScript libraries for progressive web apps.
It is a fork of Workbox that came to be due to the its development being stagnated. Most of the prior work was done by Google LLC's team and the community.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
^8.40
@serwist/next
none
Add a custom webpack configuration to your nextjs config file
This is my webpack config:
webpack: (config) => {
//? zlib-sync
config.resolve.fallback = {
"zlib-sync": false,
"utf-8-validate": false,
bufferutil: false,
}
return config
},I need it due to a problem with of another package and next.js (discord.js)
But your package completly override this so the build doesn't work anymore
Take my config before the add your own
No response
No response
import { defaultCache } from "@serwist/next/browser"; to configure the runtimeCache.None
https://www.da.nl/ (has since been fixed though)
This part is causing issues, if I comment this out in the defaultCache, it starts to work:
{
urlPattern: ({ sameOrigin }) => !sameOrigin,
handler: 'NetworkFirst',
options: {
cacheName: 'cross-origin',
expiration: {
maxEntries: 32,
maxAgeSeconds: 60 * 60,
},
networkTimeoutSeconds: 10,
},
},
I'm not even sure if you'd want to have third party scripts loaded on the site as there is a very low chance that it works offline and the maxAgeSeconds doesn't really add anything besides default browser cache?
For now we've commented out the caching of cross origin scripts as we're not sure what the value is in this case. But I guess it should at least be opt-in.
No response
@serwist/next
NA
yarn init -yyarn set version berryyarn add next react react-dom @serwist/next @serwist/sw webpackpages foldernext.config.mjsimport withPWA from '@serwist/next'
const isDev = process.env.NODE_ENV === 'development'
const nextConfig = {}
export default withPWA({
dest: 'public',
disable: isDev,
cacheOnFrontEndNav: true,
swSrc: 'app/sw.js',
swDest: 'public/sw.js'
})(nextConfig)yarn next build ▲ Next.js 14.0.4
- Environments: .env
✓ (serwist) Compiling for server...
✓ (serwist) Compiling for server...
✓ (serwist) Compiling for client (static)...
○ (serwist) Service worker: C:\<PROJECT_NAME>\public\sw.js
○ (serwist) URL: /sw.js
○ (serwist) Scope: /
Failed to compile.
Please check your InjectManifest plugin configuration:
[WebpackInjectManifest] 'dest' property is not expected to be here. Did you mean property 'swDest'?
Cannot read properties of undefined (reading 'source')The build phase fails with error:
Please check your InjectManifest plugin configuration:
[WebpackInjectManifest] 'dest' property is not expected to be here. Did you mean property 'swDest'?
Cannot read properties of undefined (reading 'source')The error should be related to InjectManifest of @serwist/webpack-plugin.
Build is completed with no errors
No response
No response
package.json:
{
"dependencies": {
"@aws-crypto/sha256-browser": "^5.2.0",
"@babel/preset-react": "^7.23.3",
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.7.17",
"@hotjar/browser": "^1.0.9",
"@sentry/nextjs": "^7.82.0",
"@sentry/react": "^7.82.0",
"@sentry/tracing": "^7.82.0",
"@serwist/next": "^8.4.4",
"@serwist/sw": "^8.4.4",
"@types/jest": "^29.5.11",
"colors-convert": "^1.4.1",
"core-js": "^3.33.3",
"framer-motion": "^10.16.5",
"ga-gtag": "^1.2.0",
"intersection-observer": "^0.12.2",
"js-base64": "^3.7.5",
"js-xxhash": "^3.0.1",
"lodash": "^4.17.21",
"lodash.groupby": "^4.6.0",
"lodash.throttle": "^4.1.1",
"lozad": "^1.16.0",
"lzwcompress": "^1.1.0",
"md5": "^2.3.0",
"mobx": "^6.12.0",
"mobx-react": "^9.1.0",
"mobx-state-tree": "^5.4.0",
"next": "^14.0.3",
"next-cookies": "^2.0.3",
"next-themes": "^0.2.1",
"omit-deep-lodash": "^1.1.7",
"overlayscrollbars": "^2.4.5",
"overlayscrollbars-react": "^0.5.3",
"pako": "^2.1.0",
"rc-slider": "^10.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-gtm-module": "^2.0.11",
"react-hook-form": "^7.48.2",
"react-hotkeys-hook": "^4.4.1",
"react-input-slider": "^6.0.1",
"react-query": "^3.39.3",
"regenerator-runtime": "^0.14.0",
"swr": "^2.2.4",
"use-onclickoutside": "^0.4.1",
"usehooks-ts": "^2.9.1",
"uuid": "^9.0.1"
},
"devDependencies": {
"@babel/eslint-parser": "^7.23.3",
"@babel/preset-env": "^7.23.3",
"@babel/preset-typescript": "^7.23.3",
"@next/eslint-plugin-next": "^14.0.3",
"@playwright/test": "^1.40.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^14.2.0",
"@types/lodash.throttle": "^4.1.9",
"@types/node": "^20.10.0",
"@types/react": "18.2.39",
"@types/react-dom": "18.2.17",
"@types/react-modal": "^3.16.3",
"@types/styled-components": "^5.1.32",
"@types/testing-library__jest-dom": "^6.0.0",
"@typescript-eslint/eslint-plugin": "^6.13.1",
"@typescript-eslint/parser": "^6.13.1",
"autoprefixer": "10.4.16",
"babel-jest": "^29.7.0",
"babel-plugin-transform-dynamic-import": "^2.1.0",
"eslint": "8.54.0",
"eslint-config-airbnb-typescript": "^17.1.0",
"eslint-config-next": "^14.0.3",
"eslint-config-prettier": "^9.0.0",
"eslint-import-resolver-node": "^0.3.9",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-import": "^2.29.0",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-unicorn": "^49.0.0",
"eslint-plugin-unused-imports": "^3.0.0",
"eslint-webpack-plugin": "^4.0.1",
"husky": "^8.0.3",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"lint-staged": "^15.1.0",
"postcss": "8.4.31",
"prettier": "^3.1.0",
"sass": "^1.69.5",
"standard-version": "^9.5.0",
"stylelint": "^15.11.0",
"stylelint-config-standard": "^34.0.0",
"stylelint-scss": "^5.3.1",
"tailwindcss": "3.3.5",
"ts-jest": "^29.1.2",
"turbo": "^1.10.16",
"typedoc": "^0.25.4",
"typedoc-plugin-markdown": "^3.17.1",
"typescript": "^5.3.3"
},
}next.config.js:
const withSerwist = require("@serwist/next").default({
swSrc: "src/lib/pwa/sw.ts",
swDest: "public/sw.js",
scope: "/",
maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
reloadOnOnline: false,
})sw.ts:
installSerwist({
precacheEntries: self.__SW_MANIFEST,
skipWaiting: true,
clientsClaim: true,
navigationPreload: true,
runtimeCaching: [
{
urlPattern: /https:\/\/(cdn\..*\.ourdomain
\.com).*/,
handler: 'CacheFirst',
options: {}, // needed to avoid serwist crash
},
...defaultCache],
})First of all, thank you for this library. We really appreciate your work and efforts.
My problem: we have a project in production since 8 months, using Next 14.
Three days ago we deployed a version that implements @Serwist/next.
We noticed a HUGE spike in server requests (20X at some point).
CPU usage of our nodes increased 2/3X, same for out bandwidth usage.
No particular Serwist configuration. All the images and assets (except favicon and fonts) are in on a CDN.
We were expecting the opposite, less server load in general.
Is there any way of reducing the requests Serwist does on the server?
No response
No response
| package | version |
|---|---|
| @serwist/next | ^8.4.0 |
| @serwist/precaching | ^8.4.0 |
| @serwist/sw | ^8.4.0 |
| next | ^14.0.4 |
| next-contentlayer | ^0.3.4 |
| contentlayer | ^0.3.4 |
None
https://github.com/marcofranssen/nextjs-blog/tree/switch-to-serwist
Create a nextjs project using contentlayer.
As soon I switch to serwist from @ducanh2912/next-pwa it fails. I tried both next.config.js and next.config.mjs approaches.
When using the .mjs approach I'm seeing following error:
$ pnpm dev
> [email protected] dev /Users/marco/code/priv/nextjs-blog
> next dev
▲ Next.js 14.0.4
- Local: http://localhost:3000
- Environments: .env
○ (serwist) PWA support is disabled.
○ (serwist) PWA support is disabled.
✓ Ready in 6.8s
Contentlayer config change detected. Updating type definitions and data...
Generated 76 documents in .contentlayer
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@contentlayer/core/dist/dynamic-build.js for build dependencies failed at 'import(`file://${compiledConfigPath}`)'.
<w> Build dependencies behind this expression are ignored and might cause incorrect cache invalidation.
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@contentlayer/core/dist/getConfig/index.js for build dependencies failed at 'import(`file://${modulePath}?x=${Date.now()}`)'.
<w> Build dependencies behind this expression are ignored and might cause incorrect cache invalidation.
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Parsing of /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@contentlayer/core/dist/generation/generate-dotpkg.js for build dependencies failed at 'import(filePathJoin(generatedPkgPath, 'generated', 'index.mjs'))'.
<w> Build dependencies behind this expression are ignored and might cause incorrect cache invalidation.
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'markdown-wasm/dist/markdown.node.js' in '/Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@contentlayer/core/dist/markdown'
<w> while resolving 'markdown-wasm/dist/markdown.node.js' in /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@contentlayer/core/dist/markdown as file
<w> at resolve esm file markdown-wasm/dist/markdown.node.js
<w> at file dependencies /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@contentlayer/core/dist/markdown/markdown.js
<w> at file /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@contentlayer/core/dist/markdown/markdown.js
<w> at resolve esm file ./markdown/markdown.js
<w> at file dependencies /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@contentlayer/core/dist/index.js
<w> at file /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected][email protected]/node_modules/@contentlayer/core/dist/index.js
<w> at resolve esm file @contentlayer/core
<w> at file dependencies /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next-contentlayer/dist/plugin.js
<w> at file /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next-contentlayer/dist/plugin.js
<w> at resolve esm file ./plugin.js
<w> at file dependencies /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next-contentlayer/dist/index.js
<w> at file /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/next-contentlayer/dist/index.js
<w> at resolve esm file next-contentlayer
<w> at file dependencies /Users/marco/code/priv/nextjs-blog/next.config.mjs
<w> at file /Users/marco/code/priv/nextjs-blog/next.config.mjs
<w> at resolve commonjs /Users/marco/code/priv/nextjs-blog/next.config.mjsSee here the next.config.mjs.
import { withContentlayer } from "next-contentlayer";
import withSerwistInit from "@serwist/next";
const withSerwist = withSerwistInit({
swSrc: "app/sw.ts",
swDest: "public/sw.js",
disable: process.env.NODE_ENV === "development",
});
export default withContentlayer(
withSerwist({
…
})
);I also tried using a regular next.config.js.
const withSerwist = require("@serwist/next").default({
swSrc: "app/sw.ts",
swDest: "public/sw.js",
disable: process.env.NODE_ENV === "development",
});
const { withContentlayer } = require("next-contentlayer");
module.exports = withContentlayer(
withSerwist({
…
})
);This results in following error.
pnpm dev
> [email protected] dev /Users/marco/code/priv/nextjs-blog
> next dev
/Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected]/node_modules/@serwist/build/dist/index.cjs:65
glob pattern strings.`,
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/[email protected]/node_modules/stringify-object/index.js from /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected]/node_modules/@serwist/build/dist/index.cjs not supported.
Instead change the require of index.js in /Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected]/node_modules/@serwist/build/dist/index.cjs to a dynamic import() which is available in all CommonJS modules.
at mod.require (/Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/server/require-hook.js:65:28)
at Object.<anonymous> (/Users/marco/code/priv/nextjs-blog/node_modules/.pnpm/@[email protected]/node_modules/@serwist/build/dist/index.cjs:13:23) {
code: 'ERR_REQUIRE_ESM'
}
Node.js v20.10.0
ELIFECYCLE Command failed with exit code 1.The project just compiles and works like before when using @ducanh2912/next-pwa.
No response
My repo is private, but I can add a maintainer of the project to troubleshoot, also happy to provide more information if you tell me what debug steps to take to provide more details.
Node.js: 20.11
Next.js: 14.04
Used packages:
@serwist/sw@serwist/next@serwist/precaching@serwist/buildTested all from v8.3.0 to v8.4.2 (some versions had the issue mentioned by #34).
@serwist/next
NOTE: I couldn't reproduce the issue on the provided sandbox.
Here is some context in case it helps:
My app is pretty complex and has a lot of modules and abstractions. The take is, I have localizations files in JSON formats that are provided to the client by a provider via a server component to handle translations on the client side. These JSON files are added to the built assets at the end, are thus are part of the client code. When building the app, Serwist is complaining about these file because webpack fails to parse the files (see screenshots below).
If JSON modules are imported and are part of the build, webpack parser fails. From my research online, the issue may have to do with webpack JSON loader.
BTW, "(serwist) Compiling for server" is finishing successfully, but "Compiling for client (static)..." is failing.
The app should be built as expected (when disabling Serwist via configuration, the app is built successfully)
No response
I got error Cannot find package 'webpack' and I assume you've missed to add npm i -D webpack in the installation part of getting started, since I've found difference on the former package(@ducanh2912/next-pwa - ex npm i @ducanh2912/next-pwa && npm i -D webpack).
If you think this is true, maybe I can add several code lines in the docs thorough PR.
Next.js 14.
No particular configuration.
@serwist/next
Unfortunately it is a private repository.
Open a serwist website in Safari 14 or below and check the developer console.
We've noticed that after deploying @Serwist/next we start getting frontend reports of errors like this
SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list.
After checking it, we realized it was only happening with MacOS X 10.15.6 and browser Apple Mail 605.1.15.
The error appeared in main.js and it was on the Serwist part.
The website doesn't load because of this.
After doing some research in the code, the problem comes from parts of the code like
class SerwistEvent {
type;
target;
sw;
originalEvent;
isExternal;
...
}or
_eventListenerRegistry = new Map();
...
}
We've been able to fix it using next-transpile-modules, something like this
const withTM = require('next-transpile-modules')(['@serwist/window']);
/** @type {import('next').NextConfig} */
module.exports = withTM(withSerwist({Of course, it is nice that it works with this workaround, but wanted to share the problem in case you weren't aware of it.
To be able to load the website.
No response
No response
With Next 14.03
├─┬ @pyodide/[email protected] overridden
│ └─┬ [email protected]
│ └── [email protected] deduped
├─┬ @serwist/[email protected]
│ └─┬ @serwist/[email protected]
│ └── [email protected] deduped
└─┬ [email protected]
└─┬ [email protected]
└─┬ [email protected]
└── [email protected] deduped
@serwist/next
N/A
//next.config.mjs
import { PyodidePlugin } from "@pyodide/webpack-plugin"
import withSerwistInit from "@serwist/next"
const withSerwist = withSerwistInit({
swSrc: "app/sw.ts",
swDest: "public/sw.js",
})
/** @type {import('next').NextConfig} */
export default withSerwist({
webpack: (config, { isServer }) => {
if (!isServer) {
config.plugins.push(new PyodidePlugin())
}
if (isServer) {
config.externals = ["pyodide", ...(config.externals || [])]
}
return config
},
})npm run dev for it to fail with logsTypeError: The 'compilation' argument must be an instance of Compilation
at NormalModule.getCompilationHooks (/Users/gabriel/dev/colorchordsapp/node_modules/webpack/lib/NormalModule.js:241:10)
at file:///Users/gabriel/dev/colorchordsapp/node_modules/@pyodide/webpack-plugin/plugin.mjs:314:99
at Hook.eval [as call] (eval at create (/Users/gabriel/dev/colorchordsapp/node_modules/next/dist/compiled/webpack/bundle5.js:13:28645), <anonymous>:122:1)
at Hook.CALL_DELEGATE [as _call] (/Users/gabriel/dev/colorchordsapp/node_modules/next/dist/compiled/webpack/bundle5.js:13:25915)
at Compiler.newCompilation (/Users/gabriel/dev/colorchordsapp/node_modules/next/dist/compiled/webpack/bundle5.js:28:147694)
at /Users/gabriel/dev/colorchordsapp/node_modules/next/dist/compiled/webpack/bundle5.js:28:148481
at Hook.eval [as callAsync] (eval at create (/Users/gabriel/dev/colorchordsapp/node_modules/next/dist/compiled/webpack/bundle5.js:13:28867), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/gabriel/dev/colorchordsapp/node_modules/next/dist/compiled/webpack/bundle5.js:13:26021)
at Compiler.compile (/Users/gabriel/dev/colorchordsapp/node_modules/next/dist/compiled/webpack/bundle5.js:28:148407)
at /Users/gabriel/dev/colorchordsapp/node_modules/next/dist/compiled/webpack/bundle5.js:28:489605
npm dedupe to rerun and see same errorApologies I'm new to webpack configurations and webworkers but I'm trying to use Serwist to handle the caching of Pyodide's large wasm .whl/.zip files it needs to serve to the client.
Notably Pyodide's support of Next.js and similar frameworks is circumstantial at best but I've gotten it to work well with enough fiddling. Pyodide team provides a webpack-plugin for itself due to an errors like such that will happen:
Module build failed: UnhandledSchemeError: Reading from "node:child_process" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
Import trace for requested module:
node:child_process
./node_modules/pyodide/pyodide.mjs
./scripts/pyodide/PyodideManager.ts
./scripts/hooks/usePyodide.ts
./inputs/providers/CompanionContextProvider/CompanionContextProvider.tsx
./inputs/providers/CompanionContextProvider/index.tsx
./components/LiveCompanion/LiveCompanionView/LiveCompanionView.tsx
I'm not sure if someone here would know if this is something that can be worked around. Thanks in advance.
npm run dev starts up without issue
No response
No response
Working on Windows with latest versions of nextjs and nodejs
I m using the import type { PrecacheEntry } from '@serwist/precaching' and there its written that I have to Change the attribute's name to your 'injectionPoint'. And Its throwing error Cannot find name 'ServiceWorkerGlobalScope'. Did you mean 'ServiceWorkerGlobalScopeEventMap'?ts(2552). I m new to PWA and Its my 1st time setting up this, so I don't know what to do. Will be really helpful, if anyone can explain what exactly I have to do ??
Dont Know
No response
No response
Next v14 now allows the manifest file to be in the root of /app folder instead of /public https://nextjs.org/docs/app/api-reference/file-conventions/metadata/manifest
"@serwist/next": "^8.4.4",
"@serwist/precaching": "^8.4.4",
"@serwist/sw": "^8.4.4",
@serwist/next
None
next.config.(m)js:
swUrl: "/app/sw.js",
scope: "/app/",
Then access to /.
If I set scope to /app/ and swUrl to /app/sw.js in next.config.(m)js, the sw.js is installed when I opened the page /.
sw.js is not installed on a page out of scope.
Setting register to false in next.config.(m)js and calling window.serwist.register() manually is a workaround.
@serwist/next
It would be good to use offline page fallback support
https://github.com/shadowwalker/next-pwa?tab=readme-ov-file#offline-fallbacks
How do we setup service worker for sub domains
Can you update with an example for sub domain like app.acme.com
Need a document to showcase on sub domains.
No response
No response
{
"name": "roost",
"version": "0.2.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-brands-svg-icons": "^6.2.0",
"@fortawesome/free-regular-svg-icons": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@serwist/next": "^8.4.0",
"@serwist/precaching": "^8.4.0",
"@serwist/sw": "^8.4.0",
"isomorphic-unfetch": "^3.1.0",
"js-cookie": "^3.0.1",
"luxon": "^3.3.0",
"moment": "^2.29.4",
"next": "^14.0.4",
"next-cookies": "^2.0.3",
"normalize.css": "^8.0.1",
"octokit": "^3.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0",
"react-image-gallery": "^1.2.11",
"react-modal": "^3.16.1",
"react-tabs": "^5.1.0",
"react-twemoji": "^0.5.0",
"rss-parser": "^3.13.0",
"snoowrap": "^1.23.0"
},
"devDependencies": {
"eslint": "^8.56.0",
"eslint-config-next": "^14.0.4",
"sass": "^1.49.10"
}
}
@serwist/build
https://projectisprivate-cantreplicate.com
May be harder to reproduce. I had an existing NextJS project and I'm attempting to add serwist for PWA capabilities.
I followed the installation guide for NextJS on the documentation website for all steps.
https://serwist.pages.dev/docs/next/getting-started
I attempted to run the project afterwards with npm run dev and received the error I'm seeing.
Upon running the project, I get the following error:
$ npm run dev
> [email protected] dev
> next dev
D:\code\roost\node_modules\@serwist\build\dist\index.cjs:65
glob pattern strings.`,
^
Error [ERR_REQUIRE_ESM]: require() of ES Module D:\code\roost\node_modules\stringify-object\index.js from D:\code\roost\node_modules\@serwist\build\dist\index.cjs not supported.
Instead change the require of index.js in D:\code\roost\node_modules\@serwist\build\dist\index.cjs to a dynamic import() which is available in all CommonJS modules.
at mod.require (D:\code\roost\node_modules\next\dist\server\require-hook.js:65:28)
at Object.<anonymous> (D:\code\roost\node_modules\@serwist\build\dist\index.cjs:13:23)
at mod.require (D:\code\roost\node_modules\next\dist\server\require-hook.js:65:28)
at Object.<anonymous> (D:\code\roost\node_modules\@serwist\webpack-plugin\dist\index.cjs:3:13)
at mod.require (D:\code\roost\node_modules\next\dist\server\require-hook.js:65:28)
at Object.<anonymous> (D:\code\roost\node_modules\@serwist\next\dist\index.cjs:7:21)
at mod.require (D:\code\roost\node_modules\next\dist\server\require-hook.js:65:28)
at Object.<anonymous> (D:\code\roost\next.config.js:4:21) {
code: 'ERR_REQUIRE_ESM'
}
Node.js v18.17.0
The appropriate modules run, the project builds and is rendered in dev-mode.
No response
No response
https://serwist.pages.dev/docs/sw
Currently only click on the > button will expand the submenu. At first, I thought there's no document what so ever after clicking around the doc; took me a while to find the hidden content.
No response
No response
I'm implementing a complete offline application, I dont want to display a fallback page when there is not internet
I want to cache all my files .html, .js, .css, .png, and font families
When there is not internet I want my application check the cache and use it
That set up was posible in an old version of NextJs with next-pwa, but now I'm updating my application and I want to use serwist
Thanks in advance 🙏
@serwist/next
It would be awesome to have a version of Serwist that works with turbopack.
https://turbo.build/pack/docs/features/customizing-turbopack#webpack-loaders-for-nextjs
Webpack 😄
@serwist/next: 8.0.2
@serwist/webpack-plugin: 8.0.2
@serwist/next
NA
yarn init -yyarn set version berryyarn add @serwist/next @serwist/webpack-plugin next react react-domMissing webpack dependency from @serwist/next and @serwist/webpack-plugin
➤ YN0000: · Yarn 4.0.2
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @serwist/next@npm:8.0.2, @serwist/webpack-plugin@npm:8.0.2, next@npm:14.0.4, and 208 more.
➤ YN0000: └ Completed
➤ YN0000: ┌ Post-resolution validation
➤ YN0002: │ <PROJECT_NAME>@workspace:. doesn't provide webpack (p1fed5), requested by @serwist/next.
➤ YN0002: │ <PROJECT_NAME>@workspace:. doesn't provide webpack (pc79a1), requested by @serwist/webpack-plugin.
➤ YN0086: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warningsNo warnings in log
No response
Workaround:
add in .yarnrc.yml
packageExtensions:
"@serwist/next@*":
dependencies:
webpack: "*"
"@serwist/webpack-plugin@*":
dependencies:
webpack: "*"The dts is not included in the final package and it is not included in the subpackage exports, shouldn't it be in the distribution and included?
Node.js v20.10.0
dependencies
devDependencies
@serwist/next
const { withSerwistInit } = require("@serwist/next");
I am using @serwist/next@preview for this project. My next.config.js is works with requires.
Error [ERR_REQUIRE_ESM]: require() of ES Module ./node_modules/@serwist/next/dist/index.js from ./next.config.js not supported.
Instead change the require of index.js in ./next.config.js to a dynamic import() which is available in all CommonJS modules.
at mod.require (./node_modules/next/dist/server/require-hook.js:65:28)
at Object.<anonymous> (./next.config.js:6:29)
at mod.require (./node_modules/next/dist/server/require-hook.js:65:28){
code: 'ERR_REQUIRE_ESM'
}
Getting withSerwistInit with requiring the package.
No response
No response
"@serwist/next": "^8.4.4",
"@serwist/precaching": "^8.4.3",
"@serwist/sw": "^8.4.3",
@serwist/next
h
page.tsx:
fetch('/local_test');
sw.ts:
self.addEventListener('fetch', event => {
console.log('Fetching:', event.request.url); // Nothing shown in console (Chromium 121)
}
Fetch request is not going through service worker (the request does not show up in the console). I also tried 'navigationPreload: false', which did not help. I set the path in public/manifest.json correctly, I think: "start_url": "/PATH_AT_WHICH_PAGE.JSX_IS_SHOWN".
Fetch request is going through service worker, i.e. the request should be printed in the console.
No response
I am trying to create a mock API, therefore using a local URL.
I actually think there are two bugs: I get an error in the console: 'GET https://example.com/local_test' ... net:ERR_FAILED: 1) The URL shown is from an old version of the service worker. It looks like it did not reload, despite 'skipWaiting: true, clientsClaim: true,' 2) I suspect there is an internal serwist fetch listener which is called first, returns a failing promise and then my custom fetch listener is not activated? If so, how can I serve the fetch request anyway?
NextJS 14.1
@serwist/next
Created a NextJS app and used the following setting:
import { defaultCache } from "@serwist/next/browser";
import { installSerwist } from "@serwist/sw";
import type { PrecacheEntry } from "@serwist/precaching";
declare const self: ServiceWorkerGlobalScope & {
// Change this attribute's name to your `injectionPoint`.
__SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
};
// Anything random.
const revision = crypto.randomUUID();
installSerwist({
precacheEntries: self.__SW_MANIFEST,
skipWaiting: true,
clientsClaim: true,
navigationPreload: true,
runtimeCaching: defaultCache,
disableDevLogs: true,
fallbacks: {
entries: [
{
url: "/~offline",
revision,
matcher({ request }) {
// Or whatever else you want to check for in a request.
return request.destination === "document";
},
},
],
},
});Although disableDevLogs is set to true, on production, the app spams console logs with serwist info
To not have any logs on production
Can be viewed on: https://lostark.party
@serwist/next": "^8.0.0" on Next.js 14.0.4
Hello,
Thank you for creating this new repo and building this project. I've come accross this post in @next/pwa DuCanhGH/next-pwa#121 where it's recommended to migrate to @serwist/next
I've been wondering how to set up PWA correctly in next.js, I was able to change the config + the sw.ts file. But is that enough? What should I add for the injectionPoint or SW_MANIFEST?
`import { defaultCache } from "@serwist/next/browser";
import type { PrecacheEntry } from "@serwist/precaching";
import { installSerwist } from "@serwist/sw";
declare const self: ServiceWorkerGlobalScope & {
// Change this attribute's name to your injectionPoint.
__SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
};
installSerwist({
precacheEntries: self.__SW_MANIFEST,
skipWaiting: true,
clientsClaim: true,
navigationPreload: true,
runtimeCaching: defaultCache,
});`
Also according to vscode (typescript), it should be ServiceWorkerGlobalScopeEventMapinstead of ServiceWorkerGlobalScope in sw.ts
I'm sorry for my basic questions and I understand you aren't finished with the documentation yet.
Anyways thank you.
Documentation on setting up PWA in Next.js.
No response
No response
Using next.js 14 and pages router, running npm run dev, following the docs, I get endless loops of refreshs. It says in the node console:
⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
It does not happen on the first request, but when I hit CTRL+R once.
Any idea what could be the issue / why it's refreshing the page endlessly?
@serwist/next
on demand
(I just upgraded from next 13 to 14 to use this lib, I hope that is not the issue, everything else seem to work normally)
npm run devEndless loop of browser reload and the warning (see above)
No endless refresh loop.
No response
No response
@DuCanhGH can reproduce locally
@serwist/next
@DuCanhGH can reproduce locally
self.addEventListener("fetch", (event: FetchEvent) => {
console.debug(LOG_TAG, "fetch", event.request.url);
});
// Call this in app/sw.ts
self.addEventListener("message", event => {
console.debug(LOG_TAG, "message me", { event });
});
I can make the message event fire but not the fetch event
can't capture fetch
Should be able to capture fetch
No response
No response
Originally posted by jon-smith April 30, 2024
I'm using @serwist/next with a statically exported Next.js app and it's working well, but I'm confused about some precaching options and I'm unsure if it's an issue or I'm using it incorrectly.
I noticed that the index file doesn't get precached by default (I want to ensure this is in sync with the precached js/css files), so I have set up my init as follows:
const withSerwist = withSerwistInit({
swSrc: 'src/app/sw.ts',
swDest: 'public/sw.js',
additionalPrecacheEntries: [{ url: '/', revision }],
});
However this then prevents some files in my public directory from being precached. I noticed in the code (https://github.com/serwist/serwist/blob/main/packages/next/src/index.ts#L165), globPublicPatterns is not used if additionalPrecacheEntries have been set. Is there a reason for this?
The simple workaround is to add my public files to additionalPrecacheEntries but I feel like I might be just using it wrong.
Using:
@serwist/[email protected]Nodev21.7.2@serwist/next
Sorry no link, just some screenshots
I've followed all the instructions from https://serwist.pages.dev/docs/next/getting-started including adding the ts typings in my tsconfig.json.
Hi, I am getting this issue with the defaultCache import on my sw.ts
Get the same issue when I run next build.
Upon inspecting /node_modules/@serwist/next/package.json it looks like the browser export is indeed missing:
I expect next build command to run successfully.
No response
package versions used:
"@serwist/next": "^8.4.4",
"@serwist/precaching": "^8.4.4",
"@serwist/sw": "^8.4.4",
@serwist/next
sw.js file:
import { defaultCache } from "@serwist/next/browser";
import { installSerwist } from "@serwist/sw";
// Anything random.
const revision = crypto.randomUUID();
installSerwist({
// eslint-disable-next-line no-restricted-globals
precacheEntries: self.__SW_MANIFEST,
skipWaiting: true,
clientsClaim: true,
navigationPreload: true,
runtimeCaching: defaultCache,
fallbacks: {
entries: [
{
url: "/offline",
revision,
matcher({ request }) {
return request.destination === "document";
},
},
],
},
});next.config.js
const withSerwist = require("@serwist/next").default({
cacheOnFrontEndNav: true,
swSrc: "sw.js",
swDest: "public/sw.js",
reloadOnOnline: true,
disable: process.env.NODE_ENV === "development", // to disable pwa in development
// ... other options
});I recently moved to serwist from next-pwa as i'm slowly going to start migrating to app directory.
While i'm not in app directory yet i noticed that somehow when i do a route change in the browser it seems to pull a fully cached page back and not trigger getServerSideProps anymore and my data comes back empty that i expect to be there.
It's working all fine without service workers involved and with next-pwa this was working properly as well.
If i stay on the page and then actually refresh the browser all the data shows up.
I also tried setting navigationPreloa, clientsClaim and cacheOnFrontEndNav to false without much success.
minimal repo will be tough this seems to also only happen when i run nextjs build. if i enable service worker in local dev environment everything works just fine.
i expect that my data still comes back from getServerSideProps when a nextjs Link component is clicked.
No response
No response
I visited https://serwist.pages.dev/docs/next/getting-started
At Step 2 - creating sw.ts - VSCode noticed that there are imports for @serwist/precaching and @serwist/sw but I hadn't yet installed those (Step 1 missed them)
Step 1 should be complete
No response
Once I installed those two packages my errors went away
Hey, I am new to Service Workers. I try to make my next 14 pwa work fully offline.
Is there a way to prefetch all routes? As far as my testing goes, serwist out of the box only caches already requested routes.
When I set Network > Throttling > Offline and use a <Link> to an unvisited route, I still leave my app and get hit with a hard Chrome 404. Is this normal?
I would like to define routes that should be prefetched. If I hit a 404 I would expect to stay in my app and show a message instead of "crashing" it.
No response
Fails in macos m1 sonoma 14.0
Fails also in vercel CI
None
Hard to replicate. but I just followed the docs using a t3 app.
Below is the nextjs config.
const withSerwist = withSerwistInit({
// Note: This is only an example. If you use Pages Router,
// use something else that works, such as "service-worker/index.ts".
cacheOnNavigation: false,
swSrc: "src/app/sw.ts",
swDest: "public/sw.js",
reloadOnOnline: true,
scope: "/client",
disable: process.env.NODE_ENV === "development", // to disable pwa in development
})
/** @type {import("next").NextConfig} */
const config = {
swcMinify: true,
optimizeFonts: true,
reactStrictMode: true,
// typescript: {
// ignoreBuildErrors: true,
// },
eslint: {
ignoreDuringBuilds: true,
},
images: {
remotePatterns: [
{
protocol: "https",
hostname: "plus.unsplash.com",
},
],
},
experimental: {
serverComponentsExternalPackages: ["sharp", "onnxruntime-node"],
},
}
export default withSentryConfig(
withSerwist(config),
{....})This occurs even if it is exported without the sentryconfig
### Describe the bug
./public/sw.js:1:2
Type error: An expression of type 'void' cannot be tested for truthiness.
> 1 | !function(){"use strict";let e,t,a,s,r;let
### Expected behavior
To actually build.
### Screenshots (if relevant)
_No response_
### Additional information (if relevant)
_No response_
@serwist/next
https://github.com/hirviid/serwist-next-jest-example
yarnyarn testRunning Jest after adding @serwest/next to a nextjs gives an error:
Error [ERR_REQUIRE_ESM]: require() of ES Module ~/serwist-example-next/node_modules/string-width/index.js from ~/serwist-example-next/node_modules/cliui/build/index.cjs not supported.
Instead change the require of index.js in ~/serwist-example-next/node_modules/cliui/build/index.cjs to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (~/serwist-example-next/node_modules/cliui/build/index.cjs:291:21)
error Command failed with exit code 1.
Adding Serwist to a Next project should not impact Jest tests.
No response
No response
"@serwist/next": "^8.4.4",
"@serwist/precaching": "^8.4.4",
"@serwist/sw": "^8.4.4",
this is my sw.js
installSerwist({
cleanupOutdatedCaches: true,
precacheEntries: [{url: '/offline', revision: "1"}, ...self?.__SW_MANIFEST??[]],
skipWaiting: true,
clientsClaim: true,
navigationPreload: true,
disableDevLogs: true,
runtimeCaching: defaultCache,
navigateFallback: "/offline",
});I wanted to add an offline page in all cases the navigation fallback requires things be preloaded
debuging I noticed that __SW_MANIFEST is undefined during development
so I manually added an entry for the offline page
this worked
except that both in development and during build
if I navigate to the a page using the browser url
I always get the offline page rendered
If I navigate using the navbar available to another page they work
I don't know how to setup offline
I'm expecting that if I add a navigation fallback that it gets pre-cached in general on it's own
and I'm expecting it to show only when I'm offline
this is working correct I am indeed offline
If I'm online and navigate internally I can see the pages
But if I refresh the request to page is intercepted and offline is rendered, you can see that only that one request fails
No response
OS: MacOS Sonoma
Chip: M3 Pro
Server Runtime: Node 18 LTS
Next Version: 14.1.1-canary.2
Serwist SW & Serwist Next: @latest
@serwist/next
https://github.com/versecafe/serwist-ppr-issue-demo
When using PPR PWA loads until all content is fetched.
Should load the HTML shell around suspense boundaries and stream in the new content, same as behaviour when visiting the base web version.
This may just be an issue with PPR or the PWA spec rather than serwist in which case just let me know and I'll remove this.
"@serwist/next": "^9.0.0-preview.6",
"@serwist/precaching": "^9.0.0-preview.6",
"@serwist/sw": "^9.0.0-preview.6",
@serwist/next
simply install the above packages
It's not so much a bug perse, but there is a security vulnearbility in inflight that gets included in your package through the clean-webpack-plugin that i saw was being used in @serwist/next here:
https://github.com/serwist/serwist/blob/main/packages/next/src/index.ts#L6
and here:
https://github.com/serwist/serwist/blob/main/packages/next/src/index.ts#L147
is there any chance we can get rid of clean-webpack-plugin and use clean: true in the output as stated in the webpack docs like so:
https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder
I know it might not be a big deal, but would clean up some snyk reports.
here is a link to the snyk finding:
https://security.snyk.io/vuln/SNYK-JS-INFLIGHT-6095116
Nothing is really broken, just trying to do some cleanup
No response
@serwist/[email protected]
@serwist/next
in next.config.js
const withSerwistInit = require("@serwist/next");
const withSerwist = withSerwistInit({
cacheOnFrontEndNav: true,
swSrc: "app/sw.ts",
swDest: "public/sw.js",
});
/** @type {import("next").NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
module.exports = withSerwist(nextConfig);
num run build
When I am try import cjs like
const withSerwistInit = require("@serwist/next");
I got a error
Error [ERR_REQUIRE_ESM]: require() of ES Module /workspaces/sandbox/node_modules/pretty-bytes/index.js from /workspaces/sandbox/node_modules/@serwist/build/dist/index.old.cjs not supported.
Instead change the require of index.js in /workspaces/sandbox/node_modules/@serwist/build/dist/index.old.cjs to a dynamic import() which is available in all CommonJS modules.
Regular build
No response
No response
"@serwist/next": "^8.2.0",
"@serwist/precaching": "^8.2.0",
"@serwist/sw": "^8.2.0",
@serwist/next
npm run build following basic instructions
Doesn't build -
$ npm run build
> build
> next build
⨯ Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
> Build error occurred
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\apsto\dev\website\node_modules\@serwist\webpack-plugin\dist\relative-to-output-path-5MVPPhSi.js from C:\Users\apsto\dev\website\node_modules\@serwist\webpack-plugin\dist\index.cjs not supported.
relative-to-output-path-5MVPPhSi.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename relative-to-output-path-5MVPPhSi.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\apsto\dev\website\node_modules\@serwist\webpack-plugin\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
at mod.require (C:\Users\apsto\dev\website\node_modules\next\dist\server\require-hook.js:64:28)
at Object.<anonymous> (C:\Users\apsto\dev\website\node_modules\@serwist\webpack-plugin\dist\index.cjs:8:28) {
code: 'ERR_REQUIRE_ESM'
Build succeeds
No response
8.04 Seems to build fine
None
A regular page loads as it is using this configuration: https://github.com/serwist/serwist/blob/main/packages/next/src/index.browser.ts#L188-L198
But you get old data when using the 'ajax call':
https://github.com/serwist/serwist/blob/main/packages/next/src/index.browser.ts#L117-L127
We've currently set it to NetworkFirst to handle this case, that solves the issue.
No response
No response
"@serwist/next": "^8.4.3",
"@serwist/precaching": "^8.4.3",
"@serwist/sw": "^8.4.3",
"next": "^14.1.0",
Next.JS is using the app router and source is in app/src
@serwist/next
https://github.com/msanguineti/next-pwa-test
output: 'export' to next.config optionsbasePath to next.config optionsnpm run build to get static files for a website under out/out/sw.jsThe URL for the service worker (default sw.js) is wrongly injected in the manifest, an extra _next/../public/ path is found there:
...
precacheEntries: [
{
revision: "71782f0a19e1ac2b7126fa129afe790b",
url: "/next-pwa-test/_next/../public/sw.js",
},
...
]
...This is what I should expect:
...
precacheEntries: [
{
revision: "71782f0a19e1ac2b7126fa129afe790b",
url: "/next-pwa-test/sw.js",
},
...
]
...No response
If I don't use basePath, the plugin correctly inject the service worker path.
I found this in the source code:
serwist/packages/next/src/index.ts
Lines 198 to 201 in 13d6b75
This is probably done to remove the extra fluff path /_next/../public/ generated. But when using basePath this substitution does not match and the extra path is not removed.
I also tried to use swUrl but it has no effect whatsoever, even setting swUrl to something crazy:
...
swDest: "public/sw.js"
swUrl: "in/the/middle/of/nowhere/unserviceable-worker.js"
...
nothing happens, the service worker is always injected at [basePath]/_next/../public/sw.js
To solve the issue I resorted to use manifest transformations in next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
basePath: '/next-pwa-test',
}
/** @type {import("@serwist/build").ManifestTransform} */
const manifestTransforms = async (manifestEntries) => {
const manifest = manifestEntries.map((m) => {
m.url = m.url.replace("/_next/../public/", "/");
return m;
});
return { manifest, warnings: [] };
}
/** @type {import("@serwist/next")} */
const withSerwist = require("@serwist/next").default({
swSrc: "src/app/sw.ts",
swDest: "public/sw.js",
manifestTransforms: [manifestTransforms],
});
module.exports = withSerwist({
...nextConfig,
});"@serwist/next": "^8.4.4",
"@serwist/precaching": "^8.4.4",
"@serwist/sw": "^8.4.4",
I also have such next.js config
import withPWAInit from '@serwist/next'
/** @type {import('next').NextConfig} */
const withPWA = withPWAInit({
swSrc: 'app/service-worker.ts',
swDest: 'public/service-worker.js',
})
const nextConfig = { output: 'standalone' }
export default withPWA(nextConfig)
@serwist/next
https://github.com/mturczyn/about-intrinsic-nextjs/blob/main/next.config.mjs
Setup next.js project with serwist and use service-worker.js as destination file.
I expect for it to work seamlesly, however I keep getting following error in browser:
DOMException: Failed to register a ServiceWorker for scope ('http://localhost:3000/') with script ('http://localhost:3000/sw.js'): The script has an unsupported MIME type ('text/html').
As shown, it still tries to get sw.js file.
However, service worker JavaScript file was correctly generated in public directory.
After just changing swDest: 'public/service-worker.js' to swDest: 'public/sw.js' solved the issue:
Also, I have noticed, when I changed swDest file name, previously generated JS file was not removed and I guess, as "compilation"/parsing output, it should be cleaned automatically.
I can specify whatever file name for service worker and all should be wired up by serwist
I can freely change name of service worker in next.js config file, and not keep all previous files with different file names - if i change name for service worker file, somehow old file should be cleaned.
Successfull service worker installation
No response
There is a width:100vw defined that is causing this issue; please fix that.
None
Visit the website
width:100vw
remove this width
Remove this width:100vw
No response
{
"name": "roost",
"version": "0.2.1",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-brands-svg-icons": "^6.2.0",
"@fortawesome/free-regular-svg-icons": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@serwist/next": "^8.4.1",
"@serwist/precaching": "^8.4.1",
"@serwist/sw": "^8.4.1",
"isomorphic-unfetch": "^3.1.0",
"js-cookie": "^3.0.1",
"luxon": "^3.3.0",
"moment": "^2.29.4",
"next": "^14.0.4",
"next-cookies": "^2.0.3",
"normalize.css": "^8.0.1",
"npm": "^10.2.5",
"octokit": "^3.1.2",
"prisma": "^5.7.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0",
"react-image-gallery": "^1.2.11",
"react-modal": "^3.16.1",
"react-tabs": "^5.1.0",
"react-twemoji": "^0.5.0",
"rss-parser": "^3.13.0",
"snoowrap": "^1.23.0"
},
"devDependencies": {
"eslint": "^8.56.0",
"eslint-config-next": "^14.0.4",
"sass": "^1.49.10"
}
}
@serwist/sw
https://projectisprivate-cantreplicate.com
Attempt to build Next.js with Serwist installed and configured to match the spec provided here;
https://serwist.pages.dev/docs/next/getting-started
On build (local and on netlify) the build fails stating that "self is not defined" and references sw.js
I am using the javascript implementation, not typescript.
import { defaultCache } from "@serwist/next/browser";
import { installSerwist } from "@serwist/sw";
installSerwist({
precacheEntries: self.__SW_MANIFEST,
skipWaiting: true,
clientsClaim: true,
navigationPreload: true,
runtimeCaching: defaultCache,
});✓ Linting and checking validity of types
▲ Next.js 14.0.4
✓ (serwist) Compiling for server...
✓ (serwist) Compiling for server...
✓ (serwist) Compiling for client (static)...
○ (serwist) Service worker: D:\code\roost\public\sw.js
○ (serwist) URL: /sw.js
○ (serwist) Scope: /
✓ Creating an optimized production build
✓ Compiled successfully
Collecting page data ...ReferenceError: self is not defined
at D:\code\roost.next\server\pages\sw.js:1:2979
Build error occurred
Error: Failed to collect page data for /sw
at D:\code\roost\node_modules\next\dist\build\utils.js:1220:15 {
type: 'Error'
}
The project builds.
No response
No response
None
Since there’s a next package, is there a item on the roadmap to enable this to be used with Vite & Nuxt?
Use it as a Nuxt module
@kevinmarrec has nuxt pwa which I’ve used before
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.