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.
Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site.
Become a sponsor
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
TypeScriptsee here
offline-plugin isn't working?
Docs
Examples
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
Projects
PWAs
offline-pluginPWA- Omroep West
- Preact (source)
- CodePan (source)
- Offline Kanban (source)
- Online Board (source)
- Fluid Outliner (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
Backers
Support us with a monthly donation and help us continue our activities. [Become a backer]
Contribution
See CONTRIBUTING
License
CHANGELOG
-
写于 2017.08.15 谈起PWA，许多人可能还只停留在“了解”的层面，比较少在实践中真正地尝试过，更多的仅仅是对着网上的教程和例子大概玩过。然而，网络上的例子多是简单的demo，鲜有与真正的开发相结合，例如和webpack的工程化结合。这篇文章将会从一个webpack plugin出发，谈一谈如何使用这个名为offline-plugin的webpack插件轻松实现PWA。 由于PWA相关的文
-
一、插件目标(goal) 1、analyze：分析项目依赖，确定哪些是已使用已声明的，哪些是已使用未声明的，哪些是未使用已声明的 2、analyze-dep-mgt：分析项目依赖，列出已解析的依赖项与dependencyManagement中定义的依赖项不匹配的部分 3、analyze-report：生成项目报告 4、analyze-duplicate：分析pom.xml中的<dependenci
-
问题描述： 今天帮朋友解决个问题，一直报上面的错，什么都没有配置错误，然后我就将上面的依赖重新手敲了一遍。就好了。 然后又遇到了artifactId 中乱码的问题。将artifactId 中内容重新写即可。
-
This is an ambitious project to add offline capabilities to jQuery. It will directly compete with the Dojo offline toolkit and interface with Google Gears API. With Gears support for Opera 9.5 offline
-
AngularFire2 Offline �� A simple wrapper for AngularFire2 to read and write to Firebase while offline, even after a complete refresh. Complete changelog Demos Angular 2+ Demos: Read object, Read list,
-
Angular PWA Offline RxJS operator and other utils catching offline errors in Angular apps and PWA. By the same author Angular schematics extension for VS Code (GUI for Angular CLI commands) @ngx-pwa/l
-
Offline Wallet Generator Application Description Generate offline wallets for several popular cryptocurrencies. Installation Instructions Java is required to build and run this project. Build from Sou
-
我使用yarn的离线安装，在联网的机子上 yarn 安装，再传到非上网机子上离线安装。都配置了yarn-offline-mirror: 离线包文件夹地址和yarn-offline-mirror-pruning: true。 在联网的机子上安装后把package.json、yarn.lock、离线包文件夹 都传到非上网机子上安装， yarn install --offline 报错 Can't ma
-
在本章中，我们将向您展示如何处理Firebase连接状态。 检查连接 我们可以使用以下代码检查连接值。 index.js var connectedRef = firebase.database().ref(".info/connected"); connectedRef.on("value", function(snap) { if (snap.val() === true) {