{"id":13670400,"url":"https://github.com/pastelsky/network-idle-callback","last_synced_at":"2025-04-27T13:32:15.237Z","repository":{"id":30559470,"uuid":"125360637","full_name":"pastelsky/network-idle-callback","owner":"pastelsky","description":"Like requestIdleCallback, but for detecting network idle","archived":false,"fork":false,"pushed_at":"2022-12-10T17:04:34.000Z","size":1106,"stargazers_count":138,"open_issues_count":15,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-05T18:52:00.498Z","etag":null,"topics":["callback","idle","network","requestidlecallback","service-worker"],"latest_commit_sha":null,"homepage":"https://pastelsky.github.io/network-idle-callback","language":"JavaScript","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/pastelsky.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-15T11:58:53.000Z","updated_at":"2024-12-28T04:35:32.000Z","dependencies_parsed_at":"2023-01-14T17:15:46.316Z","dependency_job_id":null,"html_url":"https://github.com/pastelsky/network-idle-callback","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pastelsky%2Fnetwork-idle-callback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pastelsky%2Fnetwork-idle-callback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pastelsky%2Fnetwork-idle-callback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pastelsky%2Fnetwork-idle-callback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pastelsky","download_url":"https://codeload.github.com/pastelsky/network-idle-callback/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251145621,"owners_count":21543073,"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":["callback","idle","network","requestidlecallback","service-worker"],"created_at":"2024-08-02T09:00:41.065Z","updated_at":"2025-04-27T13:32:14.163Z","avatar_url":"https://github.com/pastelsky.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# networkIdleCallback\n\u003cimg src=\"https://img.shields.io/npm/v/network-idle-callback.svg\" /\u003e \u003cimg src=\"https://img.shields.io/npm/l/network-idle-callback.svg\" /\u003e\n\n\n`networkIdleCallback` works similar to [`requestIdleCallback`](https://developers.google.com/web/updates/2015/08/using-requestidlecallback), detecting and notifying you when network activity goes idle in your current tab.\n\nIt can be used to load low priority resources such as analytics, or for preloading assets required in the future.\n\n\u003cb\u003e\u003ca target=\"_blank\" href=\"https://pastelsky.github.io/network-idle-callback\"\u003eDEMO\u003c/a\u003e\u003c/b\u003e\n\n## Installation\n```bash\nnpm install network-idle-callback\n```\n\n## Usage\n### Setup\n`networkIdleCallback` uses a serviceworker to detect network activity. The easiest way to begin monitoring network activity is by importing the script into your serviceworker, and wrapping your fetch calls as such -\n\n```js\n// via CDN\nimportScripts('https://unpkg.com/network-idle-callback@1.0.1/lib/request-monitor.js')\n\n// or if you process your sw through a bundler\nimport 'network-idle-callback/lib/request-monitor'\n\nself.addEventListener('fetch', function (event) {\n  self.requestMonitor.listen(event) // Listen to outgoing network requests\n \n  const fetchPromise = fetch(event.request)\n    .then((response) =\u003e {\n      self.requestMonitor.unlisten(event) // Unlisten to successful requests\n      return response\n    })\n    .catch((e) =\u003e {\n      self.requestMonitor.unlisten(event) // Unlisten to failed requests\n    })\n\n  event.respondWith(fetchPromise)\n});\n```\nand that's it. You're good to start using the callback - \n\n```js\nimport { networkIdleCallback } from 'network-idle-callback'\n\nnetworkIdleCallback(() =\u003e {\n  console.log('Execute low network priority tasks here.')\n}, { timeout: 1000 })\n```\nThe callback will be passed a params object containing - \n\n1. `didTimeout` (_boolean_) - Indicates whether the callback was called due to expiration of the deadline.\n\n### Changing timeouts\nThere are a couple of ways in which the networkIdleCallback can be customized - \n\n1. **Idle Deadline** : (_default 0ms_) It is recommended to specify a deadline — the maximum time to wait for network idle, after the expiry of which the callback will be executed regardless of network activity.\n``` js\nnetworkIdleCallback(() =\u003e {\n  console.log('Execute low network priority tasks here.')\n}, { timeout: 1000 /* here */ })\n```\n\n2. **Network activity cooldown** - By default, `networkIdleCallback` waits for a period of 200ms after network activity ceases to trigger the callbacks. If you want to reduce this _debounce_ time, in your serviceworker, you can set - \n\n```js\nself.requestMonitor.minIdleTime = 0 // or any other value\n```\n\n### Cancelling a callback\nJust like `requestIdleCallback`, calling `networkIdleCallback` returns a unique identifier, which can be used to cancel the execution of the callback - \n\n```js\nimport { networkIdleCallback, cancelNetworkCallback } from 'network-idle-callback'\n\nconst id = networkIdleCallback(() =\u003e {\n  console.log('Execute low network priority tasks here.')\n}, { timeout: 1000 })\n\n// Cancel the callback\ncancelNetworkCallback(id)\n```\n\n## Browser compatibility\n`networkIdleCallback` should work in all browsers that support serviceworkers. For browsers that don't, the callback will be still be called, but immediately, without any delay.\n\n## FAQ's\n\n**1. Why not just use the `window.onload` instead ?**\n\n- `window.onload` also waits for all of the page's rendering is complete. \nIf the rendering work is expensive and takes a long time, there could be \na time difference between when the resources have finished loading (network idle) and when `window.load` fires.\n\n- A larger limitation, perhaps, is that it fires only once during the lifecycle of the page. Hence it cannot be used to \ndetect network idle states occurring after page load. This can especially be of use for preloading content in\nsingle page applications.\n\n**2. When exactly does the `networkIdleCallback` execute ?**\n\n\u003cimg src=\"https://github.com/pastelsky/network-idle-callback/blob/master/diagram.svg\" alt=\"Lifecycle\" width=\"500\" /\u003e\n\n**3. Does `networkIdleCallback` take into account network activity arising from other clients?**\n\nSince a serviceworker can only listen to network activity arising from the domains it was registered with, without the support of a browser primitive, there is currently no way to detect network activity from other domains, or apps other than your web browser. \n\nHowever, more often than not, this is the behavior you expect, as you're only concerned with prioritizing resource loading in the context of the current tab.\n\n**4. What happens if my serviworker is installed, but not activated?**\n\nIn the absence of a activated service worker, the callbacks will be executed immediately. If you can, calling `skipWaiting()` in the activation phase will skip the activation delay.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpastelsky%2Fnetwork-idle-callback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpastelsky%2Fnetwork-idle-callback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpastelsky%2Fnetwork-idle-callback/lists"}