{i18n.t('Have a great {{dayOfTheWeek}}!', {
+ // NB: This won't localize on a dev build due to
+ // Vite's monorepo dep pre-bundling behavior.
+ // `moment` localization works outside the monorepo
+ // and in production here though
dayOfTheWeek:
moment.weekdays(true)[moment().weekday()],
})}
diff --git a/cli/config/init.App.module.css b/examples/simple-app/src/App.module.css
similarity index 89%
rename from cli/config/init.App.module.css
rename to examples/simple-app/src/App.module.css
index a824cffd5..3ee1159e0 100644
--- a/cli/config/init.App.module.css
+++ b/examples/simple-app/src/App.module.css
@@ -1,9 +1,10 @@
-.container {
+.appContainer {
width: 100%;
height: 100%;
+
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1rem;
-}
+}
\ No newline at end of file
diff --git a/examples/simple-app/src/App.style.js b/examples/simple-app/src/App.style.js
deleted file mode 100644
index d728f2bbe..000000000
--- a/examples/simple-app/src/App.style.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import css from 'styled-jsx/css'
-
-export default css`
- div {
- width: 100%;
- height: 100%;
-
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: 1rem;
- }
-`
diff --git a/package.json b/package.json
index 3ae750a66..35ba83237 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "root",
- "version": "11.7.5",
+ "version": "12.0.0-alpha.29",
"private": true,
"repository": {
"type": "git",
@@ -17,7 +17,7 @@
]
},
"devDependencies": {
- "@dhis2/cli-style": "^10.4.3",
+ "@dhis2/cli-style": "^10.5.2",
"@dhis2/cli-utils-docsite": "^3.0.0",
"concurrently": "^6.0.0",
"serve": "^12.0.0"
diff --git a/pwa/package.json b/pwa/package.json
index 04f368ca5..b42dcab7e 100644
--- a/pwa/package.json
+++ b/pwa/package.json
@@ -1,6 +1,6 @@
{
"name": "@dhis2/pwa",
- "version": "11.7.5",
+ "version": "12.0.0-alpha.29",
"description": "",
"license": "BSD-3-Clause",
"publishConfig": {
@@ -13,14 +13,13 @@
"deploy": "d2-app-scripts deploy"
},
"devDependencies": {
- "@dhis2/cli-app-scripts": "11.7.5"
+ "@dhis2/cli-app-scripts": "12.0.0-alpha.29"
},
"dependencies": {
"idb": "^6.0.0",
- "workbox-core": "^6.1.5",
- "workbox-precaching": "^6.1.5",
- "workbox-routing": "^6.1.5",
- "workbox-strategies": "^6.1.5"
+ "workbox-precaching": "^7.1.0",
+ "workbox-routing": "^7.1.0",
+ "workbox-strategies": "^7.1.0"
},
"main": "./build/cjs/index.js",
"module": "./build/es/index.js",
diff --git a/pwa/src/service-worker/other-strategies.js b/pwa/src/service-worker/other-strategies.js
new file mode 100644
index 000000000..7df8d3ee8
--- /dev/null
+++ b/pwa/src/service-worker/other-strategies.js
@@ -0,0 +1,86 @@
+import { Strategy } from 'workbox-strategies'
+
+const versionRegex = /\?[tv]=[0-9a-z]+$/
+
+const isLocalFile = (request) => {
+ const appRoot = new URL('.', self.location.href).href
+ return request.url.startsWith(appRoot)
+}
+
+/** Remove version tag on local files */
+const getCacheKey = (request) => {
+ const versionMatch = request.url.match(versionRegex)
+ if (!isLocalFile(request) || !versionMatch) {
+ // don't need to handle this request
+ return request
+ }
+ // else return unversioned url
+ return request.url.substring(0, versionMatch.index)
+}
+
+/**
+ * During development, the Vite server can end up creating a lot of
+ * requests that add to the cache more and more, since assets get new
+ * version hashes:
+ * Each time the server restarts, dependencies get a new '?v='
+ * param added to the URL and a new cache entry for it.
+ * Each time a source file is hot-updated, that file gets a new cache entry
+ * with a '?t=' param added to the URL.
+ *
+ * If, after fetching, we cache these requests using the URL _without_ the
+ * version tag as a key, we save adding lots of duplicate entries to the cache
+ * while still caching the latest version of the file.
+ *
+ * This also avoids a niche but crash-causing bug for PWA apps in development
+ * that happens after editing files locally to trigger HMR updates, then going
+ * offline and reloading the app
+ */
+export class DevNetworkFirst extends Strategy {
+ async _handle(request, handler) {
+ let error, response
+ try {
+ // Try to fetch over the network
+ // -- include version params here
+ response = await handler.fetch(request)
+ } catch (fetchError) {
+ error = fetchError
+ }
+
+ // Handle local files with version params added
+ const cacheKey = getCacheKey(request)
+
+ if (response && !error) {
+ // Successful -- try to cache
+ // Note: handler.cachePut doesn't cache 400+ & 500+ responses,
+ // but they will get get returned to the browser below
+ // for the client to handle
+ await handler.cachePut(cacheKey, response.clone())
+ } else {
+ // Unsuccessful -- try cache for response to return
+ response = await handler.cacheMatch(cacheKey)
+ }
+
+ return response
+ }
+}
+
+/**
+ * Strategy for all other requests: try cache if network fails,
+ * but don't add anything to cache
+ */
+export class NetworkAndTryCache extends Strategy {
+ _handle(request, handler) {
+ return handler.fetch(request).catch((fetchErr) => {
+ // use caches.match here because it matches all caches;
+ // handler.cacheMatch only checks one
+ return caches.match(request).then((res) => {
+ // If not found in cache, throw original fetchErr
+ // (if there's a cache err, that will be returned)
+ if (!res) {
+ throw fetchErr
+ }
+ return res
+ })
+ })
+ }
+}
diff --git a/pwa/src/service-worker/set-up-service-worker.js b/pwa/src/service-worker/set-up-service-worker.js
index 4bc5bfad7..960c539dd 100644
--- a/pwa/src/service-worker/set-up-service-worker.js
+++ b/pwa/src/service-worker/set-up-service-worker.js
@@ -4,7 +4,6 @@ import {
NetworkFirst,
NetworkOnly,
StaleWhileRevalidate,
- Strategy,
} from 'workbox-strategies'
import { swMsgs } from '../lib/constants.js'
import {
@@ -12,6 +11,7 @@ import {
dhis2ConnectionStatusPlugin,
initDhis2ConnectionStatus,
} from './dhis2-connection-status'
+import { DevNetworkFirst, NetworkAndTryCache } from './other-strategies.js'
import {
startRecording,
completeRecording,
@@ -26,7 +26,6 @@ import {
setUpKillSwitchServiceWorker,
getClientsInfo,
claimClients,
- CRA_MANIFEST_EXCLUDE_PATTERNS,
} from './utils.js'
export function setUpServiceWorker() {
@@ -60,11 +59,8 @@ export function setUpServiceWorker() {
// In development, static assets are handled by 'network first' strategy
// and will be kept up-to-date.
if (PRODUCTION_ENV) {
- // Precache all of the assets generated by your build process.
- // Their URLs are injected into the manifest variable below.
- // This variable must be present somewhere in your service worker file,
- // even if you decide not to use precaching. See https://cra.link/PWA.
- // Includes all built assets and index.html
+ // Injection point for the precache manifest from workbox-build,
+ // a manifest of app assets to fetch and cache upon SW installation
const precacheManifest = self.__WB_MANIFEST || []
// todo: also do this routing for plugin.html
@@ -122,39 +118,15 @@ export function setUpServiceWorker() {
return matchPrecache(indexUrl)
})
}
- // NOTE: This route must come before any precacheAndRoute calls
+ // NOTE: This route must come before any precacheAndRoute calls, since
+ // precacheAndRoute creates routes for ALL previously precached files
registerRoute(navigationRouteMatcher, navigationRouteHandler)
- // Handle the rest of files in the manifest - filter out index.html,
- // and all moment-locales, which bulk up the precache and slow down
- // installation significantly. Handle them network-first in app shell
- const restOfManifest = precacheManifest.filter((e) => {
- if (e === indexHtmlManifestEntry) {
- return false
- }
- // Files from the precache manifest generated by CRA need to be
- // managed here, because we don't have access to their webpack
- // config
- const entryShouldBeExcluded = CRA_MANIFEST_EXCLUDE_PATTERNS.some(
- (pattern) => pattern.test(e.url)
- )
- return !entryShouldBeExcluded
- })
+ // Handle the rest of files in the manifest - filter out index.html
+ const restOfManifest = precacheManifest.filter(
+ (e) => e !== indexHtmlManifestEntry
+ )
precacheAndRoute(restOfManifest)
-
- // Same thing for built plugin assets
- const pluginPrecacheManifest = self.__WB_PLUGIN_MANIFEST || []
- precacheAndRoute(pluginPrecacheManifest)
-
- // Similar to above; manifest injection from `workbox-build`
- // Precaches all assets in the shell's build folder except in `static`
- // (which CRA's workbox-webpack-plugin handle smartly).
- // Additional files to precache can be added using the
- // `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
- const sharedBuildManifest = self.__WB_BUILD_MANIFEST || []
- precacheAndRoute(sharedBuildManifest)
}
// Handling pings: only use the network, and don't update the connection
@@ -187,34 +159,20 @@ export function setUpServiceWorker() {
})
)
- // Network-first caching by default
+ // Network-first caching for everything else.
+ // Uses a custom strategy in dev mode to avoid bloating cache
+ // with file duplicates
// * NOTE: there may be lazy-loading errors while offline in dev mode
+ const ResolvedNetworkFirst = PRODUCTION_ENV ? NetworkFirst : DevNetworkFirst
registerRoute(
({ url }) => urlMeetsAppShellCachingCriteria(url),
- new NetworkFirst({
+ new ResolvedNetworkFirst({
cacheName: 'app-shell',
plugins: [dhis2ConnectionStatusPlugin],
})
)
- // Strategy for all other requests: try cache if network fails,
- // but don't add anything to cache
- class NetworkAndTryCache extends Strategy {
- _handle(request, handler) {
- return handler.fetch(request).catch((fetchErr) => {
- // handler.cacheMatch doesn't work b/c it doesn't check all caches
- return caches.match(request).then((res) => {
- // If not found in cache, throw original fetchErr
- // (if there's a cache err, that will be returned)
- if (!res) {
- throw fetchErr
- }
- return res
- })
- })
- }
- }
- // Use fallback strategy as default
+ // Fallback: try cache if network fails, but don't cache anything
setDefaultHandler(
new NetworkAndTryCache({ plugins: [dhis2ConnectionStatusPlugin] })
)
diff --git a/pwa/src/service-worker/utils.js b/pwa/src/service-worker/utils.js
index 4fd83b313..fa0a72335 100644
--- a/pwa/src/service-worker/utils.js
+++ b/pwa/src/service-worker/utils.js
@@ -11,13 +11,8 @@ const APP_ADAPTER_URL_PATTERNS = [
/\/api(\/\d+)?\/userSettings/, // useLocale
/\/api(\/\d+)?\/me\?fields=id$/, // useVerifyLatestUser
]
-// Note that the CRA precache manifest files start with './'
-// TODO: Make this extensible with a d2.config.js option
-export const CRA_MANIFEST_EXCLUDE_PATTERNS = [
- /^\.\/static\/js\/moment-locales\//,
-]
-// '[]' Fallback prevents error when switching from pwa enabled to disabled
+// '[]' Fallback prevents error when undefined
const APP_SHELL_URL_FILTER_PATTERNS = JSON.parse(
process.env
.REACT_APP_DHIS2_APP_PWA_CACHING_PATTERNS_TO_OMIT_FROM_APP_SHELL ||
diff --git a/shell/public/index.html b/shell/index.html
similarity index 64%
rename from shell/public/index.html
rename to shell/index.html
index 5eff6b809..dd10d7d18 100644
--- a/shell/public/index.html
+++ b/shell/index.html
@@ -10,6 +10,7 @@
+
- %REACT_APP_DHIS2_APP_NAME% | DHIS2
+ %DHIS2_APP_NAME% | DHIS2
+
+
+
+
+
+