{"id":13450934,"url":"https://github.com/JCofman/react-hook-use-service-worker","last_synced_at":"2025-03-23T16:32:35.768Z","repository":{"id":43988374,"uuid":"242335032","full_name":"JCofman/react-hook-use-service-worker","owner":"JCofman","description":"A react hook to register a service worker","archived":false,"fork":false,"pushed_at":"2023-08-09T18:15:45.000Z","size":2756,"stargazers_count":15,"open_issues_count":23,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-28T17:39:39.634Z","etag":null,"topics":["react","service-worker"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-hook-use-service-worker","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JCofman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-02-22T12:07:55.000Z","updated_at":"2023-06-12T09:32:14.000Z","dependencies_parsed_at":"2024-04-18T12:51:27.204Z","dependency_job_id":"714cb6b1-036b-46d3-a309-377def7ecda2","html_url":"https://github.com/JCofman/react-hook-use-service-worker","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JCofman%2Freact-hook-use-service-worker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JCofman%2Freact-hook-use-service-worker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JCofman%2Freact-hook-use-service-worker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JCofman%2Freact-hook-use-service-worker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JCofman","download_url":"https://codeload.github.com/JCofman/react-hook-use-service-worker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245131131,"owners_count":20565775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","service-worker"],"created_at":"2024-07-31T07:00:40.491Z","updated_at":"2025-03-23T16:32:35.423Z","avatar_url":"https://github.com/JCofman.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/jcofman"],"categories":["Packages"],"sub_categories":[],"readme":"# React use service worker hook \u0026amp; Utilities \u0026middot;\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n\u003e Get everything out of your PWA\n\nThis is a [React Hook](https://reactjs.org/docs/hooks-overview.html) which can register a service worker.\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n**Table of Contents** _generated with [DocToc](https://github.com/thlorenz/doctoc)_\n\n- [React use service worker hook \u0026amp; Utilities \u0026middot;](#react-use-service-worker-hook-amp-utilities-middot)\n  - [Affiliate](#affiliate)\n  - [🎯 Objective](#-objective)\n  - [🚀 Installation](#-installation)\n  - [Usage](#usage)\n  - [Contribute and Commands](#contribute-and-commands)\n    - [Jest](#jest)\n    - [TypeScript](#typescript)\n  - [Continuous Integration](#continuous-integration)\n  - [Contributors](#contributors)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Affiliate\n\nIf you like to support my OSS work you could \"buy me a coffee\" or want to take a look on tools I recommend you could checkout.\n\n\u003ctable\u003e\u003ctr\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://www.buymeacoffee.com/jcofman\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/lato-yellow.png\" alt=\"Buy Me A Coffee\" width=\"201\" height=\"51\" \u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBuy me a coffee\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e My personal patreon\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://a.paddle.com/v2/click/49831/106566?link=1947\" target=\"_blank\"\u003e\u003cimg src=\"https://img.stackshare.io/service/6882/687474703a2f2f692e696d6775722e636f6d2f446d6d4a56335a2e706e67.png\" alt=\"Buy Me A Coffee\" width=\"50\" height=\"50\" \u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSizzy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e A super useful App when developing for different screens\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n## 🎯 Objective\n\nMake it easier to target low-end devices while progressively adding high-end-only features on top. Using these hooks and utilities can help you give users a great experience best suited to their device and network constraints.\n\n## 🚀 Installation\n\n`npm i react-hook-use-service-worker --save` or `yarn add react-hook-use-service-worker`\n\n## Usage\n\nYou can import the hook and use the hook like that\n\n```js\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n  useServiceWorker,\n  ProvideServiceWorker,\n} from 'react-hook-use-service-worker';\n\nconst MyComponent = () =\u003e {\n  const mySW = useServiceWorker();\n\n  return \u003cdiv\u003ecurrent service worker status: {mySW.serviceWorkerStatus}\u003c/div\u003e;\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cProvideServiceWorker fileName={'/my-sw.js'}\u003e\n        \u003cMyComponent\u003e\u003c/MyComponent\u003e\n      \u003c/ProvideServiceWorker\u003e\n    \u003c/div\u003e\n  );\n};\nexport default App;\n```\n\nand your service worker file e.g. `/my-sw.js`. Make sure you host your service worker in the root folder of your project.\n\n```js\n// my-sw.js\nconst version = 'my-sw 1';\n\nconst main = async () =\u003e {\n  console.log(`Service Worker ${version} is starting ...`);\n};\n\nconst onInstall = async evt =\u003e {\n  console.log(`Service Worker ${version} installed.`);\n  self.skipWaiting();\n};\nconst onActivate = async evt =\u003e {\n  evt.waitUntil(handleActivation());\n};\n\nconst handleActivation = async () =\u003e {\n  await clients.claim();\n\n  console.log(`Service Worker ${version} activated.`);\n};\n\nmain().catch(console.error);\n\nself.addEventListener('install', onInstall);\nself.addEventListener('activate', onActivate);\n```\n\n## Contribute and Commands\n\nThe recommended workflow is to run TSDX in one terminal:\n\n```bash\nnpm start # or yarn start\n```\n\nThis builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.\n\nThen run the example inside another:\n\n```bash\ncd example\nnpm i # or yarn to install dependencies\nnpm start # or yarn start\n```\n\nThe default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, [we use Parcel's aliasing](https://github.com/palmerhq/tsdx/pull/88/files).\n\nTo do a one-off build, use `npm run build` or `yarn build`.\n\nTo run tests, use `npm test` or `yarn test`.\n\n### Jest\n\nJest tests are set up to run with `npm test` or `yarn test`. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.\n\n### TypeScript\n\n`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.\n\n## Continuous Integration\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ashinga48\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/8008140?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRavi Teja\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/JCofman/react-hook-use-service-worker/commits?author=ashinga48\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://jcofman.de\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/2118956?v=4\" width=\"100px;\" alt=\"Jacob Cofman\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJacob Cofman\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/JCofman/jc-website/commits?author=JCofman\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJCofman%2Freact-hook-use-service-worker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJCofman%2Freact-hook-use-service-worker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJCofman%2Freact-hook-use-service-worker/lists"}