@uekichinos/browser-gate
v0.1.5
Published
Detect outdated browsers and redirect or block access. Supports feature detection (default), minimum version checks, and live latest-version checks via endoflife.date — use one, two, or all three together.
Maintainers
uekichinosReadme
@uekichinos/browser-gate
Detect outdated browsers and redirect or block access. Supports three detection modes — use one, two, or all three together.
- Feature detection (default) — checks for modern browser APIs
- Minimum version — fails if browser version is below your threshold
- Latest version — live check via endoflife.date API
Zero dependencies. Works via ESM, CommonJS, or <script> tag.
Installation
npm install @uekichinos/browser-gateQuick start
Place in <head> — before your app loads — so outdated browsers are caught early.
<script type="module">
import { browserGate } from '@uekichinos/browser-gate'
await browserGate({ redirect: '/outdated' })
</script>API
browserGate(options)
Returns a Promise<void>. Resolves silently if the browser passes all checks. Redirects or calls onOutdated if it fails.
await browserGate(options: BrowserGateOptions): Promise<void>Options
| Option | Type | Default | Description |
|---|---|---|---|
| redirect | string | — | URL to redirect to when outdated |
| onOutdated | (info: OutdatedInfo) => void | — | Callback instead of redirect |
| features | FeatureKey[] \| true \| false | true | Feature detection (see below) |
| minVersions | { chrome?: number, firefox?: number, safari?: number, edge?: number, opera?: number } | — | Minimum version per browser |
| checkLatest | boolean \| { tolerance?: number } | — | Live latest-version check |
Either redirect or onOutdated must be provided.
Detection modes
Mode 1 — Feature detection (default)
Runs automatically. Checks whether the browser supports five modern APIs:
| Feature | Absent in |
|---|---|
| globalThis | IE11, very old browsers |
| fetch | IE11 |
| Promise.allSettled | Chrome < 76, Firefox < 71, Safari < 13 |
| IntersectionObserver | IE11, old Safari |
| CSS.supports | IE11 |
// Default — checks all five features
await browserGate({ redirect: '/outdated' })
// Custom feature list
await browserGate({
redirect: '/outdated',
features: ['fetch', 'IntersectionObserver'],
})
// Disable feature detection
await browserGate({
redirect: '/outdated',
features: false,
minVersions: { chrome: 100 },
})Mode 2 — Minimum version
Checks the detected browser version against your thresholds. Only browsers you list are checked — others pass through.
Uses User-Agent parsing. Note: UA strings can be spoofed, so this is best combined with feature detection.
await browserGate({
redirect: '/outdated',
minVersions: {
chrome: 100,
firefox: 100,
safari: 15,
edge: 100,
},
})Mode 3 — Latest version (async)
Fetches live version data from endoflife.date and checks whether the browser is up to date.
Use tolerance to allow a few versions behind (useful since Chrome releases every 4 weeks).
Fails open on network error, timeout (5s), or unrecognised browser — your users are never blocked due to an API outage.
// Must be on latest
await browserGate({ redirect: '/outdated', checkLatest: true })
// Allow up to 2 versions behind
await browserGate({ redirect: '/outdated', checkLatest: { tolerance: 2 } })Combining all three modes
Any failing check triggers the outdated handler.
await browserGate({
redirect: '/outdated',
features: ['fetch', 'IntersectionObserver', 'CSS.supports'],
minVersions: { chrome: 100, safari: 15 },
checkLatest: { tolerance: 2 },
})onOutdated callback
Use onOutdated instead of redirect to handle the outdated case yourself.
await browserGate({
onOutdated: (info) => {
console.log(info.browser) // 'chrome'
console.log(info.version) // '80'
console.log(info.reasons)
// [
// 'Missing feature: IntersectionObserver',
// 'Below minimum version: chrome >= 100 (detected: 80)',
// ]
document.body.innerHTML = `<p>Please update your browser.</p>`
},
})Via <script> tag (no bundler)
<script src="https://unpkg.com/@uekichinos/browser-gate/dist/index.global.js"></script>
<script>
BrowserGate.browserGate({ redirect: '/outdated' })
</script>Supported browsers detected
| Browser | Detected via |
|---|---|
| Chrome | Chrome/XX in UA |
| Firefox | Firefox/XX in UA |
| Safari | Version/XX Safari in UA |
| Edge (Chromium) | Edg/XX in UA |
| Edge (legacy) | Edge/XX in UA |
| Opera | OPR/XX in UA |
Unrecognised browsers always pass through.
License
MIT © uekichinos