Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0386825

Browse files
lucacasonatocode-asher
authored andcommitted
Added serviceworker and web-manifest (#154)
* Added serviceworker and manifest.json * added deps in package.json * fixed image link * actually fixed images i think * added assets to individual module folders * added caching * Serviceworker now properly loads * Changed single to double quotes * Update lock * moved the service worker back into prod only * removed sw from general * changed background color of splash screen * added logo to server * centralized logo into single assets folder
1 parent 08d4c53 commit 0386825

File tree

6 files changed

+676
-77
lines changed

6 files changed

+676
-77
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@
5454
"webpack-dev-middleware": "^3.5.0",
5555
"webpack-dev-server": "^3.1.14",
5656
"webpack-hot-middleware": "^2.24.3",
57+
"webpack-pwa-manifest": "^4.0.0",
58+
"workbox-webpack-plugin": "^4.1.0",
5759
"write-file-webpack-plugin": "^4.5.0"
5860
},
5961
"resolutions": {

‎packages/web/assets/logo.png‎

27.9 KB
Loading[フレーム]

‎packages/web/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "@coder/web",
3-
"scripts": {
4-
"build": "../../node_modules/.bin/cross-env UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.config.js"
5-
}
2+
"name": "@coder/web",
3+
"scripts": {
4+
"build": "../../node_modules/.bin/cross-env UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.config.js"
5+
}
66
}

‎packages/web/src/index.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,15 @@
2323
return;
2424
}
2525
document.body.style.background = bg;
26-
})();
26+
})();
27+
28+
// Check that service workers are registered
29+
if ("serviceWorker" in navigator) {
30+
// Use the window load event to keep the page load performant
31+
window.addEventListener("load", () => {
32+
navigator.serviceWorker.register("/service-worker.js");
33+
});
34+
}
2735
</script>
2836
</body>
29-
3037
</html>

‎scripts/webpack.client.config.js‎

Lines changed: 95 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,58 +4,104 @@ const merge = require("webpack-merge");
44
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
55
const PreloadWebpackPlugin = require("preload-webpack-plugin");
66
const HtmlWebpackPlugin = require("html-webpack-plugin");
7+
const WebpackPwaManifest = require("webpack-pwa-manifest");
8+
const { GenerateSW } = require("workbox-webpack-plugin");
9+
710
// const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
811

912
const root = path.join(__dirname, "..");
1013
const prod = process.env.NODE_ENV === "production" || process.env.CI === "true";
1114

1215
module.exports = (options = {}) => merge(
13-
require("./webpack.general.config")(options), {
14-
devtool: prod ? "none" : "cheap-module-eval-source-map",
15-
mode: prod ? "production" : "development",
16-
entry: prod ? options.entry : [
17-
"webpack-hot-middleware/client?reload=true&quiet=true",
18-
options.entry,
19-
],
20-
module: {
21-
rules: [{
22-
test: /\.s?css$/,
23-
// This is required otherwise it'll fail to resolve CSS in common.
24-
include: root,
25-
use: [{
26-
loader: MiniCssExtractPlugin.loader,
27-
}, {
28-
loader: "css-loader",
29-
}, {
30-
loader: "sass-loader",
31-
}],
32-
}, {
33-
test: /\.(png|ttf|woff|eot|woff2)$/,
34-
use: [{
35-
loader: "file-loader",
36-
options: {
37-
name: "[path][name].[ext]",
38-
},
39-
}],
40-
}, {
41-
test: /\.svg$/,
42-
loader: 'url-loader'
43-
}],
44-
},
45-
plugins: [
46-
new MiniCssExtractPlugin({
47-
filename: "[name].css",
48-
chunkFilename: "[id].css",
49-
}),
50-
new HtmlWebpackPlugin({
51-
template: options.template,
52-
}),
53-
new PreloadWebpackPlugin({
54-
rel: "preload",
55-
as: "script",
56-
}),
57-
].concat(prod ? [] : [
58-
new webpack.HotModuleReplacementPlugin(),
59-
]),
60-
target: "web",
61-
});
16+
require("./webpack.general.config")(options), {
17+
devtool: prod ? "none" : "cheap-module-eval-source-map",
18+
mode: prod ? "production" : "development",
19+
entry: prod ? options.entry : [
20+
"webpack-hot-middleware/client?reload=true&quiet=true",
21+
options.entry,
22+
],
23+
module: {
24+
rules: [{
25+
test: /\.s?css$/,
26+
// This is required otherwise it'll fail to resolve CSS in common.
27+
include: root,
28+
use: [{
29+
loader: MiniCssExtractPlugin.loader,
30+
}, {
31+
loader: "css-loader",
32+
}, {
33+
loader: "sass-loader",
34+
}],
35+
}, {
36+
test: /\.(png|ttf|woff|eot|woff2)$/,
37+
use: [{
38+
loader: "file-loader",
39+
options: {
40+
name: "[path][name].[ext]",
41+
},
42+
}],
43+
}, {
44+
test: /\.svg$/,
45+
loader: 'url-loader'
46+
}],
47+
},
48+
plugins: [
49+
new MiniCssExtractPlugin({
50+
filename: "[name].css",
51+
chunkFilename: "[id].css"
52+
}),
53+
new HtmlWebpackPlugin({
54+
template: options.template
55+
}),
56+
new PreloadWebpackPlugin({
57+
rel: "preload",
58+
as: "script"
59+
}),
60+
new WebpackPwaManifest({
61+
name: "Coder",
62+
short_name: "Coder",
63+
description: "Run VS Code on a remote server",
64+
background_color: "#e5e5e5",
65+
icons: [
66+
{
67+
src: path.join(root, "packages/web/assets/logo.png"),
68+
sizes: [96, 128, 192, 256, 384]
69+
}
70+
]
71+
})
72+
].concat(prod ? [
73+
new GenerateSW({
74+
runtimeCaching: [
75+
{
76+
urlPattern: new RegExp(".*"),
77+
handler: "StaleWhileRevalidate",
78+
options: {
79+
cacheName: "code-server",
80+
expiration: {
81+
maxAgeSeconds: 86400
82+
},
83+
cacheableResponse: {
84+
statuses: [0, 200]
85+
}
86+
}
87+
}
88+
// Network first caching is also possible.
89+
/*{
90+
urlPattern: "",
91+
handler: "NetworkFirst",
92+
options: {
93+
networkTimeoutSeconds: 4,
94+
cacheName: "code-server",
95+
expiration: {
96+
maxAgeSeconds: 86400,
97+
},
98+
cacheableResponse: {
99+
statuses: [0, 200],
100+
},
101+
},
102+
}*/
103+
]
104+
})
105+
] : [new webpack.HotModuleReplacementPlugin()]),
106+
target: "web"
107+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /