├── README.md
├── package.json
├── src
├── index.html
└── index.js
└── webpack.config.js
/README.md:
--------------------------------------------------------------------------------
1 | # Webpack Offline Plugin Example
2 |
3 | A companion repository to this [blog post](https://dev.to/kayis/easy-offline-first-apps-with-webpacks-offline-plugin).
4 |
5 | ## Setup
6 |
7 | - npm i
8 | - npm run build
9 | - npm start
10 |
11 | ## Usage
12 |
13 | - Go on the URL mentioned in the console after `npm start`
14 | - Open dev-tools to see what is loaded from the servers
15 | - Click the _Cache Assets_ button
16 | - Set the network to _offline_ in the dev-tools (or deactivate your network entirely)
17 | - Reload the page to see that nothing is loaded from the servers
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-offline-plugin",
3 | "version": "0.1.0",
4 | "description": "Webpack 2 offline plugin example",
5 | "scripts": {
6 | "build": "webpack",
7 | "start": "http-server ./assets"
8 | },
9 | "keywords": [
10 | "webpack",
11 | "offline"
12 | ],
13 | "author": "Kay Plößer",
14 | "license": "GPL-3.0",
15 | "devDependencies": {
16 | "html-webpack-plugin": "^2.28.0",
17 | "http-server": "^0.9.0",
18 | "offline-plugin": "^4.6.1",
19 | "webpack": "^2.2.1"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Webpack Offline Plugin Example
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | const offlinePluginRuntime = require('offline-plugin/runtime')
2 |
3 | const domRoot = document
4 | .getElementById('app')
5 |
6 | const domStatus = document
7 | .getElementById('status')
8 |
9 |
10 | if (navigator.onLine) {
11 |
12 | domStatus.innerHTML = 'ONLINE'
13 |
14 | fetch('http://date.jsontest.com/')
15 | .then(r => r.json())
16 | .then(data => {
17 |
18 | domRoot.innerHTML = localStorage['cache']
19 | localStorage['cache'] = `Time: ${data.time}`
20 |
21 | })
22 |
23 | }
24 | else {
25 |
26 | domStatus.innerHTML = 'OFFLINE'
27 |
28 | domRoot.innerHTML = localStorage['cache'] || 'No Time Cached'
29 |
30 | }
31 |
32 | window.enableOffline = function enableOffline() {
33 | offlinePluginRuntime.install()
34 | }
35 |
36 | window.disableOffline = function disableOffline() {
37 |
38 | const {serviceWorker} = navigator
39 |
40 | if (!serviceWorker) return
41 |
42 | serviceWorker.getRegistrations().then(registrations => {
43 | for (const registration of registrations) registration.unregister()
44 | })
45 |
46 | caches.keys().then(keys =>
47 | Promise.all(keys.map(key => caches.delete(key)))
48 | )
49 |
50 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require('html-webpack-plugin')
2 | const OfflinePlugin = require('offline-plugin')
3 |
4 | const html = new HtmlWebpackPlugin({template: './src/index.html'})
5 | const offline = new OfflinePlugin
6 |
7 | module.exports = {
8 | entry: './src/index.js',
9 | output: {
10 | filename: '[name].[hash].js',
11 | path: './assets/',
12 | },
13 | plugins: [html, offline],
14 | }
--------------------------------------------------------------------------------