Does anyone know how to stop the constant stream of console.log messages from workbox in a NextJS project? I recently initiated a new repository and it's flooding me with unnecessary informationhttps://i.sstatic.net/Aikrx.jpg
Does anyone know how to stop the constant stream of console.log messages from workbox in a NextJS project? I recently initiated a new repository and it's flooding me with unnecessary informationhttps://i.sstatic.net/Aikrx.jpg
In the documentation for next-pwa, there is a section with some helpful tips:
https://i.sstatic.net/0UVSz.png
To disable all workbox logging during development, you can create a worker directory in the root of your project and place an index.js file inside it:
// To disable all workbox logging during development, you can set self.__WB_DISABLE_DEV_LOGS to true
// https://developers.google.com/web/tools/workbox/guides/configure-workbox#disable_logging
// eslint-disable-next-line no-underscore-dangle,no-restricted-globals
self.__WB_DISABLE_DEV_LOGS = true;
Make sure to restart the server - this should prevent any logs from appearing in the console.
Another option that I've found useful is to completely disable service workers during development. This can be achieved by using the disable option in your next.config.js file. Here's an example configuration:
const path = require('path');
const withPWA = require('next-pwa');
const runtimeCaching = require('next-pwa/cache');
module.exports = withPWA({
pwa: {
dest: 'public',
scope: '/',
runtimeCaching,
disable: process.env.NODE_ENV === 'development',
},
sassOptions: {
includePaths: [path.join(__dirname, 'assets/jss/vendor')],
},
});
After restarting the server, the service worker will no longer receive updates, but you'll need to manually remove the old one: https://i.sstatic.net/9ykmQ.png
To isolate the top context in Chrome's Console
https://i.sstatic.net/77b6i.png
Choose the filter option to show logs specific to the active context
During my work on a PWA project in the past, I realized that I had inadvertently registered a ServiceWorker that was pointing to http://localhost:3000. To rectify this issue, I took the necessary steps to remove (unregister) the Service Worker using Chrome Dev Tools
chrome://serviceworker-internals/?devtoolsFirstly, I unregistered my localhost
https://i.sstatic.net/WHdbq.png
Next, I proceeded to unregister it from my chrome dev tools as well (although it's not displayed as I had already done it) https://i.sstatic.net/YNAly.png
Following these actions, I found useful guidance through this question How do I uninstall a Service Worker?
To disable console logging when in production mode for a PWA, you can set the configuration as follows:
Inside your next.config.js file:
// next.config.js
module.exports = withPWA({
pwa: {
dest: 'public',
mode: 'production'
},
});
I tried this method and it worked perfectly for me. I came across this solution on: https://www.npmjs.com/package/next-pwa#user-content-tips
If you want to ensure that next-pwa generates a production build of the service worker during development, you can specify the option mode: 'production' in the pwa section of your next.config.js file. Even though next-pwa automatically creates a development build of the service worker during development (when running next) and a production build during production (using next build and next start), forcing a production build during development has its advantages: It reduces logging noise since production builds do not include logging, and it slightly improves performance as production builds are optimized and minified.
To turn off logging, simply include this code snippet:
const withPWA = require('next-pwa')({
// ...
disableDevLogs: true,
// ...
})
If you're seeing those messages, it's likely because you're in development mode. Thankfully, you have the option to turn them off completely.
workbox.setConfig({ debug: false });
You can also disable them within your service worker (just make sure to do this before utilizing workbox)
self.__WB_DISABLE_DEV_LOGS = true
I have a JSON structure that looks like this: { map: [ {"key1":"valueA1", "key2":"valueA2", "key3":"valueA3"}, {"key1":"valueB1", "key2":"valueB2", "key3":"valueB3"}, {"key1":"valueC1", "key2":"valueC2", "key3":"valueC3"}, .... an ...
Unfortunately, I am unable to provide a demonstration using anything other than code (no fiddle), but here is the issue at hand: Upon making an AJAX call to retrieve data from a JSON file and saving it to a variable, I then make another AJAX call to fetch ...
I have incorporated a script into my PHP file that reads the Pusher channel and performs various actions when a new event occurs on the specified channel. If I access the following URL in my browser: http:/localhost/pusher.php and keep it open, the p ...
I'm exploring the use of select2 for the first time and wondering if someone could assist me. I want to pull data from a static array. Can you offer any guidance on how to achieve this? This is the code I currently have: $(document).ready(function( ...
Imagine a multitude of events being created and added to the event queue of a Javascript engine. Are there any techniques or recommended practices in the industry to predict the order in which a specific event will be added to the queue? Any knowledge or ...
I came across this code snippet on SO and decided to use it for my project. The goal is to send a simple 1.5mb zip file and save it on my C drive by making a request through Postman with the binary option enabled, sending the zip file to localhost:3012. c ...
How can I invert a current selection in a KendoUI grid that is set to "multiple" selection mode? ...
In my current form, the structure is as follows: kingdom --> phylum --> class --> order --> family --> genus... If the kingdom = Animalia, then the options for phylum should be a specific list. Similarly, if the phylum is set to Chordata, ...
Query My aim is to optimize the code for image manipulation on a web browser using JavaScript. One possible solution I am considering is utilizing a video file to reduce HTTP requests. Is there a way to extract a single frame from a video in png, jpg, or ...
I have a D3.js svg element measuring (1000,1000) with a circle positioned randomly, such as (100,200). My goal is to adjust the svg so that the circle is centered at (500,500). I want to create a function that can do this for any randomly positioned circl ...
If I want to define the type of a variable that will be used with setInterval in the following code snippet: this.autoSaveInterval = setInterval(function(){ if(this.car.id){ this.save(); } else{ this.create(); } ...
Currently, I am in the process of updating search results through AJAX after dragging the map. The code snippet below illustrates how I am accomplishing this task: function initMap(){ var locations = []; var count = 0; $('.oneListing').each(func ...
For a school project, I am working on developing a mobile-first website prototype that includes Google Maps integration. I have successfully added a ground overlay using this image, but I am facing issues with enabling the "my location layer". When I tried ...
My current project involves creating an API that retrieves data from Patients (id and name), Physicians (id and name), and Appointments (id, phyId, patId, app_date) in order to display the patients scheduled to see a specific physician. To achieve this, I ...
I am currently using pannellum (http://www.mpetroff.net/archives/2012/08/28/pannellum-1-2/) with Three.js to work on local files. Everything works smoothly for small files, but when I try to load a 5000 x 10000 image, it fails to load. I'm wondering w ...
My react components require dynamic preloading of values from nested arrays within an array of data. import React, { useEffect } from "react"; export function loadComponent({ config, LayoutRenderer }) { const loadModules = (name) => q ...
On a server that I have access to but not ownership of, there is a node js / express application running on port 3000. Various scripts are typically executed manually from the terminal or via cron job. My goal is to have a button on the client-side that tr ...
Recently, I've delved into the world of ReactJS with a Python Flask Backend. While trying to render the template via Flask, Chrome Console shows this client error: Error: Cannot find module 'jstransform/visitors/es6-templates-visitors' ...
Here is a code snippet to consider: var some_expensive_task = function(i) { setTimeout(function() { var a = 1; while (a < 100000000) { Math.sqrt(a); ++a; } console.log('finished set&apo ...
I am trying to create a table that displays only the rows selected in a dropdown menu. Here is an example: If "All" is selected, the table should display all rows. If "2017" is selected, the table should display only the rows that have "2017" in the sec ...