feat: Installable PWA (#1882)

webpack.config.js

@@ -4,6 +4,8 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');
 const pkg = require("rich-markdown-editor/package.json");
+const WebpackPwaManifest = require("webpack-pwa-manifest");
+const WorkboxPlugin = require("workbox-webpack-plugin");
 
 require('dotenv').config({ silent: true });
 
@@ -59,6 +61,30 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: 'server/static/index.html',
     }),
+    new WebpackPwaManifest({
+      name: "Outline",
+      short_name: "Outline",
+      background_color: "#fff",
+      theme_color: "#fff",
+      start_url: process.env.URL,
+      display: "standalone",
+      icons: [
+        {
+          src: path.resolve("public/icon-512.png"),
+          // For Chrome, you must provide at least a 192x192 pixel icon, and a 512x512 pixel icon.
+          // If only those two icon sizes are provided, Chrome will automatically scale the icons
+          // to fit the device. If you'd prefer to scale your own icons, and adjust them for
+          // pixel-perfection, provide icons in increments of 48dp.
+          sizes: [512, 192],
+          purpose: "any maskable",
+        },
+      ]
+    }),
+    new WorkboxPlugin.GenerateSW({
+      clientsClaim: true,
+      skipWaiting: true,
+      maximumFileSizeToCacheInBytes: 15 * 1024 * 1024, // For large bundles
+    }),
     new RelativeCiAgentWebpackPlugin(),
   ],
   stats: {