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

24
src/index.js
View file

@ -1,8 +1,32 @@
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');

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: {

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 path = require('path');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
module.exports = { module.exports = env => {
context: __dirname, const mode = env.mode ? env.mode : "production";
return {
mode,
entry: {
main: './src/index.js'
},
output: { output: {
path: path.resolve(__dirname, './dist'), filename: '[name].[chunkhash].js',
publicPath: './dist/', chunkFilename: '[name].[chunkhash].bundle.js',
filename: 'bundle.js' path: path.resolve(__dirname, 'dist'),
}, },
resolve: { resolve: {
extensions: ['.js', '.jsx'] extensions: ['.js', '.jsx']
}, },
plugins: [ plugins: [
new SWPrecacheWebpackPlugin( { new webpack.HashedModuleIdsPlugin(),
cacheId: 'kana-quiz', new HtmlWebpackPlugin({
filename: 'sw.js', template: './index.html',
stripPrefix: '/home/anzz/code/kanaquiz/', minify: { collapseWhitespace: true, removeCommecnts: true },
maximumFileSizeToCacheInBytes: 4194304, inject: false
minify: true, }),
runtimeCaching: [ new WorkboxWebpackPlugin.InjectManifest({
{ swSrc: './src/src-sw.js',
handler: 'fastest', swDest: 'sw.js'
urlPattern: /\.(woff2|svg|ttf|eot|woff)$/,
},
{
handler: 'networkFirst',
urlPattern: /\.html$/
}
],
}) })
], ],
devtool: "source-map",
module: { module: {
rules: [ rules: [
{ {
@ -71,3 +72,4 @@ module.exports = {
] ]
} }
}; };
};