1. offline-plugin for webpack

这个插件旨在为webpack项目提供离线体验。它使用ServiceWorker，而AppCache作为底层的备用。简单地把这个插件包含在你的webpack.config，以及在客户端脚本中附带运行时（runtime），您的项目将通过缓存所有(或部分)webpack输出资源来离线。

1.1. 安装

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

1.2. 设置

首先，在webpack.config中使用options实例化插件：

// webpack.config.js 

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

module.exports = {
  // ...

  plugins: [
    // ... 其他插件
    // 如果OfflinePlugin是最后一个被添加的插件，那就更好了
    new OfflinePlugin()
  ]
  // ...
}

然后添加 运行时到你的入口文件(主入口):

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

ES6/Babel/TypeScript

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

[info] 注：

关于 TypeScript的更多使用细节，请参见

1.3. Docs

• Caches
• Update process
• Cache Maps
• Runtime API
• Configuration options
• FAQ
• Troubleshooting

1.4. 示例

• 单页应用

1.5. 文章

• 使用Webpack的Offline Plugin轻松离线的第一款应用
• 处理客户端应用程序更新(使用Service Workers)

1.6. 选项

所有选项都是可选的，而offline-plugin可以在不指定任何选项的情况下使用。

查看所有可用选项。

1.7. 谁在使用 offline-plugin

1.7.1. 项目

• React Boilerplate
• Phenomic
• React, Universally

1.7.2. 渐进式应用（PWA）

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

如果你正在使用 offline-plugin, 请随意提交一份PR，将你的项目添加到这个列表中。.