How to change PWA workbox cache strategy in Create-React-App 2 - create-react-app

Create-react-app v2 uses the workbox cacheFirst strategy. I want to use staleWhileRevalidate. How can I create a custom service worker and add it too a exising app?

Please update to create-react-app v4 if you'd like more control over your service worker.
You can start a new project that will use a service worker that you can make changes to using:
npx create-react-app my-app --template cra-template-pwa
There are details in the current documentation.

Related

PWA - Register service worker in dev mode

I would like to try PWA with create react app version 4.0, i did manage to generate new project as below
npx create-react-app my-app --template cra-template-pwa-typescript
When i try to run npm start i don't see any service-worker.js registered in chrome browser but if i build and serve then it works fine. I would like to register service-worker.js in dev mode, so i followed this article Easy Workbox Integration with create-react-app I have removed the production environment check in serviceWorkerRegistration.ts but no luck.
serviceWorkerRegistration.ts
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator)
Please advise ?
The service worker is only enabled in the production environment, e.g. the output of npm run build. It's recommended that you do not enable an offline-first service worker in a development environment, as it can lead to frustration when previously cached assets are used and do not include the latest changes you've made locally.
from here: https://create-react-app.dev/docs/making-a-progressive-web-app/

Cordova plugin with Capacitor and Quasar

I'm building an app with Quasar and Capacitor.
I'd like to use phonegap-plugin-barcodescanner(or is there any other option for QR reading?).
I've installed plugin with npm i phonegap-plugin-barcodescanner to src-capacitor project. What's my next steps, do I need to register it in capacitor.config?
How do I call scan function on it?
I've figured it out. You need to run npx cap sync in src-capacitor folder. And than the plugin accessible via cordova.plugins.barcodeScanner like it was previously with Cordova

Is it possible to use devextreme with create-react-app without ejecting?

TL;DR: Is it possible to use devextreme in an application created with create-react-app without ejecting?
I created an app using create-react-app.
I npm installed devextreme
Next step according to the manual is webpack configuration, which can't really be done without ejecting from create-react-app.
Is there a way around this?

Vue js Cli app running in another computer

I would like to share my Vue js application project which is in my repository with a friend. So I used vue-cli, npm/yarn and webpack to develope.
I would like to know if he needs to install also cli to run the app on his computer, or just npm install and npm run? thanks
No, the vue-cli is not strictly necessary. However, if you're used to using vue build to build & run your app, your friend might want that too. He/she could just use some other way to run the webpack build operation if installing vue-cli isn't an option.

Excluding npm modules from webpack in raeact-boilerplate

I have a project based on react-boilerplate.
This seed project keeps server and client code in the same repo.
I want to use socket.io.
So I type:
yarn add socket.io
This adds socket.io to the package.json.
BUT I think this is then used by webpack to attempt to create a bundle.
Which then fails because socket.io is a Node.js module that depends on Node.js things like fs.
How can I stop webpack from attempting to bundle socket.io in this instance?
Add the library name to the exclude array under internals/config then dllPlugin.defaults.excldue.