@yesmeck/offline-plugin



This plugin is intended to provide an offline experience for webpack projects. It uses ServiceWorker, and AppCache as a fallback under the hood. Simply include this plugin in your `webpack.config`, and the accompanying runtime in your client script, and your project will become offline ready by caching all (or some) of the webpack output assets.

Install

npm install offline-plugin [--save-dev]

Setup

First, instantiate the plugin in your webpack.config:

// webpack.config.js example

var OfflinePlugin = require('offline-plugin');

module.exports = {
  // ...

  plugins: [
    // ... other plugins
    // it's always better if OfflinePlugin is the last plugin added
    new OfflinePlugin()
  ]
  // ...
}

(and optionally configure with options)
Then, add the runtime into your entry file (typically main entry):

require('offline-plugin/runtime').install();

ES6/Babel/TypeScript

import * as OfflinePluginRuntime from 'offline-plugin/runtime';
OfflinePluginRuntime.install();

For more details of usage with TypeScript see here

offline-plugin isn't working?

:informationsource: Troubleshooting | FAQ

Docs

• Options
• Caches
• Update process
• Cache Maps
• Runtime API
• Configuration options

Examples

• Single Page Application

Articles

• Easy Offline First Apps With Webpack's Offline Plugin
• Handling Client Side App Updates (with Service Workers)

Options

All options are optional and offline-plugin can be used without specifying them.

See all available options here.

Who is using offline-plugin

Demo:
Progressive Web App built with offline-plugin

(source code)

Projects

• React Boilerplate
• Phenomic
• React, Universally

PWAs

• offline-plugin PWA
• Omroep West
• Preact (source)
• CodePan (source)
• Offline Kanban (source)
• Online Board (source)

If you are using offline-plugin, feel free to submit a PR to add your project to this list.

Like offline-plugin?

Support it by giving feedback, contributing, becoming a backer/sponsor or just by 🌟 starring the project!

Backers

Support us with a monthly donation and help us continue our activities. Become a backer

Contribution

See CONTRIBUTING

License

MIT
Logo

CHANGELOG

CHANGELOG