Merge pull request #645 from no-chris/offline-mode

Offline mode: turn Chord Chart Studio into a PWA
no-chris · Jan 31, 2024 · 0aac559 · 0aac559
2 parents b3864b4 + 87c0000
commit 0aac559
Show file tree

Hide file tree

Showing 33 changed files with 1,960 additions and 1,930 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.9.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "deep-freeze": "0.0.1",
@@ -23,6 +23,7 @@
     "eslint-plugin-no-unsanitized": "^4.0.2",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "expressjs": "^1.0.1",
     "file-loader": "^6.2.0",
     "generate-changelog": "^1.8.0",
     "html-webpack-inline-source-plugin": "0.0.10",
@@ -43,10 +44,11 @@
     "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "webpack-merge": "^5.10.0"
+    "webpack-merge": "^5.10.0",
+    "workbox-webpack-plugin": "^7.0.0"
   },
   "engines": {
-    "node": ">=16.0"
+    "node": ">=20.0"
   },
   "repository": {
     "type": "git",

diff --git a/packages/chord-chart-studio/assets/index.html b/packages/chord-chart-studio/assets/index.html
@@ -9,6 +9,7 @@
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Mono:400,700" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel=“icon” href=”favicon.ico” type=“image/x-icon”>
+    <link rel="manifest" href="manifest.json" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-EGKBT2J600"></script>
     <script>

diff --git a/packages/chord-chart-studio/assets/manifest.json b/packages/chord-chart-studio/assets/manifest.json
@@ -0,0 +1,15 @@
+{
+	"name": "Chord Chart Studio",
+	"short_name": "ChordChartStudio",
+	"start_url": ".",
+	"display": "standalone",
+	"background_color": "#1e2324",
+	"description": "Create and manage chord charts",
+	"icons": [
+		{
+			"src": "favicon.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	]
+}
diff --git a/packages/chord-chart-studio/assets/service-worker.js b/packages/chord-chart-studio/assets/service-worker.js
@@ -0,0 +1,3 @@
+// serving an empty service worker for development as suggested here:
+// https://github.com/GoogleChrome/workbox/issues/1790#issuecomment-544982014
+// the real service worker is generated by workbox in webpack production mode
diff --git a/packages/chord-chart-studio/build/css/main.99948aaa068d066cd116.css b/packages/chord-chart-studio/build/css/main.99948aaa068d066cd116.css
diff --git a/packages/chord-chart-studio/build/css/main.99948aaa068d066cd116.css.map b/packages/chord-chart-studio/build/css/main.99948aaa068d066cd116.css.map
diff --git a/packages/chord-chart-studio/build/css/main.a392a146987c4951f596.css b/packages/chord-chart-studio/build/css/main.a392a146987c4951f596.css
diff --git a/packages/chord-chart-studio/build/css/main.a392a146987c4951f596.css.map b/packages/chord-chart-studio/build/css/main.a392a146987c4951f596.css.map
diff --git a/packages/chord-chart-studio/build/index.html b/packages/chord-chart-studio/build/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html class="no-js" lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Chord Chart Studio</title><meta name="description" content="Build chord charts easily for all musicians. The official editor of ChordMark."><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Mono:400,700" rel="stylesheet"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="“icon”" href="”favicon.ico”" type="“image/x-icon”"><script async src="https://www.googletagmanager.com/gtag/js?id=G-EGKBT2J600"></script><script>window.dataLayer = window.dataLayer || [];
+<!doctype html><html class="no-js" lang="en_EN"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Chord Chart Studio</title><meta name="description" content="Build chord charts easily for all musicians. The official editor of ChordMark."><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto+Mono:400,700" rel="stylesheet"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="“icon”" href="”favicon.ico”" type="“image/x-icon”"><link rel="manifest" href="manifest.json"/><script async src="https://www.googletagmanager.com/gtag/js?id=G-EGKBT2J600"></script><script>window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
 
-        gtag('config', 'G-EGKBT2J600');</script><link rel="icon" href="favicon.png"><script defer="defer" src="vendors.99948aaa068d066cd116.js"></script><script defer="defer" src="main.99948aaa068d066cd116.js"></script><link href="css/main.99948aaa068d066cd116.css" rel="stylesheet"></head><body><div id="app" class="theme-dark"></div></body></html>
+        gtag('config', 'G-EGKBT2J600');</script><link rel="icon" href="favicon.png"><script defer="defer" src="vendors.a392a146987c4951f596.js"></script><script defer="defer" src="main.a392a146987c4951f596.js"></script><link href="css/main.a392a146987c4951f596.css" rel="stylesheet"></head><body><div id="app" class="theme-dark"></div></body></html>
diff --git a/packages/chord-chart-studio/build/main.99948aaa068d066cd116.js b/packages/chord-chart-studio/build/main.99948aaa068d066cd116.js
diff --git a/packages/chord-chart-studio/build/main.99948aaa068d066cd116.js.LICENSE.txt b/packages/chord-chart-studio/build/main.99948aaa068d066cd116.js.LICENSE.txt
diff --git a/packages/chord-chart-studio/build/main.99948aaa068d066cd116.js.map b/packages/chord-chart-studio/build/main.99948aaa068d066cd116.js.map
diff --git a/packages/chord-chart-studio/build/main.a392a146987c4951f596.js b/packages/chord-chart-studio/build/main.a392a146987c4951f596.js
diff --git a/packages/chord-chart-studio/build/main.a392a146987c4951f596.js.map b/packages/chord-chart-studio/build/main.a392a146987c4951f596.js.map
diff --git a/packages/chord-chart-studio/build/manifest.json b/packages/chord-chart-studio/build/manifest.json
@@ -0,0 +1,15 @@
+{
+	"name": "Chord Chart Studio",
+	"short_name": "ChordChartStudio",
+	"start_url": ".",
+	"display": "standalone",
+	"background_color": "#1e2324",
+	"description": "Create and manage chord charts",
+	"icons": [
+		{
+			"src": "favicon.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	]
+}
diff --git a/packages/chord-chart-studio/build/service-worker.js b/packages/chord-chart-studio/build/service-worker.js
diff --git a/packages/chord-chart-studio/build/service-worker.js.map b/packages/chord-chart-studio/build/service-worker.js.map
diff --git a/packages/chord-chart-studio/build/vendors.99948aaa068d066cd116.js b/packages/chord-chart-studio/build/vendors.99948aaa068d066cd116.js
diff --git a/packages/chord-chart-studio/build/vendors.99948aaa068d066cd116.js.LICENSE.txt b/packages/chord-chart-studio/build/vendors.99948aaa068d066cd116.js.LICENSE.txt
diff --git a/packages/chord-chart-studio/build/vendors.99948aaa068d066cd116.js.map b/packages/chord-chart-studio/build/vendors.99948aaa068d066cd116.js.map
diff --git a/packages/chord-chart-studio/build/vendors.a392a146987c4951f596.js b/packages/chord-chart-studio/build/vendors.a392a146987c4951f596.js
diff --git a/packages/chord-chart-studio/build/vendors.a392a146987c4951f596.js.map b/packages/chord-chart-studio/build/vendors.a392a146987c4951f596.js.map
diff --git a/packages/chord-chart-studio/build/workbox-6750a8e5.js b/packages/chord-chart-studio/build/workbox-6750a8e5.js
diff --git a/packages/chord-chart-studio/build/workbox-6750a8e5.js.map b/packages/chord-chart-studio/build/workbox-6750a8e5.js.map
diff --git a/packages/chord-chart-studio/package.json b/packages/chord-chart-studio/package.json
@@ -63,6 +63,7 @@
 		"dev": "npx webpack serve --config webpack.dev.js",
 		"format": "prettier --write \"**/*.{js,jsx,json,ts,md,scss,css}\"",
 		"lint": "eslint src tests",
+		"serve": "node tests/serve.js",
 		"size": "size-limit",
 		"sloc": "echo \"Source code:\" > SLOC && npx sloc src >> SLOC && echo \"Tests:\" >> SLOC && npx sloc tests >> SLOC && echo \"Total:\" >> SLOC && npx sloc src tests >> SLOC",
 		"test": "npx jest",

diff --git a/packages/chord-chart-studio/src/app.js b/packages/chord-chart-studio/src/app.js
@@ -2,10 +2,12 @@ import '../scss/styles.scss';
 
 import { createStore } from './state/store';
 import registerHandlers from './registerHandlers';
+import registerSW from './registerSW';
 import router from './router';
 import addSampleContent from './addSampleContent';
 
 registerHandlers();
+registerSW();
 
 export default function run() {
 	createStore();

diff --git a/packages/chord-chart-studio/src/registerSW.js b/packages/chord-chart-studio/src/registerSW.js
@@ -0,0 +1,9 @@
+const serviceWorkerPath = './service-worker.js';
+
+export default function registerSW() {
+	if ('serviceWorker' in navigator) {
+		navigator.serviceWorker
+			.register(serviceWorkerPath)
+			.catch((err) => console.log('Cannot register service worker', err));
+	}
+}
diff --git a/packages/chord-chart-studio/tests/serve.js b/packages/chord-chart-studio/tests/serve.js
@@ -0,0 +1,13 @@
+// Used to serve the `build` folder locally, mainly to check the service worker behavior
+const express = require('express');
+const app = express();
+const PORT = 9000;
+
+const path = require('path');
+const buildDir = path.resolve(__dirname, '../build');
+
+app.use(express.static(buildDir));
+
+app.listen(PORT, () =>
+	console.log(`Server listening at http://localhost:${PORT}`)
+);
diff --git a/packages/chord-chart-studio/webpack.common.js b/packages/chord-chart-studio/webpack.common.js
@@ -2,8 +2,9 @@
 const path = require('path');
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
-const buildDir = 'build';
+const buildDir = path.resolve(process.cwd(), 'build');
 
 const config = {
 	target: 'web',
@@ -14,13 +15,21 @@ const config = {
 
 	output: {
 		filename: '[name].[fullhash].js',
-		path: path.resolve(process.cwd(), buildDir),
+		path: buildDir,
 	},
 
 	plugins: [
 		new MiniCssExtractPlugin({
 			filename: 'css/[name].[fullhash].css',
 		}),
+		new CopyPlugin({
+			patterns: [
+				{
+					from: './assets/manifest.json',
+					to: buildDir + '/manifest.json',
+				},
+			],
+		}),
 	],
 
 	module: {
@@ -47,16 +56,7 @@ const config = {
 
 	resolve: {
 		extensions: ['.js', '.jsx'],
-		/*
-		alias: {
-			react: path.resolve(path.join(__dirname, './node_modules/react')),
-			'react-dom': path.resolve(
-				path.join(__dirname, './node_modules/react-dom')
-			),
-		},
-		*/
 		symlinks: false,
-		//modules: [path.resolve(__dirname, '../../node_modules')],
 	},
 };
 

diff --git a/packages/chord-chart-studio/webpack.dev.js b/packages/chord-chart-studio/webpack.dev.js
@@ -3,6 +3,9 @@ const { merge } = require('webpack-merge');
 const common = require('./webpack.common');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+
+const buildDir = path.resolve(process.cwd(), 'build');
 
 module.exports = merge(common, {
 	mode: 'development',
@@ -15,6 +18,14 @@ module.exports = merge(common, {
 			template: 'assets/index.html',
 			favicon: 'assets/favicon.png',
 		}),
+		new CopyPlugin({
+			patterns: [
+				{
+					from: './assets/service-worker.js',
+					to: buildDir + '/service-worker.js',
+				},
+			],
+		}),
 	],
 
 	devServer: {

diff --git a/packages/chord-chart-studio/webpack.prod.js b/packages/chord-chart-studio/webpack.prod.js
@@ -8,8 +8,8 @@ const TerserPlugin = require('terser-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const BundleAnalyzerPlugin =
-	require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const WorkboxPlugin = require('workbox-webpack-plugin');
+//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = merge(common, {
 	mode: 'production',
@@ -28,7 +28,10 @@ module.exports = merge(common, {
 			},
 		},
 		minimize: true,
-		minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
+		minimizer: [
+			new TerserPlugin({ extractComments: false }),
+			new CssMinimizerPlugin(),
+		],
 	},
 
 	plugins: [
@@ -37,14 +40,46 @@ module.exports = merge(common, {
 		new webpack.DefinePlugin({
 			'process.env.NODE_ENV': JSON.stringify('production'),
 		}),
+		/*
 		new BundleAnalyzerPlugin({
 			analyzerMode: 'static',
 			openAnalyzer: false,
 		}),
+		*/
+
 		new HtmlWebpackPlugin({
 			title: 'Chord Chart Studio',
 			template: 'assets/index.html',
 			favicon: 'assets/favicon.png',
 		}),
+		new WorkboxPlugin.GenerateSW({
+			clientsClaim: true,
+			skipWaiting: true,
+			runtimeCaching: [
+				// based on https://developer.chrome.com/docs/workbox/modules/workbox-recipes
+				// and https://stackoverflow.com/questions/52451678/caching-google-fonts-using-workbox
+				{
+					urlPattern: /^https:\/\/fonts\.googleapis\.com/,
+					handler: 'StaleWhileRevalidate',
+					options: {
+						cacheName: 'google-fonts-stylesheets',
+					},
+				},
+				{
+					urlPattern: /^https:\/\/fonts\.gstatic\.com/,
+					handler: 'StaleWhileRevalidate',
+					options: {
+						cacheName: 'google-fonts-webfonts',
+						cacheableResponse: {
+							statuses: [0, 200],
+						},
+						expiration: {
+							maxAgeSeconds: 60 * 60 * 24 * 365,
+							maxEntries: 30,
+						},
+					},
+				},
+			],
+		}),
 	],
 });