
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@medipass/react-service-worker
Advanced tools
A headless React component that wraps around the Navigator Service Worker API.
A headless React component that wraps around the Navigator Service Worker API to manage your service workers. Inspired by Create React App's service worker registration script.
npm install @medipass/react-service-worker --save
or install with Yarn if you prefer:
yarn add @medipass/react-service-worker
Import the <WithServiceWorker>
component and wrap it around your application.
import React from 'react';
import WithServiceWorker from 'react-service-worker';
import App from './App';
export default () => (
<WithServiceWorker publicServiceWorkerDest="/service-worker.js">
<App />
</WithServiceWorker>
);
import React from 'react';
import WithServiceWorker from 'react-service-worker';
import App from './App';
export default () => (
<WithServiceWorker
onError={err => console.log(`An error occured: ${err}`)}
onInstalled={() => console.log('Service worker installed')}
onUpdated={() => console.log('Service worker updated')}
publicServiceWorkerDest="/service-worker.js"
>
{({ registration, update, unregister }) => (
<div>
<App />
<button onClick={update}>Update service worker</button>
<button onClick={unregister}>Unregister service worker</button>
</div>
)}
</WithServiceWorker>
);
<WithServiceWorker>
props
string
The destination of where your service worker is located.
Example usage:
<WithServiceWorker publicServiceWorkerDest="/service-worker.js">
string
| Optional
The public URL of your application. Defaults to the root origin.
Example usage:
<WithServiceWorker publicUrl="https://example.com/app">
function(error: Error)
| Optional
Invoked when an error occurs during service worker registration.
Example usage:
<WithServiceWorker onError={err => console.log(`An error occured! Error: ${err}`)}>
function()
| Optional
Invoked when the service worker is installed.
Example usage:
<WithServiceWorker onInstalled={() => console.log('Service worker successfully installed.')}>
function()
| Optional
Invoked when the service worker is updated.
Example usage:
<WithServiceWorker onUpdated={() => console.log('Service worker successfully updated.')}>
boolean
| Optional | Default:true
If true
, service worker will be registered when the component is mounted.
Example usage:
<WithServiceWorker registerOnMount={process.env.PRODUCTION}>
children
Render Props
Object
The instance of the registered service worker.
function()
When invoked, register
will register the service worker.
function()
When invoked, update
will update the service worker.
function()
When invoked, unregister
will unregister the service worker.
FAQs
A headless React component that wraps around the Navigator Service Worker API.
The npm package @medipass/react-service-worker receives a total of 4 weekly downloads. As such, @medipass/react-service-worker popularity was classified as not popular.
We found that @medipass/react-service-worker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.