feat(cli): add pwa to plugins

adapter/src/components/ServerVersionProvider.js

@@ -30,6 +30,8 @@ export const ServerVersionProvider = ({
                 setState({ loading: false, systemInfo })
             })
             .catch((e) => {
+                // Todo: If this is a network error, the app cannot load -- handle that gracefully here
+                // if (e === 'Network error') { ... }
                 setState({ loading: false, error: e })
             })
 

adapter/src/utils/api.js

@@ -14,7 +14,7 @@ const request = (url, options) => {
         })
             .then((response) => {
                 if (response.status !== 200) {
-                    reject('Request failed', response.statusText)
+                    reject('Request failed ' + response.statusText)
                     return
                 }
                 try {

cli/package.json

@@ -67,7 +67,8 @@
         "terser-webpack-plugin": "^5.3.1",
         "webpack": "^5.41.1",
         "webpack-dev-server": "^4.7.4",
-        "workbox-build": "^6.1.5"
+        "workbox-build": "^6.1.5",
+        "workbox-webpack-plugin": "^6.5.4"
     },
     "bin": {
         "d2-app-scripts": "./bin/d2-app-scripts"

cli/src/commands/build.js

@@ -132,11 +132,14 @@ const handler = async ({
                 await shell.build()
 
                 if (config.entryPoints.plugin) {
+                    reporter.info('Building plugin...')
                     await plugin.build()
                 }
 
                 if (config.pwa.enabled) {
-                    reporter.info('Injecting precache manifest...')
+                    reporter.info(
+                        'Injecting supplementary precache manifest...'
+                    )
                     await injectPrecacheManifest(paths, config)
                 }
             } else {

cli/src/lib/parseConfig.js

@@ -42,6 +42,7 @@ const validateConfig = (config) => {
             process.exit(1)
         }
     })
+    // Todo: make sure apps with plugins have `pwa_enabled: true` in the config
     return true
 }
 

cli/src/lib/plugin/build.js

@@ -8,10 +8,14 @@ const { reporter } = require('@dhis2/cli-helpers-engine')
 const webpack = require('webpack')
 const webpackConfigFactory = require('./webpack.config')
 
-module.exports = async ({ paths }) => {
+module.exports = async ({ config, paths }) => {
     reporter.debug('Building plugin...')
 
-    const webpackConfig = webpackConfigFactory({ env: 'production', paths })
+    const webpackConfig = webpackConfigFactory({
+        env: 'production',
+        config,
+        paths,
+    })
     const compiler = webpack(webpackConfig)
     return new Promise((resolve, reject) => {
         compiler.run((err, stats) => {

cli/src/lib/plugin/start.js

@@ -9,8 +9,13 @@ const webpack = require('webpack')
 const WebpackDevServer = require('webpack-dev-server')
 const webpackConfigFactory = require('./webpack.config')
 
-module.exports = async ({ port, paths }) => {
-    const webpackConfig = webpackConfigFactory({ env: 'production', paths })
+module.exports = async ({ port, config, paths }) => {
+    const webpackConfig = webpackConfigFactory({
+        // todo: change to development, but this creates a compilation error
+        env: 'production',
+        config,
+        paths,
+    })
     const compiler = webpack(webpackConfig)
 
     const host = process.env.HOST || 'localhost'

cli/src/lib/plugin/webpack.config.js

@@ -8,7 +8,9 @@ const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
 const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath')
 const TerserPlugin = require('terser-webpack-plugin')
 const webpack = require('webpack')
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
 const makeBabelConfig = require('../../../config/makeBabelConfig')
+const { getPWAEnvVars } = require('../pwa')
 const getShellEnv = require('../shell/env')
 
 const babelWebpackConfig = {
@@ -21,7 +23,7 @@ const babelWebpackConfig = {
 const cssRegex = /\.css$/
 const cssModuleRegex = /\.module\.css$/
 
-module.exports = ({ env: webpackEnv, paths }) => {
+module.exports = ({ env: webpackEnv, config, paths }) => {
     const isProduction = webpackEnv === 'production'
     const isDevelopment = !isProduction
 
@@ -31,7 +33,12 @@ module.exports = ({ env: webpackEnv, paths }) => {
         process.env.PUBLIC_URL
     )
 
-    const shellEnv = getShellEnv({ plugin: 'true' })
+    const shellEnv = getShellEnv({
+        plugin: 'true',
+        name: config.title,
+        // todo: need to make sure PWA is enabled for plugins
+        ...getPWAEnvVars(config),
+    })
 
     // "style" loader turns CSS into JS modules that inject <style> tags.
     // "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -99,6 +106,10 @@ module.exports = ({ env: webpackEnv, paths }) => {
             chunkFilename: isProduction
                 ? 'static/js/plugin-[name].[contenthash:8].chunk.js'
                 : 'static/js/plugin-[name].chunk.js',
+            // ! dhis2: this at least gets fonts to match the CRA build,
+            // but is re-outputting them
+            assetModuleFilename: 'static/media/[name].[hash][ext]',
+            // TODO: investigate dev source maps here (devtoolModuleFilenameTemplate)
         },
         optimization: {
             minimize: isProduction,
@@ -180,6 +191,27 @@ module.exports = ({ env: webpackEnv, paths }) => {
                 resourceRegExp: /^\.\/locale$/,
                 contextRegExp: /moment$/,
             }),
+            // dhis2: Inject plugin static assets to the existing SW's precache manifest
+            process.env.NODE_ENV === 'production' &&
+                new WorkboxWebpackPlugin.InjectManifest({
+                    swSrc: paths.shellBuildServiceWorker,
+                    injectionPoint: 'self.__WB_PLUGIN_MANIFEST',
+                    // Skip compiling the SW, which happens in the app build step
+                    compileSrc: false,
+                    dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
+                    exclude: [
+                        /\.map$/,
+                        /asset-manifest\.json$/,
+                        /LICENSE/,
+                        // TODO dhis2: locales are weird in the plugin build -
+                        // Ignore them in precache manifest for now
+                        /moment-locales/,
+                    ],
+                    // Bump up the default maximum size (2mb) that's precached,
+                    // to make lazy-loading failure scenarios less likely.
+                    // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
+                    maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+                }),
         ].filter(Boolean),
         module: {
             rules: [
@@ -223,6 +255,9 @@ module.exports = ({ env: webpackEnv, paths }) => {
                             use: getStyleLoaders({
                                 importLoaders: 1,
                                 sourceMap: true,
+                                modules: {
+                                    mode: 'icss',
+                                },
                             }),
                             // Don't consider CSS imports dead code even if the
                             // containing package claims to have no side effects.
@@ -236,6 +271,7 @@ module.exports = ({ env: webpackEnv, paths }) => {
                                 importLoaders: 1,
                                 sourceMap: true,
                                 modules: {
+                                    mode: 'local',
                                     getLocalIdent: getCSSModuleLocalIdent,
                                 },
                             }),
@@ -246,23 +282,24 @@ module.exports = ({ env: webpackEnv, paths }) => {
                         // This loader doesn't use a "test" so it will catch all modules
                         // that fall through the other loaders.
                         {
-                            loader: require.resolve('file-loader'),
                             // Exclude `js` files to keep "css" loader working as it injects
                             // its runtime that would otherwise be processed through "file" loader.
                             // Also exclude `html` and `json` extensions so they get processed
                             // by webpacks internal loaders.
                             exclude: [
+                                /^$/,
                                 /\.(js|mjs|jsx|ts|tsx)$/,
                                 /\.html$/,
                                 /\.json$/,
                             ],
-                            options: {
-                                name: 'static/media/[name].[hash:8].[ext]',
-                            },
+                            type: 'asset/resource',
                         },
                     ],
                 },
             ],
         },
+        // Saves some chunk size logging
+        performance: false,
+        // stats: 'verbose',
     }
 }

pwa/src/service-worker/service-worker.js

@@ -60,6 +60,11 @@ export function setUpServiceWorker() {
         // Includes all built assets and index.html
         const precacheManifest = self.__WB_MANIFEST || []
 
+        // Same thing for built plugin assets
+        const pluginPrecacheManifest = self.__WB_PLUGIN_MANIFEST || []
+        precacheAndRoute(pluginPrecacheManifest)
+
+        // todo: also do this routing for plugin.html
         // Extract index.html from the manifest to precache, then route
         // in a custom way
         const indexHtmlManifestEntry = precacheManifest.find(({ url }) =>
@@ -128,7 +133,8 @@ export function setUpServiceWorker() {
         // `additionalManifestEntries` option in d2.config.js; see the docs and
         // 'injectPrecacheManifest.js' in the CLI package.
         // '[]' fallback prevents an error when switching pwa enabled to disabled
-        precacheAndRoute(self.__WB_BUILD_MANIFEST || [])
+        const sharedBuildManifest = self.__WB_BUILD_MANIFEST || []
+        precacheAndRoute(sharedBuildManifest)
     }
 
     // Request handler during recording mode: ALL requests are cached

pwa/src/service-worker/utils.js

@@ -6,6 +6,12 @@ import {
 } from '../lib/sections-db.js'
 
 const CACHE_KEEP_LIST = ['other-assets', 'app-shell']
+const APP_ADAPTER_URL_PATTERNS = [
+    /\/api(\/\d+)?\/system\/info/, // from ServerVersionProvider
+    /\/api(\/\d+)?\/userSettings/, // useLocale
+    /\/api(\/\d+)?\/me\?fields=id$/, // useVerifyLatestUser
+]
+
 // '[]' Fallback prevents error when switching from pwa enabled to disabled
 const APP_SHELL_URL_FILTER_PATTERNS = JSON.parse(
     process.env
@@ -46,6 +52,14 @@ export function setUpKillSwitchServiceWorker() {
 }
 
 export function urlMeetsAppShellCachingCriteria(url) {
+    // Cache this request if it is important for the app adapter to load
+    const isAdapterRequest = APP_ADAPTER_URL_PATTERNS.some((pattern) =>
+        pattern.test(url.href)
+    )
+    if (isAdapterRequest) {
+        return true
+    }
+
     // Don't cache if pwa.caching.omitExternalRequests in d2.config is true
     if (
         OMIT_EXTERNAL_REQUESTS_FROM_APP_SHELL &&