next-pwa | Zero config PWA plugin for Next.js , with workbox 🧰 | Web Framework library
kandi X-RAY | next-pwa Summary
kandi X-RAY | next-pwa Summary
Zero config PWA plugin for Next.js, with workbox 🧰
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of next-pwa
next-pwa Key Features
next-pwa Examples and Code Snippets
Community Discussions
Trending Discussions on next-pwa
QUESTION
App builds fine locally and works on local production server + development server. The api used to fetch data is working fine.
Code which is producing the error
...ANSWER
Answered 2021-May-23 at 02:01The API is returning a 403 forbidden error:
QUESTION
In my next.config.js file, I want to export two module exports. But I can't do that without combining them. Is there a way to combine the two module.exports?
...ANSWER
Answered 2021-Apr-19 at 16:37You don't need to export two modules, you suppose to export a single configuration object.
Check all possible NextJS configurations here.
QUESTION
I got Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://myapp.vercel.app/_error","status":404}] with my next-pwa app and service worker doesn't work, when deploying my app in in vercel, though it works fine in localhost with no error.
I followed basic usage in here https://www.npmjs.com/package/next-pwa, but I use firebase-messaging-sw.js to use cloud-messaging as well as sw.js(service worker) for pwa. Also currently I don't have _error.js, which is mentioned in the above error. I thought those things might influence the error but I have no clue so far. Actually I added _error.js to my project once but it didn't make any change... Can anyone help to solve this? Thank you in advance!
next.config.js in root directory
...ANSWER
Answered 2021-Apr-07 at 01:01This issue was solved by updating next-pwa 5.2.0, released today, 7th Apr, 2021.
QUESTION
I'm facing a very strange issue with next-pwa. Whenever I try to build a next-pwa project that includes a custom worker js file, the build fails with the following error:
ANSWER
Answered 2021-Mar-26 at 15:37Are you using webpack 5 or 4.x? I faced the same issue with webpack > 5 and fixed the same by passing the future object to withPWA " future: { webpack5: true }".
QUESTION
I'm planning to use next-pwa in conjunction with workbox's background sync plugin to retry offline POST/PUT/DELETE requests when the client is online.
I've set up a runtimeCaching entry:
...ANSWER
Answered 2021-Jan-19 at 02:55User error. I had some code in the app that checked navigator.online and skipped requests if the client is offline. Works perfectly with the above config after removing that.
QUESTION
I'm working with NextJS and Workbox to create the PWAs and the offline support I need with this library: https://github.com/shadowwalker/next-pwa. There's an example of what I need in the repo above: an offline fallback. I don't need the app to work fully on offline mode, just a fallback page indicating that the connection is lost.
I read the workbox section about the comprehensive fallback:https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks
There's a catchHandler which is triggered when any of the other routes fail to generate a response, but the problem is that I'm having huge trouble catching the XMLHttpRequests (XHR) errors.
When the request is sent by the client to an API for example, if there's no internet connection, I'd like to render a fallback page instead. The handler only servers the fallback page if the failing request is a "document", and since XHR requests are not documents, I just cannot handle them.
...ANSWER
Answered 2020-Dec-21 at 19:39The scenario you describe—where a failed XHR originating from a page that's already loaded should trigger an "error page"—is probably best addressed via client-side code in the window context, rather than via service worker logic. I think that's more in keeping with how service workers are "meant" to be used, and would result in a better user experience.
The code to do this would look something like;
QUESTION
I am working based on Next.js example app like below link
https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app
and here is my next.config.js
ANSWER
Answered 2020-Oct-30 at 21:41The console error you mention in the comments mentions /css/animate.min.css and shows a 404 error for that file... Also your nginx config doesn't appear to have a /css rule. Maybe you need to add that, like:
QUESTION
I want to add withPWA and withTypescript together, but i don't know how to config them...
this is my next.config.json code :
...ANSWER
Answered 2020-Sep-01 at 17:59const withPWA = require("next-pwa");
const withTypescript = require('@zeit/next-typescript');
const config = {
pwa: {
dest: "public",
},
}
module.exports = withTypescript(withPWA(config));
QUESTION
Previously my project setup was
...ANSWER
Answered 2020-May-20 at 02:22As per the official NextJs documentation pages folder can be moved inside the src folder. But Config files like next.config.js and tsconfig.json should be inside the root directory, moving them to src won't work. Same goes for the public directory.
Move your next.config.js file to root folder.
Reference: https://nextjs.org/docs/advanced-features/src-directory
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install next-pwa
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
