@jinshub/url-fallback NPM

Url Fallback

A tiny piece of JavaScript code that allows websites to set fallback urls for their js, css and img resources.

Getting Started

You can include and setup url fallback rules with:

<script data-url="your-cdn.com" data-fallbacks="your-backup-cdn.com,your-static-server.com/change/path" data-url-fallback src="https://cdn.jsdelivr.net/npm/@jinshub/url-fallback"></script>

Or make your own bundle with tools like webpack and rollup:

npm i @jinshub/url-fallback

import { addErrorListener } from '@jinshub/url-fallback'
addErrorListener({
	rules: [
		{
			url: 'your-cdn.com',
			fallbacks: [
				'your-backup-cdn.com',
				'your-static-server.com/change/path',
			],
		},
	]
})

Check if it works by opening the network panel in the Chrome Developer Tools and blocking a js or css resource, then refreshing the page.

Usage

Retry resources that matched the data-url 2 times:

<script data-url="your-website.com" data-fallbacks="your-website.com,your-website.com" data-url-fallback src="https://cdn.jsdelivr.net/npm/@jinshub/url-fallback"></script>

Retry resources that matched every fallback and replace it with other fallbacks if the data-url is empty:

<script data-fallbacks="your-website.com,your-backup-cdn.com,your-static-server.com" data-url-fallback src="https://cdn.jsdelivr.net/npm/@jinshub/url-fallback"></script>

Set multiple rules:

import { addErrorListener } from '@jinshub/url-fallback'
addErrorListener({
	rules: [
		{
			url: 'your-cdn.com',
			fallbacks: [
				'your-backup-cdn.com',
				'your-static-server.com/change/path',
			],
		},
		{
			fallbacks: [
				'your-img-cdn.com',
				'your-img-cdn1.com',
				'your-img-cdn2.com',
			],
		},
		{
			url: /your-cdn.com/,
			fallbacks: [
				'your-cdn.com',
				'your-cdn.com',
			],
		},
	]
})

For more details of addErrorListener, see the documentation