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

3196
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",
"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"
}
}

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

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

3
webpack.config.js
View file

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

46
webpack.config.prod.js
View file

@ -1,35 +1,36 @@
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,
module.exports = env => {
const mode = env.mode ? env.mode : "production";
return {
mode,
entry: {
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: './dist/',
filename: 'bundle.js'
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [
new SWPrecacheWebpackPlugin( {
cacheId: 'kana-quiz',
filename: 'sw.js',
stripPrefix: '/home/anzz/code/kanaquiz/',
maximumFileSizeToCacheInBytes: 4194304,
minify: true,
runtimeCaching: [
{
handler: 'fastest',
urlPattern: /\.(woff2|svg|ttf|eot|woff)$/,
},
{
handler: 'networkFirst',
urlPattern: /\.html$/
}
],
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: [
{
@ -70,4 +71,5 @@ module.exports = {
}
]
}
};
};