AppCache Webpack Plugin

1.4.0 verified Sat Apr 25 auth: no javascript deprecated

Webpack plugin (v1.4.0, last updated 2016) to generate HTML5 Application Cache manifests (.appcache) for offline web apps. Supports cache, network, fallback, settings, and exclude options. Deprecated due to the HTML5 AppCache spec being removed from browsers. Alternatives: Service Workers. Webpack peer dependency: >=0.11 <=4.x.x.

Common errors

error Cannot find module 'appcache-webpack-plugin' ↓

cause npm package not installed.

fix

npm install appcache-webpack-plugin --save-dev

error TypeError: AppCachePlugin is not a constructor ↓

cause Using default import instead of require, or missing `new` keyword.

fix

Use const AppCachePlugin = require('appcache-webpack-plugin'); and instantiate with new.

error Error: webpack <version> does not support this plugin. Ensure webpack version is >=0.11 and <=4.x.x. ↓

cause Incompatible webpack version.

fix

Downgrade webpack to 4.x.x or use a different plugin that supports your webpack version.

Warnings

deprecated HTML5 Application Cache (AppCache) is deprecated and removed from modern browsers. Use Service Workers instead. ↓

fix Migrate to a service worker plugin like workbox-webpack-plugin.

gotcha The plugin outputs an .appcache file but does not update the HTML <html> manifest attribute automatically. You must do that manually or via another plugin. ↓

fix Add manifest='my-manifest.appcache' to the <html> tag in your HTML template.

gotcha If `network` option is not set, it defaults to ['*']; if you set it to null or an empty array, no network access is allowed. ↓

fix Explicitly set `network: ['*']` or `network: null` based on desired behavior.

breaking Webpack 5 is not supported; this plugin only works with webpack <=4.x.x. ↓

fix Use an alternative plugin like serviceworker-webpack-plugin or workbox-webpack-plugin.

gotcha Exclude patterns: if you exclude .js files via /.*\.js$/, the bundle itself (a .js file) will be excluded from the manifest, which may not be intended. ↓

fix Double-check exclude patterns to ensure critical assets are not omitted.

Install

npm install appcache-webpack-plugin

yarn add appcache-webpack-plugin

pnpm add appcache-webpack-plugin

Imports

AppCachePlugin

wrong

import AppCachePlugin from 'appcache-webpack-plugin';

correct

const AppCachePlugin = require('appcache-webpack-plugin');

CommonJS only; no ESM export.

require('appcache-webpack-plugin')

wrong

import AppCachePlugin from 'appcache-webpack-plugin';

correct

const AppCachePlugin = require('appcache-webpack-plugin');

Use require, not import.

plugin instantiation
wrong
```
AppCachePlugin()
```
correct
```
new AppCachePlugin({ ... })
```
Must be instantiated with `new`.

Quickstart

Generates an appcache manifest with custom cache, network, fallback, exclude patterns, and output filename.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const AppCachePlugin = require('appcache-webpack-plugin');

module.exports = {
  entry: './app.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new AppCachePlugin({
      cache: ['image.jpg'],
      network: ['*'],
      fallback: ['fallback.html'],
      settings: ['prefer-online'],
      exclude: ['file.txt', /.*\.js$/],
      output: 'my-app.appcache'
    })
  ]
};