1 | <div align="center">
|
2 | <a href="https://offline-plugin.now.sh/"><img src="https://rawgit.com/NekR/offline-plugin/master/logo/logo.svg" width="120" alt="offline-plugin logo"></a>
|
3 |
|
4 | <h1><code>offline-plugin</code> for webpack</h1>
|
5 |
|
6 | <a href="#backers"><img src="https://opencollective.com/offline-plugin/backers/badge.svg" alt="backers" /></a>
|
7 | <a href="#sponsors"><img src="https://opencollective.com/offline-plugin/sponsors/badge.svg" alt="sponsors" /></a>
|
8 | <a href="https://www.npmjs.com/package/offline-plugin"><img src="https://img.shields.io/npm/v/offline-plugin.svg?maxAge=3600&v4" alt="npm"></a>
|
9 | <a href="https://www.npmjs.com/package/offline-plugin"><img src="https://img.shields.io/npm/dm/offline-plugin.svg?maxAge=3600" alt="npm"></a>
|
10 | </div>
|
11 | <br>
|
12 |
|
13 | 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.
|
14 |
|
15 | <div align="center">
|
16 | <h1>Sponsors</h1>
|
17 |
|
18 | <a href="https://opencollective.com/offline-plugin/sponsor/0/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/0/avatar.svg"></a>
|
19 | <a href="https://opencollective.com/offline-plugin/sponsor/1/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/1/avatar.svg"></a>
|
20 | <a href="https://opencollective.com/offline-plugin/sponsor/2/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/2/avatar.svg"></a>
|
21 | <a href="https://opencollective.com/offline-plugin/sponsor/3/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/3/avatar.svg"></a>
|
22 | <a href="https://opencollective.com/offline-plugin/sponsor/4/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/4/avatar.svg"></a>
|
23 | <a href="https://opencollective.com/offline-plugin/sponsor/5/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/5/avatar.svg"></a>
|
24 | <a href="https://opencollective.com/offline-plugin/sponsor/6/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/6/avatar.svg"></a>
|
25 | <a href="https://opencollective.com/offline-plugin/sponsor/7/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/7/avatar.svg"></a>
|
26 | <a href="https://opencollective.com/offline-plugin/sponsor/8/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/8/avatar.svg"></a>
|
27 | <a href="https://opencollective.com/offline-plugin/sponsor/9/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/9/avatar.svg"></a>
|
28 | <a href="https://opencollective.com/offline-plugin/sponsor/10/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/10/avatar.svg"></a>
|
29 | <a href="https://opencollective.com/offline-plugin/sponsor/11/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/11/avatar.svg"></a>
|
30 | <a href="https://opencollective.com/offline-plugin/sponsor/12/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/12/avatar.svg"></a>
|
31 | <a href="https://opencollective.com/offline-plugin/sponsor/13/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/13/avatar.svg"></a>
|
32 | <a href="https://opencollective.com/offline-plugin/sponsor/14/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/14/avatar.svg"></a>
|
33 | <a href="https://opencollective.com/offline-plugin/sponsor/15/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/15/avatar.svg"></a>
|
34 | <a href="https://opencollective.com/offline-plugin/sponsor/16/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/16/avatar.svg"></a>
|
35 | <a href="https://opencollective.com/offline-plugin/sponsor/17/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/17/avatar.svg"></a>
|
36 | <a href="https://opencollective.com/offline-plugin/sponsor/18/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/18/avatar.svg"></a>
|
37 | <a href="https://opencollective.com/offline-plugin/sponsor/19/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/19/avatar.svg"></a>
|
38 | <a href="https://opencollective.com/offline-plugin/sponsor/20/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/20/avatar.svg"></a>
|
39 | <a href="https://opencollective.com/offline-plugin/sponsor/21/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/21/avatar.svg"></a>
|
40 | <a href="https://opencollective.com/offline-plugin/sponsor/22/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/22/avatar.svg"></a>
|
41 | <a href="https://opencollective.com/offline-plugin/sponsor/23/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/23/avatar.svg"></a>
|
42 | <a href="https://opencollective.com/offline-plugin/sponsor/24/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/24/avatar.svg"></a>
|
43 | <a href="https://opencollective.com/offline-plugin/sponsor/25/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/25/avatar.svg"></a>
|
44 | <a href="https://opencollective.com/offline-plugin/sponsor/26/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/26/avatar.svg"></a>
|
45 | <a href="https://opencollective.com/offline-plugin/sponsor/27/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/27/avatar.svg"></a>
|
46 | <a href="https://opencollective.com/offline-plugin/sponsor/28/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/28/avatar.svg"></a>
|
47 | <a href="https://opencollective.com/offline-plugin/sponsor/29/website" target="_blank"><img src="https://opencollective.com/offline-plugin/sponsor/29/avatar.svg"></a>
|
48 |
|
49 | Become a sponsor and get your logo on our README on Github with a link to your site.<br>
|
50 | <strong><a href="https://opencollective.com/offline-plugin#sponsor">Become a sponsor</a></strong>
|
51 | </div>
|
52 |
|
53 | ## Install
|
54 |
|
55 | `npm install offline-plugin [--save-dev]`
|
56 |
|
57 | ## Setup
|
58 |
|
59 | First, instantiate the plugin in your `webpack.config`:
|
60 |
|
61 | ```js
|
62 | // webpack.config.js example
|
63 |
|
64 | var OfflinePlugin = require('offline-plugin');
|
65 |
|
66 | module.exports = {
|
67 | // ...
|
68 |
|
69 | plugins: [
|
70 | // ... other plugins
|
71 | // it's always better if OfflinePlugin is the last plugin added
|
72 | new OfflinePlugin()
|
73 | ]
|
74 | // ...
|
75 | }
|
76 | ```
|
77 | _(and optionally configure with [options](docs/options.md))_
|
78 |
|
79 | Then, add the [runtime](docs/runtime.md) into your entry file (typically main entry):
|
80 |
|
81 | ```js
|
82 | require('offline-plugin/runtime').install();
|
83 | ```
|
84 |
|
85 | ES6/Babel/TypeScript
|
86 | ```js
|
87 | import * as OfflinePluginRuntime from 'offline-plugin/runtime';
|
88 | OfflinePluginRuntime.install();
|
89 | ```
|
90 |
|
91 | > For more details of usage with `TypeScript` see [here](docs/typescript.md)
|
92 |
|
93 | ### `offline-plugin` isn't working?
|
94 |
|
95 | :information_source: **[Troubleshooting](docs/troubleshooting.md)** | **[FAQ](docs/FAQ.md)**
|
96 |
|
97 | ## Docs
|
98 |
|
99 | * [Options](docs/options.md)
|
100 | * [Caches](docs/caches.md)
|
101 | * [Update process](docs/updates.md)
|
102 | * [Cache Maps](docs/cache-maps.md)
|
103 | * [Runtime API](docs/runtime.md)
|
104 |
|
105 | ## Examples
|
106 |
|
107 | * [Single Page Application](docs/examples/SPA.md)
|
108 |
|
109 | ## Articles
|
110 |
|
111 | * [Easy Offline First Apps With Webpack's Offline Plugin](https://dev.to/kayis/easy-offline-first-apps-with-webpacks-offline-plugin)
|
112 | * [Handling Client Side App Updates (with Service Workers)](https://zach.codes/handling-client-side-app-updates-with-service-workers/)
|
113 |
|
114 | ## Options
|
115 |
|
116 | All options are optional and `offline-plugin` can be used without specifying them.
|
117 |
|
118 | #### [See all available options here.](docs/options.md)
|
119 |
|
120 | ## Who is using `offline-plugin`
|
121 |
|
122 | <div align="center">
|
123 | <strong>Demo:<br><a href="https://offline-plugin.now.sh/"> Progressive Web App built with <code>offline-plugin</code></a></strong><br>
|
124 | <div>(<a href="https://github.com/NekR/offline-plugin-pwa"><i>source code</i></a>)</div>
|
125 | </div>
|
126 |
|
127 | ### Projects
|
128 |
|
129 | * [React Boilerplate](https://github.com/mxstbr/react-boilerplate)
|
130 | * [Phenomic](https://phenomic.io)
|
131 | * [React, Universally](https://github.com/ctrlplusb/react-universally)
|
132 |
|
133 | ### PWAs
|
134 |
|
135 | * [`offline-plugin` PWA](https://offline-plugin.now.sh/)
|
136 | * [Omroep West](https://m.omroepwest.nl/)
|
137 | * [Preact](https://preactjs.com/) ([source](https://github.com/developit/preact-www))
|
138 | * [CodePan](https://codepan.net) ([source](https://github.com/egoist/codepan))
|
139 | * [Offline Kanban](https://offline-kanban.herokuapp.com) ([source](https://github.com/sarmadsangi/offline-kanban))
|
140 | * [Online Board](https://onlineboard.sonnywebdesign.com/) ([source](https://github.com/andreasonny83/online-board))
|
141 | * [Fluid Outliner](https://fluid-notion.github.io/fluid-outliner/) ([source](https://github.com/fluid-notion/fluid-outliner))
|
142 |
|
143 | _If you are using `offline-plugin`, feel free to submit a PR to add your project to this list._
|
144 |
|
145 | ## Like `offline-plugin`?
|
146 |
|
147 | Support it by giving [feedback](https://github.com/NekR/offline-plugin/issues), [contributing](CONTRIBUTING.md), becoming a [backer/sponsor](https://opencollective.com/offline-plugin) or just by 🌟 starring the project!
|
148 |
|
149 |
|
150 | ## Backers
|
151 |
|
152 | Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/offline-plugin#backer)]
|
153 |
|
154 | <a href="https://opencollective.com/offline-plugin/backer/0/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/0/avatar.svg"></a>
|
155 | <a href="https://opencollective.com/offline-plugin/backer/1/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/1/avatar.svg"></a>
|
156 | <a href="https://opencollective.com/offline-plugin/backer/2/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/2/avatar.svg"></a>
|
157 | <a href="https://opencollective.com/offline-plugin/backer/3/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/3/avatar.svg"></a>
|
158 | <a href="https://opencollective.com/offline-plugin/backer/4/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/4/avatar.svg"></a>
|
159 | <a href="https://opencollective.com/offline-plugin/backer/5/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/5/avatar.svg"></a>
|
160 | <a href="https://opencollective.com/offline-plugin/backer/6/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/6/avatar.svg"></a>
|
161 | <a href="https://opencollective.com/offline-plugin/backer/7/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/7/avatar.svg"></a>
|
162 | <a href="https://opencollective.com/offline-plugin/backer/8/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/8/avatar.svg"></a>
|
163 | <a href="https://opencollective.com/offline-plugin/backer/9/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/9/avatar.svg"></a>
|
164 | <a href="https://opencollective.com/offline-plugin/backer/10/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/10/avatar.svg"></a>
|
165 | <a href="https://opencollective.com/offline-plugin/backer/11/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/11/avatar.svg"></a>
|
166 | <a href="https://opencollective.com/offline-plugin/backer/12/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/12/avatar.svg"></a>
|
167 | <a href="https://opencollective.com/offline-plugin/backer/13/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/13/avatar.svg"></a>
|
168 | <a href="https://opencollective.com/offline-plugin/backer/14/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/14/avatar.svg"></a>
|
169 | <a href="https://opencollective.com/offline-plugin/backer/15/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/15/avatar.svg"></a>
|
170 | <a href="https://opencollective.com/offline-plugin/backer/16/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/16/avatar.svg"></a>
|
171 | <a href="https://opencollective.com/offline-plugin/backer/17/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/17/avatar.svg"></a>
|
172 | <a href="https://opencollective.com/offline-plugin/backer/18/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/18/avatar.svg"></a>
|
173 | <a href="https://opencollective.com/offline-plugin/backer/19/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/19/avatar.svg"></a>
|
174 | <a href="https://opencollective.com/offline-plugin/backer/20/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/20/avatar.svg"></a>
|
175 | <a href="https://opencollective.com/offline-plugin/backer/21/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/21/avatar.svg"></a>
|
176 | <a href="https://opencollective.com/offline-plugin/backer/22/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/22/avatar.svg"></a>
|
177 | <a href="https://opencollective.com/offline-plugin/backer/23/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/23/avatar.svg"></a>
|
178 | <a href="https://opencollective.com/offline-plugin/backer/24/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/24/avatar.svg"></a>
|
179 | <a href="https://opencollective.com/offline-plugin/backer/25/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/25/avatar.svg"></a>
|
180 | <a href="https://opencollective.com/offline-plugin/backer/26/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/26/avatar.svg"></a>
|
181 | <a href="https://opencollective.com/offline-plugin/backer/27/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/27/avatar.svg"></a>
|
182 | <a href="https://opencollective.com/offline-plugin/backer/28/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/28/avatar.svg"></a>
|
183 | <a href="https://opencollective.com/offline-plugin/backer/29/website" target="_blank"><img src="https://opencollective.com/offline-plugin/backer/29/avatar.svg"></a>
|
184 |
|
185 | ## Contribution
|
186 |
|
187 | See [CONTRIBUTING](CONTRIBUTING.md)
|
188 |
|
189 | ## License
|
190 |
|
191 | [MIT](LICENSE.md)
|
192 | [Logo](logo/LICENSE.md)
|
193 |
|
194 | ## CHANGELOG
|
195 |
|
196 | [CHANGELOG](CHANGELOG.md)
|