Skip to content

Commit e83f48b

Browse files
MarkusBordihnMarkusBordihn
committed
Refactored service workers.
Remove splash screen logic, which will moved to react and webpack. Optimized code for better CWV.
1 parent 296e604 commit e83f48b

23 files changed

+455
-704
lines changed

‎src/gui/Splash.css ‎assets/css/app.css

+132-45
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,148 @@
1414
* limitations under the License.
1515
*/
1616

17+
/* General style definitions. */
18+
html {
19+
-moz-osx-font-smoothing: grayscale;
20+
-webkit-font-smoothing: antialiased;
21+
box-sizing: border-box;
22+
height: 100%;
23+
width: 100%;
24+
}
25+
26+
*,
27+
*::before,
28+
*::after {
29+
box-sizing: inherit;
30+
}
31+
32+
strong,
33+
b {
34+
font-weight: bolder;
35+
}
36+
37+
body {
38+
background-color: #fafafa;
39+
color: rgba(0, 0, 0, 0.87);
40+
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
41+
font-size: 0.875rem;
42+
font-weight: 400;
43+
height: 100%;
44+
letter-spacing: 0.01071em;
45+
line-height: 1.43;
46+
margin: 0;
47+
padding: 0;
48+
width: 100%;
49+
}
50+
51+
@media print {
52+
body {
53+
background-color: #fff;
54+
}
55+
}
56+
57+
body::backdrop {
58+
background-color: #fafafa;
59+
}
60+
61+
#cwc-app {
62+
height: 100%;
63+
margin: 0;
64+
width: 100%;
65+
}
66+
67+
/* Animation class names. */
68+
.spin {
69+
animation: spin 2s linear infinite;
70+
}
71+
72+
/* Animation key-frames definition. */
73+
@keyframes fadeIn {
74+
from {
75+
opacity: 0;
76+
}
77+
to {
78+
opacity: 1;
79+
}
80+
}
81+
82+
@keyframes fadeInTop {
83+
from {
84+
opacity: 0;
85+
transform: translate3d(0, -125%, 0);
86+
}
87+
to {
88+
opacity: 1;
89+
transform: translate3d(0, 0, 0);
90+
}
91+
}
92+
93+
@keyframes fadeInLeft {
94+
from {
95+
opacity: 0;
96+
transform: translate3d(-125%, 0, 0);
97+
}
98+
to {
99+
opacity: 1;
100+
transform: translate3d(0, 0, 0);
101+
}
102+
}
103+
104+
@keyframes fadeInBottom {
105+
from {
106+
opacity: 0;
107+
transform: translate3d(0, 125%, 0);
108+
}
109+
to {
110+
opacity: 1;
111+
transform: translate3d(0, 0, 0);
112+
}
113+
}
114+
115+
@keyframes fadeInRight {
116+
from {
117+
opacity: 0;
118+
transform: translate3d(125%, 0, 0);
119+
}
120+
to {
121+
opacity: 1;
122+
transform: translate3d(0, 0, 0);
123+
}
124+
}
125+
126+
@keyframes spin {
127+
to {
128+
transform: rotate(1turn);
129+
}
130+
}
131+
132+
@keyframes zoom {
133+
from {
134+
transform: scale3d(1, 1, 1);
135+
}
136+
50% {
137+
transform: scale3d(1.2, 1.2, 1.2);
138+
}
139+
to {
140+
transform: scale3d(1, 1, 1);
141+
}
142+
}
143+
144+
/**
145+
* Splash screen for Coding with Chrome.
146+
*/
147+
17148
.cwc-splash-screen {
18149
width: 100%;
19150
height: 100%;
20-
z-index: 1000;
21-
background-color: #fff;
22151
background: linear-gradient(
23152
135deg,
24153
rgba(200, 200, 200, 1) 0%,
25154
rgba(255, 255, 255, 1) 40%,
26155
rgba(255, 255, 255, 1) 60%,
27156
rgba(200, 200, 200, 1) 100%
28157
);
158+
background-color: #fff;
29159
}
30160

31161
.cwc-splash-screen .title {
@@ -49,49 +179,6 @@
49179
transform: translate(-50%, -50%);
50180
}
51181

52-
/* Progress Screen Logo Animation */
53-
54-
.cwc-splash-screen .progress-bar {
55-
height: 4px;
56-
background-color: rgb(72, 101, 124);
57-
overflow: hidden;
58-
position: relative;
59-
}
60-
61-
.cwc-splash-screen .progress-bar-progress {
62-
background-color: #90caf9;
63-
top: 0;
64-
left: 0;
65-
width: 100%;
66-
bottom: 0;
67-
position: absolute;
68-
transform-origin: left;
69-
transform: translateX(-99%);
70-
}
71-
72-
.cwc-splash-screen .progress-text {
73-
margin-top: 10px;
74-
height: 28px;
75-
}
76-
77-
.cwc-splash-screen .progress-text-log {
78-
box-shadow: 10px 10px 15px silver;
79-
margin-top: 10px;
80-
height: 100px;
81-
overflow-y: scroll;
82-
display: flex;
83-
flex-direction: column-reverse;
84-
}
85-
86-
.cwc-splash-screen .progress-text-log ul {
87-
padding: 10px;
88-
margin: 0;
89-
}
90-
91-
.cwc-splash-screen .progress-text-log li {
92-
list-style: none;
93-
}
94-
95182
/* Logo animation. */
96183
.cwc-splash-screen .cwc-logo {
97184
display: block;

‎build/webpack.config.babel.js

+20-8
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ import TerserPlugin from 'terser-webpack-plugin';
3030
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
3131

3232
import path from 'path';
33-
import webpack from 'webpack';
3433

3534
module.exports = (mode = 'development') => ({
3635
mode: mode == 'deploy' ? 'production' : mode,
@@ -57,7 +56,8 @@ module.exports = (mode = 'development') => ({
5756
},
5857
},
5958
entry: {
60-
boot: ['./src/boot.js', './assets/css/boot.css'],
59+
app: ['./src/index.js', './assets/css/app.css'],
60+
serviceWorker: ['./src/service-worker/service-worker.js'],
6161
cacheServiceWorker: ['./src/service-worker/cache-service-worker.js'],
6262
previewServiceWorker: ['./src/service-worker/preview-service-worker.js'],
6363
},
@@ -78,12 +78,27 @@ module.exports = (mode = 'development') => ({
7878
},
7979
optimization: {
8080
emitOnErrors: true,
81+
runtimeChunk: {
82+
name: (entrypoint) => {
83+
if (entrypoint.name == 'app') {
84+
return `runtime-${entrypoint.name}`;
85+
}
86+
return null;
87+
},
88+
},
89+
splitChunks: {
90+
chunks(chunk) {
91+
return chunk?.name == 'app';
92+
},
93+
},
8194
minimize: mode != 'development',
8295
minimizer: [
8396
new CssMinimizerPlugin(),
8497
new HtmlMinimizerPlugin(),
8598
new JsonMinimizerPlugin(),
86-
new TerserPlugin(),
99+
new TerserPlugin({
100+
parallel: true,
101+
}),
87102
],
88103
},
89104
devtool: mode == 'development' ? 'inline-source-map' : false,
@@ -160,19 +175,15 @@ module.exports = (mode = 'development') => ({
160175
],
161176
},
162177
plugins: [
178+
new CleanWebpackPlugin(),
163179
new CompressionPlugin({
164180
test: /\.(woff|woff2|eot|ttf|otf)$/i,
165181
exclude: /.map$/,
166182
deleteOriginalAssets: 'keep-source-map',
167183
}),
168-
new CleanWebpackPlugin(),
169184
new MiniCssExtractPlugin({
170185
filename: 'css/[name].css',
171186
}),
172-
new webpack.DefinePlugin({
173-
DEVMODE: mode === 'development',
174-
VERSION: JSON.stringify(process.env.npm_package_version),
175-
}),
176187
new CopyPlugin({
177188
patterns: [
178189
{
@@ -266,6 +277,7 @@ module.exports = (mode = 'development') => ({
266277
],
267278
}),
268279
new HtmlWebpackPlugin({
280+
title: 'Coding with Chrome',
269281
template: './src/index.html',
270282
favicon: 'assets/favicon/favicon.ico',
271283
inject: false,

‎global.d.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ declare const serviceWorkerOption: Record<string, unknown>;
2525
/** Assets Array for Cache Worker */
2626
declare const APP_ASSETS: [string];
2727

28+
/** Version from package.json */
29+
declare const APP_VERSION: string;
30+
2831
/** Devmode from Webpack config */
2932
declare const DEVMODE: boolean;
3033

31-
/** Version from package.json */
32-
declare const VERSION: string;
33-
3434
declare module '*.module.css' {
3535
// eslint-disable-next-line @typescript-eslint/no-explicit-any
3636
const content: any;

‎src/boot.js

-71
This file was deleted.

‎src/components/App/App.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const SelectScreen = lazy(() => import('../SelectScreen'));
3434
export function render(node) {
3535
const root = ReactDOM.createRoot(node);
3636
root.render(
37-
<Suspense fallback="...is loading">
37+
<Suspense>
3838
<Router>
3939
<Routes>
4040
<Route path="/desktop" element={<DesktopApp />} />

0 commit comments

Comments
 (0)