Registry / web-framework / offline-plugin

offline-plugin

JSON →
library5.0.7jsnpmunverified

A webpack plugin that generates a ServiceWorker and optionally AppCache to make webpack projects work offline. Current stable version is 5.0.7 (latest release 2020-08-05). It caches all webpack output assets automatically, with options to customize caching, appShell, navigationPreload, and more. Compared to Workbox, it is simpler to set up but less flexible and has a slower release cadence (last stable release over 4 years ago).

npm install offline-plugin
INSTALL
IMPORT
SIG · OFFLINE-PLUGIN
O
offline-plugin
web-frameworkjavascriptv5.0.7
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

OfflinePlugin
import OfflinePlugin from 'offline-plugin'
const OfflinePlugin = require('offline-plugin').default
Default import works in both ESM and CJS. Do not use .default with require.
OfflinePlugin (require)
const OfflinePlugin = require('offline-plugin')
const { OfflinePlugin } = require('offline-plugin')
CJS require returns the constructor directly; no destructuring needed.
Runtime (in browser)
import * as OfflinePluginRuntime from 'offline-plugin/runtime'
import OfflinePluginRuntime from 'offline-plugin/runtime'
The runtime module is a namespace object, so use import * as. Alternatively use require('offline-plugin/runtime') in CJS.
AppCache
import OfflinePlugin from 'offline-plugin'; new OfflinePlugin({ AppCache: true })
import { AppCache } from 'offline-plugin'
AppCache is an option, not a separate export.

Configures OfflinePlugin in webpack and installs the runtime to activate ServiceWorker caching.

// webpack.config.js import OfflinePlugin from 'offline-plugin'; export default { plugins: [ new OfflinePlugin({ appShell: '/index.html', caches: { main: ['app.*.js', 'vendor.*.js', 'styles.*.css'], additional: ['*.png', '*.svg', '*.jpg'], optional: [':rest:'] }, ServiceWorker: { events: true, navigateFallbackURL: '/' }, AppCache: false }) ] }; // client.js (e.g. entry point) import * as OfflinePluginRuntime from 'offline-plugin/runtime'; OfflinePluginRuntime.install();
Debug
Known issues
breakingAppCache is now disabled by default. To enable it, set AppCache: true.
fix
Add AppCache: true to plugin options if you need AppCache fallback.
affects: >=5.0.0
breakingSupport for webpack 1 and Node 4 dropped.
fix
Upgrade to webpack 2+ and Node 6+.
affects: >=5.0.0
deprecatedServiceWorker.navigateFallbackURL and navigateFallbackForRedirects removed; use appShell option instead.
fix
Use appShell: '/shell' to define fallback for navigations.
affects: >=5.0.0
gotchaIf using terser-webpack-plugin, ensure offline-plugin is compatible; fixed in v5.0.7.
fix
Upgrade to v5.0.7 or later.
affects: <=5.0.6
gotchaRuntime must be installed on every page that needs offline support. One install per page is enough.
fix
Call OfflinePluginRuntime.install() in your app's entry point.
affects: all
Errors
Common errors & fixes
Error: OfflinePlugin is not a constructor
Improper import style: using require('offline-plugin').default or destructuring.
fix
Use const OfflinePlugin = require('offline-plugin') (CJS) or import OfflinePlugin from 'offline-plugin' (ESM).
Cannot find module 'offline-plugin/runtime'
Missing runtime file or incorrect import path.
fix
Install offline-plugin as a dependency (not devDependency) and use import * as OfflinePluginRuntime from 'offline-plugin/runtime'.
ServiceWorker registration failed: InvalidStateError
ServiceWorker script URL is not served with correct MIME type or is blocked by CSP.
fix
Ensure the service worker file is served with text/javascript MIME type and CSP allows worker-src.
Upgrade
Version history
5.0.7latest on npm
Audit
Dependencies
webpackrequiredPeer dependency when using as webpack plugin; supported versions 2+ (dropped webpack 1 in v5.0.0).
Agent activity
2 hits · last 30 days
node
2
Resources
offline-plugin — npm install offline-plugin · libregistry