Switched from sw-precache to workbox
This commit is contained in:
Antti Pilto
parent
b15e79986f
commit
403e9f2937
3202
package-lock.json
generated
3202
package-lock.json
generated
File diff suppressed because it is too large
Load diff
14
package.json
14
package.json
|
|
@ -5,9 +5,9 @@
|
|||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "webpack-dev-server --open --mode development --host 0.0.0.0 --config webpack.config.js",
|
||||
"mobile": "webpack-dev-server --open --mode development --host 0.0.0.0 --public 192.168.1.8:8080",
|
||||
"build": "webpack --mode production --config webpack.config.prod.js"
|
||||
"start": "webpack-dev-server --open --env.mode development --host 0.0.0.0 --config webpack.config.js",
|
||||
"mobile": "webpack-dev-server --open --env.mode development --host 0.0.0.0 --public 192.168.1.8:8080",
|
||||
"build": "webpack --env.mode production --config webpack.config.prod.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -33,16 +33,17 @@
|
|||
"css-loader": "^1.0.1",
|
||||
"file-loader": "^2.0.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"http-server": "^0.12.0",
|
||||
"postcss": "^7.0.5",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"precss": "^3.1.2",
|
||||
"react-hot-loader": "^4.3.12",
|
||||
"style-loader": "^0.23.1",
|
||||
"sw-precache-webpack-plugin": "^0.11.5",
|
||||
"url-loader": "^1.1.2",
|
||||
"webpack": "^4.25.1",
|
||||
"webpack-cli": "^3.1.2",
|
||||
"webpack-dev-server": "^3.1.10"
|
||||
"webpack-dev-server": "^3.9.0",
|
||||
"workbox-webpack-plugin": "^4.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/polyfill": "^7.0.0",
|
||||
|
|
@ -50,6 +51,7 @@
|
|||
"react": "^16.6.3",
|
||||
"react-dom": "^16.6.3",
|
||||
"react-toggle-switch": "^3.0.4",
|
||||
"react-transition-group": "^2.5.0"
|
||||
"react-transition-group": "^2.5.0",
|
||||
"workbox-window": "^4.3.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Kana Pro: Learn hiragana & katakana fast and easy</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="Description" content="Application for studying hiragana & katakana characters.">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
26
src/index.js
26
src/index.js
|
|
@ -1,10 +1,34 @@
|
|||
import { Workbox } from 'workbox-window';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Bootstrap from './assets/stylesheets/bootstrap.min.css';
|
||||
import App from './components/App/App';
|
||||
|
||||
if ("serviceWorker" in navigator) {
|
||||
window.addEventListener("load", () => {
|
||||
const wb = new Workbox("/sw.js");
|
||||
const updateButton = document.querySelector("#app-update");
|
||||
// Fires when the registered service worker has installed but is waiting to activate.
|
||||
wb.addEventListener("waiting", event => {
|
||||
updateButton.classList.add("show");
|
||||
updateButton.addEventListener("click", () => {
|
||||
// Set up a listener that will reload the page as soon as the previously waiting service worker has taken control.
|
||||
wb.addEventListener("controlling", event => {
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
// Send a message telling the service worker to skip waiting.
|
||||
// This will trigger the `controlling` event handler above.
|
||||
wb.messageSW({ type: "SKIP_WAITING" });
|
||||
});
|
||||
});
|
||||
|
||||
wb.register();
|
||||
});
|
||||
}
|
||||
|
||||
let appEl = document.getElementById('app');
|
||||
if(!appEl) // in case of old index.html in cache
|
||||
if (!appEl) // in case of old index.html in cache
|
||||
appEl = document.querySelector('.app');
|
||||
|
||||
ReactDOM.render(<App />, appEl);
|
||||
|
|
|
|||
2
src/src-sw.js
Normal file
2
src/src-sw.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
workbox.precaching.precacheAndRoute(self.__precacheManifest);
|
||||
|
||||
|
|
@ -6,8 +6,7 @@ module.exports = {
|
|||
},
|
||||
plugins: [
|
||||
new HtmlWebPackPlugin({
|
||||
template: './src/index.html',
|
||||
filename: './index.html'
|
||||
template: './index.html'
|
||||
})
|
||||
],
|
||||
module: {
|
||||
|
|
|
|||
|
|
@ -1,73 +1,75 @@
|
|||
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
context: __dirname,
|
||||
output: {
|
||||
path: path.resolve(__dirname, './dist'),
|
||||
publicPath: './dist/',
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.jsx']
|
||||
},
|
||||
plugins: [
|
||||
new SWPrecacheWebpackPlugin( {
|
||||
cacheId: 'kana-quiz',
|
||||
filename: 'sw.js',
|
||||
stripPrefix: '/home/anzz/code/kanaquiz/',
|
||||
maximumFileSizeToCacheInBytes: 4194304,
|
||||
minify: true,
|
||||
runtimeCaching: [
|
||||
module.exports = env => {
|
||||
const mode = env.mode ? env.mode : "production";
|
||||
return {
|
||||
mode,
|
||||
entry: {
|
||||
main: './src/index.js'
|
||||
},
|
||||
output: {
|
||||
filename: '[name].[chunkhash].js',
|
||||
chunkFilename: '[name].[chunkhash].bundle.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.jsx']
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HashedModuleIdsPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './index.html',
|
||||
minify: { collapseWhitespace: true, removeCommecnts: true },
|
||||
inject: false
|
||||
}),
|
||||
new WorkboxWebpackPlugin.InjectManifest({
|
||||
swSrc: './src/src-sw.js',
|
||||
swDest: 'sw.js'
|
||||
})
|
||||
],
|
||||
devtool: "source-map",
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
handler: 'fastest',
|
||||
urlPattern: /\.(woff2|svg|ttf|eot|woff)$/,
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader'
|
||||
}
|
||||
},
|
||||
{
|
||||
handler: 'networkFirst',
|
||||
urlPattern: /\.html$/
|
||||
}
|
||||
],
|
||||
})
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader'
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader'
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader'
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader']
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/,
|
||||
loader: 'url-loader?limit=25000'
|
||||
},
|
||||
{
|
||||
test: /\.(eot|ttf)$/,
|
||||
loader: 'file-loader'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader']
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/,
|
||||
loader: 'url-loader?limit=25000'
|
||||
},
|
||||
{
|
||||
test: /\.(eot|ttf)$/,
|
||||
loader: 'file-loader'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue