shadowwalker / next-pwa Goto Github PK
View Code? Open in Web Editor NEWZero config PWA plugin for Next.js, with workbox 🧰
License: MIT License
Zero config PWA plugin for Next.js, with workbox 🧰
License: MIT License
Hey, what's the difference to this package?
https://github.com/hanford/next-offline
They also integrate workbox, why did you not use that?
As I have been following this project from version 2.1.2, everything works just fine.
But after upgrading to version 2.1.3, I have this error only in dev mode (PWA suppport is disabled)
Module not found: Can't resolve 'fs' in '..../node_modules/dotenv/lib'
Production mode is okay. Could you check it?
next.config.js
(no custom webpack config)
withPWA({
pwa: {
register: false,
skipWaiting: false,
dest: 'public'
},
})
"dotenv": "^8.2.0",
"next": "^9.2.0",
"next-pwa": "^2.1.3",
in next.config.js
custom configuration is there any way to get revision
if we have provided additionalManifestEntries
for precaching routes? or we can just randomly generate and provide it?
because providing null
actilly caches it sorta permanantly and doesn't reflect changes after hard reload
Here's a sample behaviour on precache route with null as revision build id reverts back even after empty cache and hard reload
Hi! This is more a doubt rather than a bug, and i was wondering if you could maybe help me. Currently i started to use this lib and i have no issues with it. I've also run audits inside Chrome regarding PWA and i have no errors at all; still, there's no message to install the PWA in Chrome for Android. Do you know what this could be? Is a normal behavior?
Thanks a lot!
I use the next-optimized-images module who convert to webp on the fly all my images.
The problem is the service worker import twice file.. like this :
the .jpg and the .webp version
I would like to reduce the size of cache data and import all my images, except .wepb
In my next.config.js I tried something like that:
module.exports = withPlugins(
[
[
withPWA,
{
pwa: {
dest: "public",
disable: process.env.NODE_ENV === "development",
publicExcludes: ["([a-zA-Z0-9\\s_\\\\.\\-\\(\\):])+(.webp)$"]
}
}
],
[...]
],
nextConfig
);
But it seems it doesn’t work.
However I tested my regex expression and it works well here: https://regex101.com/r/CRiDxt/1
Someone would have an idea to solve my problem ? Thank you everyone
I noticed that my cache was not getting updated after changing some images. After a few hours of digging I noticed that the ?WB_REVISION is never changing. Some more digging... the revision is only taking into consideration the file name and not the content to calculate the md5. This seems like a bug to me, can someone with more experience confirm?
Sent PR in case I am not around when you see this.
// Current code in https://github.com/shadowwalker/next-pwa/blob/master/index.js
const getRevision = file => crypto.createHash('md5').update(Buffer.from(file)).digest('hex')
// Seems to me like it should use fs.readFileSync(file) instead of Buffer.from(file)
const getRevision = file => crypto.createHash('md5').update(fs.readFileSync(file)).digest('hex')
Not really and issue but wanted to chime you in on the feature and it's conversation
vercel/next.js#11552 (reply in thread)
We were wondering how incremental builds will work with next-pwa, it generates a build id at runtime so I guess it would never know that a page was rebuilt?
https://github.com/hanford/next-offline
It seems like next-offline is the official solution which makes me a bit more inclined to use that.
So I'm wondering how is this library different (or rather, better) than next-offline?
After adding next-pwa and its configuration in next.config.js, sw.js not generated neither in public folder nor in .next folder when I run next build or npm run build. In case of development also if I run npm run dev then sw.js generated inside .next folder.
You could check my repo. https://github.com/ArijitDebRoy/arijit
Hello,
I recently setup next-pwa on by next.js app, and when using running in development next dev
, every new page load (for that development session) will see GenerateSW being called again. This ends up being annoying as it causes lag on page navigation, is disruptive in the console, and causes a new sw.js to be generated all the time, even though no changes have been made (I don't even have a custom serviceworker setup right now at all.
On the live app (Hosted & compiled by vercel/ZEIT), no GenerateSW error appears in the console. I'm running next.js ^9.3.3 and next-pwa ^2.4.0.
The error message reads:
[ warn ] GenerateSW has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.
Since I'm totally brand new to serviceworkers and PWA in general, I have no idea how to get around this issue.
Running now dev
on a next-pwa enabled app on Windows will result in an unbootable app, because scope will incorrectly be generated as "\"
, which will be parsed as an unterminated string. This is because many places in the code concatenate URLs with path.join
, when they probably just want [someOther, thing].join('/')
First of all thank you for making amazing next-pwa
plugin
webpack aliases works fine when using it in other files w/ using next-pwa
but when we use any alias import in _app.tsx
causes compilation error
[ error ] ./src/pages/_app.tsx
Module not found: Can't resolve '@components/@core/container' in '/home/x/git/biodiv-ui-next/src/pages'
Error was introduced in latest release, worked fine in 2.1.2
w/ latest next
Minimal reproduction project
https://github.com/harshzalavadiya/next-pwa-error-app-tsx
OS linux
NodeJS 12.16.0 LTS
Yarn 1.x Latest
Hello, thanks for the project. I have a question about how to delete cookies from the service worker for auth sessions?
I have a cookie based session and the logout works fine without next-pwa, but when I use the serviceworker the user never gets logged out.
Do you have any information on how to delete the session? thanks
What config should I set to avoid caching XHR api requests
I managed to doing this, so it is cached for 1 second
runtimeCaching: [
{
urlPattern: /\/api\//g,
handler: 'NetworkFirst',
options: {
cacheName: 'api',
expiration: {
maxEntries: 1,
maxAgeSeconds: 1
}
}
}
],
fs-extra
is used by next-pwa
but not actually in the dependencies. This makes the library totally unusable for anyone using
fs-extra
$ next build
> Build error occurred
Error: Cannot find module 'fs-extra'
Require stack:
- /usr/src/project/node_modules/next-pwa/index.js
- /usr/src/project/next.config.js
- /usr/src/project/node_modules/next/dist/next-server/server/config.js
- /usr/src/project/node_modules/next/dist/build/index.js
- /usr/src/project/node_modules/next/dist/cli/next-build.js
- /usr/src/project/node_modules/next/dist/bin/next
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
at Function.Module._load (internal/modules/cjs/loader.js:842:27)
at Module.require (internal/modules/cjs/loader.js:1026:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (/usr/src/project/node_modules/next-pwa/index.js:4:12)
at Module._compile (internal/modules/cjs/loader.js:1138:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Module.require (internal/modules/cjs/loader.js:1026:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/usr/src/project/node_modules/next-pwa/index.js',
'/usr/src/project/next.config.js',
'/usr/src/project/node_modules/next/dist/next-server/server/config.js',
'/usr/src/project/node_modules/next/dist/build/index.js',
'/usr/src/project/node_modules/next/dist/cli/next-build.js',
'/usr/src/project/node_modules/next/dist/bin/next'
]
}
I require('@uppy/golden-retriever/lib/ServiceWorker') In /worker/index.js
then, Error occured ( In dev mode, also in build and deploy, error occured, too)
ReferenceError: localStorage is not defined at findUppyInstances (/home/hwanggyeongchan/workspace/sr-client/node_modules/@uppy/golden-retriever/lib/MetaDataStore.js:9:23) at Function.cleanup (/home/hwanggyeongchan/workspace/sr-client/node_modules/@uppy/golden-retriever/lib/MetaDataStore.js:85:23) at new MetaDataStore (/home/hwanggyeongchan/workspace/sr-client/node_modules/@uppy/golden-retriever/lib/MetaDataStore.js:46:21) at new GoldenRetriever (/home/hwanggyeongchan/workspace/sr-client/node_modules/@uppy/golden-retriever/lib/index.js:44:27) at Uppy.use (/home/hwanggyeongchan/workspace/sr-client/node_modules/@uppy/core/lib/index.js:1305:18) at Object.NVXP (/home/hwanggyeongchan/workspace/sr-client/.next/server/static/N54wyu3Jm5658qcLZSY8x/pages/_app.js:714:4) at __webpack_require__ (/home/hwanggyeongchan/workspace/sr-client/.next/server/static/N54wyu3Jm5658qcLZSY8x/pages/_app.js:23:31) at Object.Nhdc (/home/hwanggyeongchan/workspace/sr-client/.next/server/static/N54wyu3Jm5658qcLZSY8x/pages/_app.js:2742:14) at __webpack_require__ (/home/hwanggyeongchan/workspace/sr-client/.next/server/static/N54wyu3Jm5658qcLZSY8x/pages/_app.js:23:31) at Module.cha2 (/home/hwanggyeongchan/workspace/sr-client/.next/server/static/N54wyu3Jm5658qcLZSY8x/pages/_app.js:3442:18) at __webpack_require__ (/home/hwanggyeongchan/workspace/sr-client/.next/server/static/N54wyu3Jm5658qcLZSY8x/pages/_app.js:23:31) at Object.0 (/home/hwanggyeongchan/workspace/sr-client/.next/server/static/N54wyu3Jm5658qcLZSY8x/pages/_app.js:251:18) at __webpack_require__ (/home/hwanggyeongchan/workspace/sr-client/.next/server/static/N54wyu3Jm5658qcLZSY8x/pages/_app.js:23:31) at module.exports./jkW.Object.defineProperty.value (/home/hwanggyeongchan/workspace/sr-client/.next/server/static/N54wyu3Jm5658qcLZSY8x/pages/_app.js:91:18) at Object.<anonymous> (/home/hwanggyeongchan/workspace/sr-client/.next/server/static/N54wyu3Jm5658qcLZSY8x/pages/_app.js:94:10) at Module._compile (internal/modules/cjs/loader.js:776:30)
So can I access localStorage in custom worker ?
Or is there any other solution for accessing problem to localStorage
For reference: vercel/next.js#7800 (comment)
Both sw.js
and precache-manifest.*.js
should go in the root directory. Next 9 adds support for root files (robots.txt, favicon.ico, etc.) with a /public/
directory (that will eventually replace /static/ too).
For now, a user wishing to use the /public/ directory feature must enabled by adding this snippet in next.config.js
:
{
experimental: { publicDirectory: true },
}
Not sure if the location of manifest.json
is harcoded into /static/ but we might want ot look in /public/ too.
I use Next.js 9+ with dest: 'public'
I have a page path: /pages/communities/[communityId]/post/index.tsx
But when navigating through the pages, the script loading path looks like:
Prod mode: _/next/static/8Lf71cZLXHJd_0V-D30mA/pages/communities/1/post/index.js - 404 error status.
Dev mode: _/next/static/8Lf71cZLXHJd_0V-D30mA/pages/communities/%5BcommunityId%5D/post/index.js - 500 error status.
The problem is that id is present in the script request path.
We have about 120 SSG pages in our application which isn't too much data to transfer over the network. It would be nice to add all SSG JSON data to the service worker so every page is cached automatically.
It might be interesting to introduce some limits as how much it should be able to cache here, for example, we only the x-first pages of getStaticPaths for a page for example.
Hi thanks for this great package.
I have a quick question. Assuming I want to exclude some pages from being cached. Like let's say /dashboard
and/or /dashboard/*
is that possible?.
If yes, could you point me in the right direction. Thank you. I am new to pwa and offline all.
Thanks in advance.
Hi thank you for working in this library.
I've been trying to implement it for a quick prototype of an app I'm building and I can't get the sw to work.
So I forked the example on next-9+, which I've been following, and after running npm install
, npm run build
and npm start
the sw is not there for lighthouse or if I run navigator.serviceWorker
I get undefined
.
Could this be a bug?
I'm using next.js 9+ and i'm getting an error when the page is loaded (in production).
Uncaught (in promise) TypeError: Failed to fetch
The error occurs in sw.js. Also, the service worker does not work.
Hello there,
I have the same issue as #26
Here's the scenario.
I have a home page that uses getServerSideProps
to call my API, fetch new posts, and render them. however, when data is changed it still shows the cached version of that page.
Another thing is I parse the request cookies inside getServerSideProps
and then render the page based on some cookies. those also have this issue
Still not enough information, is it under dev or prod mode? How do you call your API, do you need > to refresh or call the API again to fetch the latest data?
@shadowwalker
Tested on production when https is present. And when https is not present it works just fine.
Here is my configuration
const path = require("path");
const withPWA = require("next-pwa");
module.exports = withPWA({
pwa: {
dest: "public",
runtimeCaching: [
{
urlPattern: /^https:\/\/fonts\.(?:googleapis|gstatic)\.com\/.*/i,
handler: "CacheFirst",
options: {
cacheName: "google-fonts",
expiration: {
maxEntries: 4,
maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
},
},
},
{
urlPattern: /^https:\/\/use\.fontawesome\.com\/releases\/.*/i,
handler: "CacheFirst",
options: {
cacheName: "font-awesome",
expiration: {
maxEntries: 1,
maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
},
},
},
{
urlPattern: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
handler: "StaleWhileRevalidate",
options: {
cacheName: "static-font-assets",
expiration: {
maxEntries: 4,
maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
},
},
},
{
urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
handler: "StaleWhileRevalidate",
options: {
cacheName: "static-image-assets",
expiration: {
maxEntries: 64,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
{
urlPattern: /\.(?:js)$/i,
handler: "NetworkFirst",
options: {
cacheName: "static-js-assets",
expiration: {
maxEntries: 16,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
{
urlPattern: /\.(?:css|less)$/i,
handler: "StaleWhileRevalidate",
options: {
cacheName: "static-style-assets",
expiration: {
maxEntries: 16,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
{
urlPattern: /\.(?:json|xml|csv)$/i,
handler: "NetworkFirst",
options: {
cacheName: "static-data-assets",
expiration: {
maxEntries: 16,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
{
urlPattern: /.*/i,
handler: "NetworkFirst",
options: {
cacheName: "others",
expiration: {
maxEntries: 16,
maxAgeSeconds: 24 * 60 * 60, // 24 hours
},
},
},
],
},
webpack(config) {
config.resolve.alias["#"] = path.resolve(__dirname, "src");
return config;
}
});
I am not sure if this is the expected behavior but providing additionalManifestEntries
option to pwa
config causes the if block at
Line 138 in a84403c
public
folder content. I am using that in order to add a static HTML as additionalManifestEntries: [{ url: "offline", revision: nanoid() }],
. I could get over this problem by simply copy/pasting the if block, but I think it might make more sense if the library worked in an additive fashion for additionalManifestEntries
option. Especially given there is already a publicExcludes
option. @shadowwalker wdyt? Happy to work on a PR if you think this makes sense.When I visit my exported site (by locally serving the /out
directory) I get this error:
workbox-07643d7a.js:1 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"http://localhost:3000/public/pwa/android-chrome-144x144.png","status":404}]
at D (http://localhost:3000/workbox-07643d7a.js:1:11361)
at async Promise.all (index 0)
at async D.install (http://localhost:3000/workbox-07643d7a.js:1:10780)
It seems to be looking in the /public/pwa/
directory for the icons when they are in fact in the `/pwa/ directory.
My manifest.json
is also in the /pwa/
directory and looks like this:
{
"name": "Name",
"short_name": "Name",
"description": "description",
"dir": "auto",
"lang": "en-US",
"display": "standalone",
"orientation": "any",
"start_url": "/?homescreen=1",
"background_color": "#fff",
"theme_color": "#000",
"icons": [
{
"src": "/pwa/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png"
},
...
]
}
How come this it's looking for icons in the starting in public
?
Many thanks for any advice?
I'm using version 2..1.2 of this module with next 9.2.1
hi. I am using next-pwa and every thing is ok. but when user is offline , user can navigate between cjacjed page but after refresh in page no internet error show
I'm trying to have more control over the routes and precached files. I'm using GenerateSW strategy to generate my service worker, and according to the workbox documentation, I could pass the globIgnores
parameter to the generateSW class so that I could match files to always exclude when generating the precache. But I'm running into this error:
One of the main benefits of a PWA is that all URLs respond with a 200 and a working app shell.
In an ideal scenario a nextjs PWA would respond with an app-shell which could be created by a user by accessing something like /pages/_app-shell.js
(which can have 'blank' default like _404 is)
When a user accesses a random URL it will always return the contents of _app-shell.js. The client app will navigate to the page if the user is online, if the user is offline offline it wont and it will show a 'you are offline message'.
Hello, I'm having an issue with the service worker specifically when opening the homepage (index.js) of my app.
The request to localhost:7777
is completely relying on the offline cache, breaking some functionality that is dependent on cookies.
On the other hand, when visiting any other page (/login
, /shop
, etc.) the request by the Service Worker's install handler to populate the offline cache is made every time, which should also be the behavior of the homepage.
How could I replicate this behavior also on the homepage? I'm not sure if this is a bug or something I should configure.
Info:
server.js
filenext-pwa
's config I only added dest: 'public'
next-i18next
public/
workers
folder to write custom service worker code with webpack bundlingI tried something from issue #46
But it didn't help.
I updated the regex to /\/api\/.*/g
runtimeCaching: [
...
{
urlPattern: /\/api\/.*/g,
handler: "NetworkFirst",
},
...
]
It would be helpful if I could exclude all network request matching regex /\/api\/.*/g
Thanks.
I've added next-pwa, configured next.config.js:
if (process.env.NODE_ENV === 'development') {
plugins = withPlugins([
withCss,
[withFonts, { enableSvg: true }],
[optimizedImages, optimizedImagesConfig]
], opts)
} else {
plugins = withPlugins([
withPWA,
withCss,
[withFonts, { enableSvg: true }],
[optimizedImages, optimizedImagesConfig]
], opts)
}
And Firefox triggered on the console:
Fetch event handlers must be added during the worker script’s initial evaluation. ./workbox-eb42688b.js:1:13052
Fetch event handlers must be added during the worker script’s initial evaluation. ./workbox-eb42688b.js:1:796
I've configured my next project with express, and these are the lines I added to find sw.js:
if (process.env.NODE_ENV !== 'development') {
server.get(['/sw.js', '/workbox-*', '/service-worker.js'], (req, res) => {
const {
path: pathname
} = req
const filePath = path.join(__dirname, '.next', pathname)
app.serveStatic(req, res, filePath)
})
}
I've configured CSP:
csp = `default-src 'self'; script-src 'self' '${cspHashOf(
NextScript.getInlineScriptSource(this.props)
)}'`
csp += ' \'unsafe-eval\' https://www.gstatic.com https://www.googletagmanager.com https://www.google-analytics.com'
csp += ' https://recaptcha.net https://maps.googleapis.com https://maps.gstatic.com'
csp += ' https://www.google-analytics.com https://ajax.googleapis.com https://www.google.com'
csp += ' https://google.com https://gstatic.com https://ssl.google-analytics.com'
csp += ' https://www.youtube.com https://s.ytimg.com https://connect.facebook.net;'
csp += ' img-src * data: \'unsafe-inline\';'
csp += ' style-src \'self\' \'unsafe-inline\' https://fonts.googleapis.com https://fonts.gstatic.com;'
csp += ' font-src \'self\' https://fonts.gstatic.com data:;'
csp += ' frame-src https://www.google.com https://www.youtube.com https://www.facebook.com'
csp += ' https://s-static.ak.facebook.com; object-src \'self\'; connect-src *'
These are my dependencies:
"dependencies": {
"@babel/core": "7.8.7",
"@babel/runtime": "7.8.7",
"@fortawesome/fontawesome-svg-core": "1.2.27",
"@fortawesome/free-brands-svg-icons": "5.12.1",
"@fortawesome/free-regular-svg-icons": "5.12.1",
"@fortawesome/free-solid-svg-icons": "5.12.1",
"@fortawesome/react-fontawesome": "0.1.9",
"@zeit/next-css": "^1.0.2-canary.0",
"axios": "0.19.2",
"body-parser": "1.19.0",
"boom": "7.3.0",
"compression": "1.7.4",
"connect-session-sequelize": "6.1.1",
"cookie-parser": "1.4.4",
"d3-format": "1.4.3",
"dotenv": "8.2.0",
"enquire-js": "^0.2.1",
"express": "4.17.1",
"express-robots-txt": "0.4.1",
"express-session": "1.17.0",
"file-loader": "5.1.0",
"formik": "2.1.4",
"get-video-id": "3.1.4",
"google-map-react": "^1.1.6",
"helmet": "3.21.3",
"html-to-react": "1.4.2",
"http-proxy-middleware": "1.0.1",
"imagemin-gifsicle": "7.0.0",
"imagemin-mozjpeg": "^8.0.0",
"imagemin-optipng": "7.1.0",
"imagemin-svgo": "7.1.0",
"isomorphic-unfetch": "^3.0.0",
"lodash.shuffle": "^4.2.0",
"lqip-loader": "^2.2.0",
"lusca": "^1.6.1",
"mobile-detect": "1.4.4",
"morgan": "^1.9.1",
"next": "9.2.2",
"next-compose-plugins": "2.2.0",
"next-fonts": "^1.0.3",
"next-optimized-images": "2.5.5",
"next-pwa": "^2.2.0",
"nookies": "^2.0.8",
"prop-types": "15.7.2",
"pure-react-carousel": "1.25.2",
"rc-drawer": "3.1.3",
"rc-slider": "9.2.2",
"rc-switch": "^1.9.0",
"react": "16.13.0",
"react-animated-css": "1.2.1",
"react-autosuggest": "^9.4.3",
"react-countup": "4.3.3",
"react-detect-offline": "2.4.0",
"react-dom": "16.13.0",
"react-ga": "2.7.0",
"react-iframe": "1.8.0",
"react-js-pagination": "3.0.3",
"react-loader-spinner": "3.1.5",
"react-loading": "^2.0.3",
"react-masonry-css": "1.0.14",
"react-modal": "3.11.2",
"react-modal-video": "1.2.3",
"react-no-ssr": "^1.1.0",
"react-parallax": "3.0.3",
"react-scroll": "1.7.16",
"react-share": "4.0.1",
"react-slick": "0.25.2",
"react-sticky-el": "1.1.0",
"react-text-truncate": "0.16.0",
"react-toastify": "5.5.0",
"react-youtube": "7.9.0",
"reaptcha": "1.7.2",
"rotating-file-stream": "2.0.2",
"sequelize": "5.21.5",
"slugify": "1.4.0",
"sqlite3": "4.1.1",
"universal-cookie": "4.0.3",
"url-parser": "^0.0.1",
"yup": "0.28.2"
},
"optionalDependencies": {
"fsevents": "*"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "7.8.3",
"@babel/plugin-proposal-decorators": "7.8.3",
"@babel/plugin-proposal-object-rest-spread": "7.8.3",
"@babel/plugin-transform-react-jsx-source": "7.8.3",
"@babel/plugin-transform-runtime": "7.8.3",
"@babel/preset-env": "7.8.7",
"@babel/preset-react": "7.8.3",
"@storybook/addon-actions": "5.3.14",
"@storybook/addon-links": "5.3.14",
"@storybook/addons": "5.3.14",
"@storybook/react": "5.3.14",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.1.0",
"babel-jest": "25.1.0",
"babel-loader": "8.0.6",
"eslint": "6.8.0",
"faker": "^4.1.0",
"husky": "4.2.3",
"jest": "25.1.0",
"snazzy": "^8.0.0",
"standard": "14.3.1"
}
The Node version: 12.16.1
The Next version: 9.2.2
I dont have any sw.js file inside public folder when building. This is how I am using next-pwa
const withPlugins = require("next-compose-plugins");
const optimizedImages = require("next-optimized-images");
const withPWA = require("next-pwa");
module.exports = withPlugins(
[optimizedImages],
[
withPWA({
pwa: {
dest: "public",
},
}),
]
);
Please open this GIF in new window to proper view
as you can see when hitting precached route for the first time in offline scenario leaves page non interactive due to supported js file resulting in 404
https://github.com/harshzalavadiya/next-pwa-precache-bug
currently generated sw.js
file has non encoded square brackets in precacheAndRoute
as shown below
but after manually editing sw.js
entry like below it works
p.s. basically my end goal was to precache /hello/[name]
and make it work dynamically with any route but seems it's not diretly possible so I'm adding /hello/xyz
route to cache at runtime
why my service worker not update if content update from api? i use getserversideprops
Hey @shadowwalker, thanks for your awesome package! I tried deploying the Next 9 example to Now without any changes however the build failed with the following errors. Any ideas what's going on here?
> [PWA] generate precache manifest in /tmp/625de824/public
> [PWA] ====== compile server ======
> [PWA] auto register service worker with: /tmp/625de824/node_modules/next-pwa/register.js
Compiled with warnings.
You're using the following Workbox configuration options: [globDirectory, globPatterns]. In Workbox v3 and later, this is usually not needed. Please see https://goo.gl/EQ4Rhm for more info.
Page Size Files Packages
┌ ⚡ / 490 B 0 4
├ /_app 2.04 kB 0 4
├ /_document
└ /_error 2.11 kB 0 3
λ (Lambda) page was emitted as a lambda (i.e. getInitialProps)
⚡ (Static File) page was prerendered as static HTML
preparing lambda files...
Creating lambda for page: "_error.js"...
Created lambda for page: "_error.js"
{ Error: ENOENT: no such file or directory, open '/tmp/625de824/public/precache-manifest.2a9f4cd71ccfaff43ed0033cc1b291af.js'
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/tmp/625de824/public/precache-manifest.2a9f4cd71ccfaff43ed0033cc1b291af.js' }
done
Thanks,
Kris
how to add API to cookies in next-pwa?
thnks
Set up:
We are using workbox in injectManifest mode with next-pwa.
Context:
There is an offline fallback view which should be precached.
Inside my custom service worker (srcSW), I am achieving as
const CACHE_NAME = "offline-html";
const FALLBACK_HTML_URL = "/offline";
self.addEventListener("install", async event => {
event.waitUntil(caches.open(CACHE_NAME).then(cache => cache.add(FALLBACK_HTML_URL)))
})
myPWAConfig looks like:
return {
disable: process.env.NODE_ENV !== "production",
register: true,
scope: "/",
sw: "/sw.js",
swSrc: "./swSrc.js",
maximumFileSizeToCacheInBytes: mb1,
include: [/(pages/offline.js)$/], // same offline page
exclude: [/.*.map$/],
}
Each time I do an update in view/offline.js the service worker is not getting updated on client refresh. I have to do an explicit service worker update.
Outside next-pwa I was trying the same with work-box build and it was working as expected.
Error while trying to install and build the example for installing next-pwa
on Next v9+ .
Successful Build with PWA ready Next App
npm install
npm run build
> [email protected] build /<dir>/next-9
> next build
> [PWA] compile client (static)
> [PWA] auto register service worker with: /<dir>t/next-9/node_modules/next-pwa/register.js
> [PWA] service worker: /<dir>/next-9/public/sw.js
> [PWA] url: /sw.js
> [PWA] scope: /
> [PWA] precache manifest: /<dir>/next-9/public/precache.ykumYKjvIaxEuyzC-fB1q.[manifestHash].js
> [PWA] compile server
Creating an optimized production build
Failed to compile.
Please check your GenerateSW plugin configuration:
"importsDirectory" is not a supported parameter.. "globDirectory" is not a supported parameter.. "globPatterns" is not a supported parameter.. "precacheManifestFilename" is not a supported parameter.
> Build error occurred
Error: > Build failed because of webpack errors
at build (/<dir>/next-9/node_modules/next/dist/build/index.js:10:900)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /<dir>/.npm/_logs/2020-02-08T13_39_59_180Z-debug.log
Hi, I have a compilation error because I can't find how to integrate next.config with my next sass, can you help me a little? Thank you.
const withPWA = require('next-pwa');
const withSass = require('@zeit/next-sass');
module.exports = withPWA(withSass());
This returns me a sass error:
Module parse failed: Unexpected character '@' (2:0)
Maybe it's a mistake of mine, but I haven't managed to insert multiple configurations to my next.config
Hi there!
I'm trying to block the default installation prompt "Add to Homescreen" as I want to provide a custom install experience!
As stated in this article: https://web.dev/customize-install/ I had to listen to the 'beforeinstallprompt' event, and work from there.
I followed the examples in this repo to use a custom worker, by creating a worker/index.js
in the root of my project. All I wrote in that index is to prevent the default installation prompt, like this:
self.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
});
This worker is being loaded to the public folder, as expected...but the "Add to Homescreen" is still appearing :/ Any idea on how to acomplish this, please?
Hi
i cache all pages in next.config.js by NetworkFirst strategy and it works well
but when i navigate to second page and set the offline mode in application tab,i expect that when i refresh the second page it works in offline mode but it doesnot work !
but when i navigate to second page and refresh the second page then i set the offline mode in application tab ,and refresh the second page that work in offline mode as well !
(when i refresh the second page before set offline mode...the cache manager work goood and if i dont refresh the second page the cache manager doesnt load second page in offline mode)
please help...
Error message in the console shows....
SW registration failed: TypeError: Failed to register a ServiceWorker for scope ('https://stupefied-franklin-ead670.netlify.com/') with script ('https://stupefied-franklin-ead670.netlify.com/service-worker.js'): A bad HTTP response code (404) was received when fetching the script.
The build files generate and SW.js, rather than a service-worker.js.
Could there be some additional configuration I am missing?
Hi everybody
When I use next-pwa i get this errors :
The script resource is behind a redirect, which is disallowed.
Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://digiscards.com/') with script ('https://digiscards.com/sw.js'): The script resource is behind a redirect, which is disallowed.
Any clue of how to fix it ?
First of all, thank you for this library @shadowwalker. I am trying to apply the "app shell" model using next-pwa
. I created an /offline
route that gets statically compiled into .next/static/{BUILD_ID}/pages/offline.html
. I am trying to use that file as my navigateFallback
. Simply doing navigateFallback: "/offline"
is not working, as that route is not pre-cached. After spending some time I wanted to ask whether I am missing something. Right now, I am considering having a custom build step that would cp that file into public/
so that navigateFallback: "/offline.html"
could be used. I was wondering if anyone using next-pwa
had a more elegant solution. Thanks!
Are there any easy approaches to have Background Sync API https://developers.google.com/web/tools/workbox/modules/workbox-background-sync so that handle API calls too?
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.