Add support for PWA (#1005)
* Add logic for dynamically generating web manifest * Make PWA icon get autogenerated * Make service worker work * Tweak things for PWA * Handle apple icons and refactor * Update prod dockerfile * Remove jimp * Remove unnecessary option * Use different function syntax
This commit is contained in:
parent
c5fd084577
commit
b19b51c78c
15 changed files with 1074 additions and 226 deletions
|
@ -3,8 +3,8 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|||
const nodeExternals = require("webpack-node-externals");
|
||||
const CopyPlugin = require("copy-webpack-plugin");
|
||||
const RunNodeWebpackPlugin = require("run-node-webpack-plugin");
|
||||
const { merge } = require("lodash");
|
||||
|
||||
const merge = require("lodash/merge");
|
||||
const { ServiceWorkerPlugin } = require("service-worker-webpack");
|
||||
const banner = `
|
||||
hash:[contentHash], chunkhash:[chunkhash], name:[name], filebase:[base], query:[query], file:[file]
|
||||
Source code: https://github.com/LemmyNet/lemmy-ui
|
||||
|
@ -83,6 +83,7 @@ const createServerConfig = (_env, mode) => {
|
|||
|
||||
return config;
|
||||
};
|
||||
|
||||
const createClientConfig = (_env, mode) => {
|
||||
const config = merge({}, base, {
|
||||
mode,
|
||||
|
@ -90,6 +91,58 @@ const createClientConfig = (_env, mode) => {
|
|||
output: {
|
||||
filename: "js/client.js",
|
||||
},
|
||||
plugins: [
|
||||
...base.plugins,
|
||||
new ServiceWorkerPlugin({
|
||||
enableInDevelopment: true,
|
||||
workbox: {
|
||||
modifyURLPrefix: {
|
||||
"/": "/static/",
|
||||
},
|
||||
cacheId: "lemmy",
|
||||
include: [/(assets|styles)\/.+\..+|client\.js$/g],
|
||||
inlineWorkboxRuntime: true,
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: ({
|
||||
sameOrigin,
|
||||
url: { pathname, host },
|
||||
request: { method },
|
||||
}) =>
|
||||
(sameOrigin || host.includes("localhost")) &&
|
||||
(!(
|
||||
pathname.includes("pictrs") || pathname.includes("static")
|
||||
) ||
|
||||
method === "POST"),
|
||||
handler: "NetworkFirst",
|
||||
options: {
|
||||
cacheName: "instance-cache",
|
||||
},
|
||||
},
|
||||
{
|
||||
urlPattern: ({ url: { pathname, host }, sameOrigin }) =>
|
||||
(sameOrigin || host.includes("localhost")) &&
|
||||
pathname.includes("static"),
|
||||
handler: "CacheFirst",
|
||||
options: {
|
||||
cacheName: "static-cache",
|
||||
},
|
||||
},
|
||||
{
|
||||
urlPattern: ({ url: { pathname }, request: { method } }) =>
|
||||
pathname.includes("pictrs") && method === "GET",
|
||||
handler: "StaleWhileRevalidate",
|
||||
options: {
|
||||
cacheName: "image-cache",
|
||||
expiration: {
|
||||
maxAgeSeconds: 60 * 60 * 24,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
if (mode === "development") {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue