Network Idle

Detect when the browser has not made a network request within a specified amount of time. This implementation does not depend on a Service Worker and instead depends on a PerformanceObserver listening for resource entries.

Installation

npm i network-idle

Types

CallbackType

type CallbackType = () => void

IOptions

interface IOptions {
  filter?: string[]
}

• filter: Sometimes you may want to perform a request in your idle callback. To prevent that request from triggering another callback, add its URL to the filter string array. Works on both requestNetworkIdle and networkIdleCallback.

requestNetworkIdle(() => {
  fetch('https://foo.bar/baz/?qux=corge') // Won't trigger callback again
}, 1000, { 
  filter: [ 'https://foo.bar/baz/?qux=corge' ] 
})

API

requestNetworkIdle

Calls the callback when there has not been a network request in the last timeout milliseconds. The callback will be called every time the network has been idle for the specified amount of time.

Signature

requestNetworkIdle(callback: CallbackType, timeout: number, options: IOptions = {}): number

Arguments

• callback () => void: The function to call when the network is idle.
• timeout number: How long there should be no network requests for the browser to be considered idle.
• options IOptions: Additional configuration options.

Returns

• id number: Callback id

import { requestNetworkIdle } from 'network-idle'

// No network requests in the last 500 milliseconds
requestNetworkIdle(() => {
  // Called every time the network is idle
  console.log('Network is idle!')
}, 500)

networkIdleCallback

Calls the callback when there has not been a network request in the last timeout milliseconds. Unlike requestNetworkIdle, this method will only be called the first time the idle condition is met.

Signature

networkIdleCallback(callback: CallbackType, timeout: number, options: IOptions = {}): number

Arguments

• callback () => void: The function to call when the network is idle.
• timeout number: How long there should be no network requests for the browser to be considered idle.
• options IOptions: Additional configuration options.

Returns

• id number: Callback id

import { networkIdleCallback } from 'network-idle'

// No network requests in the last 500 milliseconds
networkIdleCallback(() => {
  // Called the first time the network is idle
  console.log('Network is idle!')
}, 500)

clearNetworkIdle

Clears the network idle handler. This will clear both the requestNetworkIdle and networkIdleCallback events.

Signature

clearNetworkIdle(id: number): void

Arguments

• id number: The callback id returned by requestNetworkIdle or networkIdleCallback

Returns

• void

import { requestNetworkIdle, clearNetworkIdle } from 'network-idle'

const id = requestNetworkIdle(() => {
  console.log('Network is idle!')
}, 500)

clearNetworkIdle(id) // Observer disconnected and timeout cleared

import { networkIdleCallback, clearNetworkIdle } from 'network-idle'

const id = networkIdleCallback(() => {
  console.log('Network is idle!')
}, 500)

clearNetworkIdle(id) // Observer disconnected and timeout cleared