score:0
ditch all the other ideas and go for the cra-append-sw. it will save you a lot of time and pain.
it's as simple as installing the package, creating the service worker file in your main folder, and modifying your start
and build
commands in package.json file like this:
"start": "cra-append-sw --mode dev --env ./.env ./custom-sw.js && react-scripts start",
"build": "cra-append-sw --env ./.env ./custom-sw.js && react-scripts build",
and then you make sure to register the separate service worker in dev mode:
if ('serviceworker' in navigator) {
console.log('trying to register custom sw');
navigator.serviceworker
.register('./firebase-messaging-sw.js')
.then(function (registration) {
console.log('registration successful, scope is:', registration.scope);
})
.catch(function (err) {
console.log('service worker registration failed, error:', err);
});
}
if like me you need access to environment variables in the service worker to initialize the firebase messaging module, this is the only simple option that doesn't require ejecting cra.
i decided to post this answer because i myself overlooked the comments on the other answer and lost time unnecessarily looking for this solution.
score:2
if you would prefer disable the built in service-worker prior to your initial production deployment, then remove the call to serviceworkerregistration.register()
from src/index.js
and add your own service worker.
if your site/app has already been in production then swap it out for serviceworkerregistration.unregister().
after the user visits your page that has serviceworkerregistration.unregister()
, the service worker will be uninstalled and it might take up to 24 hours for the cache to be invalidated (depending on how the service worker is served)
the other option would be to eject and configure their built in solution.
Source: stackoverflow.com
Related Query
- Workaround for cache size limit in Create React App PWA service worker
- Add Service Worker to Create React App Project
- Adding custom Typescript type declaration for a node module in Create React App
- Create React App PWA ERROR: Does not register a service worker that controls page and start_url
- Create React App PWA - change caching strategy of service worker
- How to include custom JS files in to React create app
- Custom Proxy in Create React App using Typescript
- Create React App adding CORS header
- adding service worker to reactjs app
- adding a custom service worker to create-react-app
- react scripts build service worker not caching custom files
- How do I exclude url's from service worker scope in create react app, without having to eject?
- When I try to register a service worker file in react app it will give me a reference error: navigator is not defined
- Set a global service for import in Create React App
- update PWA react app (using CRA) with user clicked button through service worker
- React app on Vercel - 404 not found error after adding Web Worker
- Deploying a production build of React app to Google App Engine: Service worker registration fails
- Create a secure layer to hide web service from non-authenticated users, in an React App
- create react app with express on azure app service fails to start
- Adding a second html page in a Create React App project
- How to configre Create React Apps default Service Worker to cache assets that are not in react src Context (public Folder)?
- create react app not picking up .env files?
- How to create a React app directly in the current folder
- What is service worker in react js
- What is the difference between NextJs and Create React App
- How to create multiple page app using react
- When to use a react framework such as Next or Gatsby vs Create React App
- React create app hot reload is not always working on linux
- Cannot find module 'caniuse-lite/dist/unpacker/agents' when running create react app
- The react-scripts package provided by Create React App requires a dependency:
More Query from same tag
- React Bootstrap in JSX file in Meteor
- Autocomplete form error: Uncaught TypeError: data.match is not a function
- React setState and flux action update
- Cannot import css files (react.js)
- React addEventListener issue with useEffect
- React app with Stripe support, sending custom fields to access in backend
- React - set state using button and pass it as props
- How do I pass a component as a prop in React and Typescript?
- React only display components of array properties that exist
- How to avoid stale state in React functional component
- How to parse data through a button from one component to another
- Convert class component to functional component in React
- Split array value using reactjs
- Animate React Modal
- How to simplify this react-redux reducer state change
- How can I use unirest API calls in React?
- how to get data from form to redirect SimpleForm edit
- How to convert p5.Something() to fit react
- Can't access prop in another component?
- React js not navigating to pages using react router
- reactJs import ckeditor config correctly - CORS
- How to Create 3(country,state and city) dropdowns that populates data with each other in react js
- Manual DOM updates and React Component Rendering using forceUpdate()
- Different ways to import files in React
- How to transfer a state from a component to another?
- When doing role based routing in react, is use of switch statement and showing different component based on role a security issue?
- Toggling dynamically created checkbox in react
- A node cannot exists twice in the state tree ( mobx-state-tree )
- creating a modal with a button, React, Material UI
- Do we still need functional setState way in react hooks?