OCram85/code-server
Archived
1
0
Fork 0
Code Pull Requests 2 Activity

Added serviceworker and web-manifest (#154)

Browse Source 
* 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
This commit is contained in:
Luca Casonato
2019-04-16 22:44:57 +02:00
committed by Asher
parent b8f222acf2
commit 22b485acd9
6 changed files with 676 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
scripts/webpack.client.config.js
View File

@ -4,58 +4,104 @@ const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PreloadWebpackPlugin = require("preload-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackPwaManifest = require("webpack-pwa-manifest");
const { GenerateSW } = require("workbox-webpack-plugin");
// const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const root = path.join(__dirname, "..");
const prod = process.env.NODE_ENV === "production" || process.env.CI === "true";
module.exports = (options = {}) => merge(
require("./webpack.general.config")(options), {
devtool: prod ? "none" : "cheap-module-eval-source-map",
mode: prod ? "production" : "development",
entry: prod ? options.entry : [
"webpack-hot-middleware/client?reload=true&quiet=true",
options.entry,
],
module: {
rules: [{
test: /\.s?css$/,
// This is required otherwise it'll fail to resolve CSS in common.
include: root,
use: [{
loader: MiniCssExtractPlugin.loader,
}, {
loader: "css-loader",
}, {
loader: "sass-loader",
}],
}, {
test: /\.(png|ttf|woff|eot|woff2)$/,
use: [{
loader: "file-loader",
options: {
name: "[path][name].[ext]",
},
}],
}, {
test: /\.svg$/,
loader: 'url-loader'
}],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
new HtmlWebpackPlugin({
template: options.template,
}),
new PreloadWebpackPlugin({
rel: "preload",
as: "script",
}),
].concat(prod ? [] : [
new webpack.HotModuleReplacementPlugin(),
]),
target: "web",
});
require("./webpack.general.config")(options), {
devtool: prod ? "none" : "cheap-module-eval-source-map",
mode: prod ? "production" : "development",
entry: prod ? options.entry : [
"webpack-hot-middleware/client?reload=true&quiet=true",
options.entry,
],
module: {
rules: [{
test: /\.s?css$/,
// This is required otherwise it'll fail to resolve CSS in common.
include: root,
use: [{
loader: MiniCssExtractPlugin.loader,
}, {
loader: "css-loader",
}, {
loader: "sass-loader",
}],
}, {
test: /\.(png|ttf|woff|eot|woff2)$/,
use: [{
loader: "file-loader",
options: {
name: "[path][name].[ext]",
},
}],
}, {
test: /\.svg$/,
loader: 'url-loader'
}],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new HtmlWebpackPlugin({
template: options.template
}),
new PreloadWebpackPlugin({
rel: "preload",
as: "script"
}),
new WebpackPwaManifest({
name: "Coder",
short_name: "Coder",
description: "Run VS Code on a remote server",
background_color: "#e5e5e5",
icons: [
{
src: path.join(root, "packages/web/assets/logo.png"),
sizes: [96, 128, 192, 256, 384]
}
]
})
].concat(prod ? [
new GenerateSW({
runtimeCaching: [
{
urlPattern: new RegExp(".*"),
handler: "StaleWhileRevalidate",
options: {
cacheName: "code-server",
expiration: {
maxAgeSeconds: 86400
},
cacheableResponse: {
statuses: [0, 200]
}
}
}
// Network first caching is also possible.
/*{
urlPattern: "",
handler: "NetworkFirst",
options: {
networkTimeoutSeconds: 4,
cacheName: "code-server",
expiration: {
maxAgeSeconds: 86400,
},
cacheableResponse: {
statuses: [0, 200],
},
},
}*/
]
})
] : [new webpack.HotModuleReplacementPlugin()]),
target: "web"
});