{"id":20251,"library":"offline-plugin","title":"offline-plugin","description":"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).","status":"maintenance","version":"5.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/NekR/offline-plugin","tags":["javascript","webpack","plugin","offline","cache","caching","storage","service-worker","serviceworker"],"install":[{"cmd":"npm install offline-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add offline-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add offline-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency when using as webpack plugin; supported versions 2+ (dropped webpack 1 in v5.0.0).","package":"webpack","optional":false}],"imports":[{"note":"Default import works in both ESM and CJS. Do not use .default with require.","wrong":"const OfflinePlugin = require('offline-plugin').default","symbol":"OfflinePlugin","correct":"import OfflinePlugin from 'offline-plugin'"},{"note":"CJS require returns the constructor directly; no destructuring needed.","wrong":"const { OfflinePlugin } = require('offline-plugin')","symbol":"OfflinePlugin (require)","correct":"const OfflinePlugin = require('offline-plugin')"},{"note":"The runtime module is a namespace object, so use import * as. Alternatively use require('offline-plugin/runtime') in CJS.","wrong":"import OfflinePluginRuntime from 'offline-plugin/runtime'","symbol":"Runtime (in browser)","correct":"import * as OfflinePluginRuntime from 'offline-plugin/runtime'"},{"note":"AppCache is an option, not a separate export.","wrong":"import { AppCache } from 'offline-plugin'","symbol":"AppCache","correct":"import OfflinePlugin from 'offline-plugin';\nnew OfflinePlugin({ AppCache: true })"}],"quickstart":{"code":"// webpack.config.js\nimport OfflinePlugin from 'offline-plugin';\n\nexport default {\n  plugins: [\n    new OfflinePlugin({\n      appShell: '/index.html',\n      caches: {\n        main: ['app.*.js', 'vendor.*.js', 'styles.*.css'],\n        additional: ['*.png', '*.svg', '*.jpg'],\n        optional: [':rest:']\n      },\n      ServiceWorker: {\n        events: true,\n        navigateFallbackURL: '/'\n      },\n      AppCache: false\n    })\n  ]\n};\n\n// client.js (e.g. entry point)\nimport * as OfflinePluginRuntime from 'offline-plugin/runtime';\nOfflinePluginRuntime.install();","lang":"typescript","description":"Configures OfflinePlugin in webpack and installs the runtime to activate ServiceWorker caching."},"warnings":[{"fix":"Add AppCache: true to plugin options if you need AppCache fallback.","message":"AppCache is now disabled by default. To enable it, set AppCache: true.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Upgrade to webpack 2+ and Node 6+.","message":"Support for webpack 1 and Node 4 dropped.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Use appShell: '/shell' to define fallback for navigations.","message":"ServiceWorker.navigateFallbackURL and navigateFallbackForRedirects removed; use appShell option instead.","severity":"deprecated","affected_versions":">=5.0.0"},{"fix":"Upgrade to v5.0.7 or later.","message":"If using terser-webpack-plugin, ensure offline-plugin is compatible; fixed in v5.0.7.","severity":"gotcha","affected_versions":"<=5.0.6"},{"fix":"Call OfflinePluginRuntime.install() in your app's entry point.","message":"Runtime must be installed on every page that needs offline support. One install per page is enough.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use const OfflinePlugin = require('offline-plugin') (CJS) or import OfflinePlugin from 'offline-plugin' (ESM).","cause":"Improper import style: using require('offline-plugin').default or destructuring.","error":"Error: OfflinePlugin is not a constructor"},{"fix":"Install offline-plugin as a dependency (not devDependency) and use import * as OfflinePluginRuntime from 'offline-plugin/runtime'.","cause":"Missing runtime file or incorrect import path.","error":"Cannot find module 'offline-plugin/runtime'"},{"fix":"Ensure the service worker file is served with text/javascript MIME type and CSP allows worker-src.","cause":"ServiceWorker script URL is not served with correct MIME type or is blocked by CSP.","error":"ServiceWorker registration failed: InvalidStateError"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}