a3x/kana
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Switched from sw-precache to workbox

Browse source
This commit is contained in:
Antti Pilto 2019-12-06 14:51:20 +02:00
parent b15e79986f
commit 403e9f2937
7 changed files with 1831 additions and 1563 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3202
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

14
package.json
View file

@ -5,9 +5,9 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open --mode development --host 0.0.0.0 --config webpack.config.js", "start": "webpack-dev-server --open --env.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", "mobile": "webpack-dev-server --open --env.mode development --host 0.0.0.0 --public 192.168.1.8:8080",
"build": "webpack --mode production --config webpack.config.prod.js" "build": "webpack --env.mode production --config webpack.config.prod.js"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -33,16 +33,17 @@
"css-loader": "^1.0.1", "css-loader": "^1.0.1",
"file-loader": "^2.0.0", "file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"http-server": "^0.12.0",
"postcss": "^7.0.5", "postcss": "^7.0.5",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
"precss": "^3.1.2", "precss": "^3.1.2",
"react-hot-loader": "^4.3.12", "react-hot-loader": "^4.3.12",
"style-loader": "^0.23.1", "style-loader": "^0.23.1",
"sw-precache-webpack-plugin": "^0.11.5",
"url-loader": "^1.1.2", "url-loader": "^1.1.2",
"webpack": "^4.25.1", "webpack": "^4.25.1",
"webpack-cli": "^3.1.2", "webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10" "webpack-dev-server": "^3.9.0",
"workbox-webpack-plugin": "^4.3.1"
}, },
"dependencies": { "dependencies": {
"@babel/polyfill": "^7.0.0", "@babel/polyfill": "^7.0.0",
@ -50,6 +51,7 @@
"react": "^16.6.3", "react": "^16.6.3",
"react-dom": "^16.6.3", "react-dom": "^16.6.3",
"react-toggle-switch": "^3.0.4", "react-toggle-switch": "^3.0.4",
"react-transition-group": "^2.5.0" "react-transition-group": "^2.5.0",
"workbox-window": "^4.3.1"
} }
} }

13
src/index.html
View file

@ -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
View file

@ -1,10 +1,34 @@
import { Workbox } from 'workbox-window';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import Bootstrap from './assets/stylesheets/bootstrap.min.css'; import Bootstrap from './assets/stylesheets/bootstrap.min.css';
import App from './components/App/App'; 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'); 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'); appEl = document.querySelector('.app');
ReactDOM.render(<App />, appEl); ReactDOM.render(<App />, appEl);

2
src/src-sw.js Normal file
View file

@ -0,0 +1,2 @@
workbox.precaching.precacheAndRoute(self.__precacheManifest);

3
webpack.config.js
View file

@ -6,8 +6,7 @@ module.exports = {
}, },
plugins: [ plugins: [
new HtmlWebPackPlugin({ new HtmlWebPackPlugin({
template: './src/index.html', template: './index.html'
filename: './index.html'
}) })
], ],
module: { module: {

134
webpack.config.prod.js
View file

@ -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 path = require('path');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
module.exports = { module.exports = env => {
context: __dirname, const mode = env.mode ? env.mode : "production";
output: { return {
path: path.resolve(__dirname, './dist'), mode,
publicPath: './dist/', entry: {
filename: 'bundle.js' main: './src/index.js'
}, },
resolve: { output: {
extensions: ['.js', '.jsx'] filename: '[name].[chunkhash].js',
}, chunkFilename: '[name].[chunkhash].bundle.js',
plugins: [ path: path.resolve(__dirname, 'dist'),
new SWPrecacheWebpackPlugin( { },
cacheId: 'kana-quiz', resolve: {
filename: 'sw.js', extensions: ['.js', '.jsx']
stripPrefix: '/home/anzz/code/kanaquiz/', },
maximumFileSizeToCacheInBytes: 4194304, plugins: [
minify: true, new webpack.HashedModuleIdsPlugin(),
runtimeCaching: [ 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', test: /\.(js|jsx)$/,
urlPattern: /\.(woff2|svg|ttf|eot|woff)$/, exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}, },
{ {
handler: 'networkFirst', test: /\.scss$/,
urlPattern: /\.html$/ use: [
} {
], loader: 'style-loader'
}) },
], {
module: { loader: 'css-loader',
rules: [ options: {
{ importLoaders: 1
test: /\.(js|jsx)$/, }
exclude: /node_modules/, },
use: { {
loader: 'babel-loader' loader: 'postcss-loader'
}
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1
} }
}, ]
{ },
loader: 'postcss-loader' {
} test: /\.css$/,
] use: ['style-loader', 'css-loader']
}, },
{ {
test: /\.css$/, test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/,
use: ['style-loader', 'css-loader'] loader: 'url-loader?limit=25000'
}, },
{ {
test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/, test: /\.(eot|ttf)$/,
loader: 'url-loader?limit=25000' loader: 'file-loader'
}, }
{ ]
test: /\.(eot|ttf)$/, }
loader: 'file-loader' };
}
]
}
}; };