diff --git a/docs/advanced/offline.md b/docs/advanced/offline.md
index 45d10ad5..69b73210 100644
--- a/docs/advanced/offline.md
+++ b/docs/advanced/offline.md
@@ -1,5 +1,141 @@
 # Offline tools
 
+The app platform provides some support for PWA features, including a `manifest.json` file for installability and service worker which can provide offline caching. In addition to those features, the app runtime provides support for "cacheable sections", which are sections of an app that can be individually cached on-demand. The [`useCacheableSection`](#usecacheablesection-api) hook and the [`CacheableSection`](#cacheablesection-api) component provide the controls for the section and the wrapper for the section, respectively. The [`useCachedSections`](#usecachedsections-api) hook returns a list of sections that are stored in the cache and a function that can delete them.
+
+There is also a [`useOnlineStatus`](#online-status) hook which returns the online or offline status of the client.
+
+To see a good example of these functions' APIs and their usage, see `SectionWrapper.js` in the [PWA example app](https://github.com/dhis2/app-platform/tree/master/examples/pwa-app/src/components/SectionWrapper.js) in the platform repository.
+
+## Cacheable sections
+
+> This feature can only be used when PWA is enabled in `d2.config.js`. See the [App Platform docs](https://platform.dhis2.nu/#/pwa/pwa) for more information.
+
+These features are supported by an `<OfflineProvider>` component which the app platform provides to the app.
+
+### How it works
+
+Cacheable sections enable sections of an app to be individually cached offline on demand. Using the `CacheableSection` wrapper and the `useCacheableSection` hook, when a user requests a section to be cached for offline use, the section's component tree will rerender, and the app's service worker will listen to all the network traffic for the component to cache it offline. To avoid caching that components' data before a user requests to do so, you can use the [URL filters feature](https://platform.dhis2.nu/#/pwa/pwa?id=opting-in) in `d2.config.js`.
+
+Note that, without using these features, an app using offline caching will cache all the data that is requested by user as they use the app without needing to use cacheable sections.
+
+Keep an eye out for this feature in use in the Dashboards app coming soon!
+
+### Usage
+
+Wrap the component to be cached in a `CacheableSection` hook, providing an `id` and `loadingMask` prop. The loading mask should block the screen from interaction, and it will be rendered while the component is in 'recording mode'. Note that the `useCacheableSection` hook _does not need to be used in the same component_ as the `<CacheableSection>`, they just need to use the same `id`. There is an example of this in the file linked below.
+
+Here is an example of the basic usage:
+
+```jsx
+import { CacheableSection, useCacheableSection } from '@dhis2/app-runtime'
+import { Button, Layer, CenteredContent, CircularLoader } from '@dhis2/ui'
+import { Dashboard } from './Dashboard'
+
+/** An example loading mask */
+const LoadingMask = () => (
+    <Layer translucent>
+        <CenteredContent>
+            <CircularLoader />
+        </CenteredContent>
+    </Layer>
+)
+
+export function CacheableSectionWrapper({ id }) {
+    const { startRecording, isCached, lastUpdated } = useCacheableSection(id)
+
+    return (
+        <div>
+            <p>{isCached ? `Last updated: ${lastUpdated}` : 'Not cached'}</p>
+            <Button onClick={startRecording}>
+            <CacheableSection id={id} loadingMask={<LoadingMask />}>
+                <Dashboard id={id} />
+            </CacheableSection>
+        </div>
+    )
+}
+```
+
+#### `CacheableSection` API
+
+| Prop          | Type      | Required? | Description                                                                                                                                                                                                 |
+| ------------- | --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`    | Component | Yes       | Section that will be cached upon recording                                                                                                                                                                  |
+| `id`          | String    | Yes       | ID of the section to be cached. Should match the ID used in the `useCacheableSection` hook.                                                                                                                 |
+| `loadingMask` | Component | Yes       | A UI mask that should block the screen from interaction. While the component is rerendering and recording, this mask will be rendered to block user interaction which may interfere with the recorded data. |
+
+#### `useCacheableSection` API
+
+```jsx
+import { useCacheableSections } from '@dhis2/app-runtime'
+
+function DemoComponent() {
+    const {
+        startRecording,
+        remove,
+        lastUpdated,
+        isCached,
+        recordingState,
+    } = useCacheableSection(id)
+}
+```
+
+`useCacheableSection` takes an `id` parameter (a string) and returns an object with the following properties:
+
+| Property         | Type     | Description                                                                                                                                                                                                                                                                                                 |
+| ---------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `startRecording` | Function | Initiates recording of a cacheable section's data for offline use. Causes a `<CacheableSection>` component with a matching ID to rerender with a loading mask based on the recording state to initiate the network requests. See the full API in the [`startRecording`](#startrecording-api) section below. |
+| `remove`         | Function | Removes this section from offline storage. Returns a promise that resolves to `true` if the section was successfully removed or `false` if that section was not found in offline storage.                                                                                                                   |
+| `lastUpdated`    | Date     | A timestamp of the last time this section was successfully recorded.                                                                                                                                                                                                                                        |
+| `isCached`       | Boolean  | `true` if this section is in offline storage; Provided for convenience.                                                                                                                                                                                                                                     |
+| `recordingState` | String   | One of `'default'`, `'pending'`, `'recording'`, or `'error'`. Under the hood, the `CacheableSection` component changes how its children are rendered based on the states. They are returned here in case an app wants to change UI or behavior based on the recording state.                                |
+
+#### `startRecording` API
+
+The `startRecording` function returned by `useCacheableSection` returns a promise that resolves if 'start recording' signal is sent successfully or rejects if there is an error with the offline interface initiating recording. It accepts an `options` parameter with the following optional properties:
+
+| Property                | Type     | Default | Description                                                                                                                                                                                                                                                                                                                                  |
+| ----------------------- | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onStarted`             | Function |         | A callback to be called once a recording has started and the service worker is listening to network requests. Receives no arguments                                                                                                                                                                                                          |
+| `onCompleted`           | Function |         | A callback to be called when the recording has completed successfully. Receives no arguments                                                                                                                                                                                                                                                 |
+| `onError`               | Function |         | A callback to be called in the case of an error during recording. Receives an `error` object as an argument                                                                                                                                                                                                                                  |
+| `recordingTimeoutDelay` | Number   | `1000`  | The time (in ms) to wait after all pending network requests have finished before stopping a recording. If a user's device is slow, and there might be long pauses between requests that are necessary for that section to run offline, this number may need to be increased from its default to prevent recording from stopping prematurely. |
+
+Example:
+
+```jsx
+import { useCacheableSection } from '@dhis2/app-runtime'
+import { Button } from '@dhis2/ui'
+
+function StartRecordingButton({ id }) {
+    const { startRecording } = useCacheableSection(id)
+
+    function handleStartRecording() {
+        startRecording({
+            onStarted: () => console.log('Recording started'),
+            onCompleted: () => console.log('Recording completed'),
+            onError: err => console.error(err),
+            recordingTimeoutDelay: 1000, // the default
+        })
+            .then(() => console.log('startRecording signal sent successfully'))
+            .catch(err =>
+                console.error(`Error when starting recording: ${err}`)
+            )
+    }
+
+    return <Button onClick={handleStartRecording}>Save offline</Button>
+}
+```
+
+#### `useCachedSections` API
+
+The `useCachedSections` hook returns a list of all the sections that are cached, which can be useful if an app needs to manage that whole list at once. It takes no arguments and it returns an object with the following properties:
+
+| Property             | Type     | Description                                                                                                                                                                                                                                                                               |
+| -------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cachedSections`     | Object   | An object of cached sections' statuses, where the keys are the section IDs and the values are objects with a `lastUpdated` property that holds a `Date` object reflecting the time this section was last updated.                                                                         |
+| `removeById`         | Function | Receives an `id` parameter and attempts to remove the section with that ID from the offline cache. If successful, updates the cached sections list. Returns a promise that resolves to `true` if that section is successfully removed or `false` if a section with that ID was not found. |
+| `syncCachedSections` | Function | Syncs the list of cached sections with the list in IndexedDB. Returns a promise. This is handled by the `removeById` function and is probably not necessary to use in most applications.                                                                                                  |
+
 ## Online status
 
 The `useOnlineStatus` returns the client's online or offline status. It debounces the values by default to prevent rapid changes of any UI elements that depend on the online status.
diff --git a/examples/cra/yarn.lock b/examples/cra/yarn.lock
index 49c81c49..e2c88e5f 100644
--- a/examples/cra/yarn.lock
+++ b/examples/cra/yarn.lock
@@ -1047,24 +1047,26 @@
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
 "@dhis2/app-runtime@file:../../runtime":
-  version "2.8.0"
+  version "2.10.0-pwa.4"
   dependencies:
-    "@dhis2/app-service-alerts" "2.8.0"
-    "@dhis2/app-service-config" "2.8.0"
-    "@dhis2/app-service-data" "2.8.0"
-    "@dhis2/app-service-offline" "2.8.0"
+    "@dhis2/app-service-alerts" "2.10.0-pwa.4"
+    "@dhis2/app-service-config" "2.10.0-pwa.4"
+    "@dhis2/app-service-data" "2.10.0-pwa.4"
+    "@dhis2/app-service-offline" "2.10.0-pwa.4"
 
-"@dhis2/app-service-alerts@2.8.0", "@dhis2/app-service-alerts@file:../../services/alerts":
-  version "2.8.0"
+"@dhis2/app-service-alerts@2.10.0-pwa.4", "@dhis2/app-service-alerts@file:../../services/alerts":
+  version "2.10.0-pwa.4"
 
-"@dhis2/app-service-config@2.8.0", "@dhis2/app-service-config@file:../../services/config":
-  version "2.8.0"
+"@dhis2/app-service-config@2.10.0-pwa.4", "@dhis2/app-service-config@file:../../services/config":
+  version "2.10.0-pwa.4"
 
-"@dhis2/app-service-data@2.8.0", "@dhis2/app-service-data@file:../../services/data":
-  version "2.8.0"
+"@dhis2/app-service-data@2.10.0-pwa.4", "@dhis2/app-service-data@file:../../services/data":
+  version "2.10.0-pwa.4"
 
-"@dhis2/app-service-offline@2.8.0", "@dhis2/app-service-offline@file:../../services/offline":
-  version "2.8.0"
+"@dhis2/app-service-offline@2.10.0-pwa.4", "@dhis2/app-service-offline@file:../../services/offline":
+  version "2.10.0-pwa.4"
+  dependencies:
+    lodash "^4.17.21"
 
 "@hapi/address@2.x.x":
   version "2.1.4"
@@ -6507,6 +6509,11 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loglevel@^1.6.6:
   version "1.6.8"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
diff --git a/examples/query-playground/yarn.lock b/examples/query-playground/yarn.lock
index b88df743..81a56e4f 100644
--- a/examples/query-playground/yarn.lock
+++ b/examples/query-playground/yarn.lock
@@ -1782,25 +1782,36 @@
   dependencies:
     moment "^2.24.0"
 
-"@dhis2/app-runtime@*", "@dhis2/app-runtime@^2.2.2", "@dhis2/app-runtime@file:../../runtime":
+"@dhis2/app-runtime@*":
   version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-2.8.0.tgz#83ca6e96c299686ee72eea3e1825e04aa53cd5d2"
+  integrity sha512-Ru6x9L61fD7ITzVaxFqx88kV5/ypB9xSr8nHgRj4EE/kHl/aVejXuwnSS2OIWh80J3mtD1dpNRN/GJ8o0x0HYg==
   dependencies:
     "@dhis2/app-service-alerts" "2.8.0"
     "@dhis2/app-service-config" "2.8.0"
     "@dhis2/app-service-data" "2.8.0"
-    "@dhis2/app-service-offline" "2.8.0"
 
-"@dhis2/app-service-alerts@2.8.0", "@dhis2/app-service-alerts@file:../../services/alerts":
-  version "2.8.0"
+"@dhis2/app-runtime@^2.2.2", "@dhis2/app-runtime@file:../../runtime":
+  version "2.10.0-pwa.4"
+  dependencies:
+    "@dhis2/app-service-alerts" "2.10.0-pwa.4"
+    "@dhis2/app-service-config" "2.10.0-pwa.4"
+    "@dhis2/app-service-data" "2.10.0-pwa.4"
+    "@dhis2/app-service-offline" "2.10.0-pwa.4"
 
-"@dhis2/app-service-config@2.8.0", "@dhis2/app-service-config@file:../../services/config":
-  version "2.8.0"
+"@dhis2/app-service-alerts@2.10.0-pwa.4", "@dhis2/app-service-alerts@2.8.0", "@dhis2/app-service-alerts@file:../../services/alerts":
+  version "2.10.0-pwa.4"
 
-"@dhis2/app-service-data@2.8.0", "@dhis2/app-service-data@file:../../services/data":
-  version "2.8.0"
+"@dhis2/app-service-config@2.10.0-pwa.4", "@dhis2/app-service-config@2.8.0", "@dhis2/app-service-config@file:../../services/config":
+  version "2.10.0-pwa.4"
 
-"@dhis2/app-service-offline@2.8.0", "@dhis2/app-service-offline@file:../../services/offline":
-  version "2.8.0"
+"@dhis2/app-service-data@2.10.0-pwa.4", "@dhis2/app-service-data@2.8.0", "@dhis2/app-service-data@file:../../services/data":
+  version "2.10.0-pwa.4"
+
+"@dhis2/app-service-offline@2.10.0-pwa.4", "@dhis2/app-service-offline@file:../../services/offline":
+  version "2.10.0-pwa.4"
+  dependencies:
+    lodash "^4.17.21"
 
 "@dhis2/app-shell@5.2.0":
   version "5.2.0"
@@ -8254,6 +8265,11 @@ lodash@^4.17.19:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loglevel@^1.6.6:
   version "1.6.7"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.7.tgz#b3e034233188c68b889f5b862415306f565e2c56"
diff --git a/package.json b/package.json
index 8555c584..73a31ade 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-    "version": "2.10.0",
+    "version": "2.10.0-pwa.4",
     "description": "A singular runtime dependency for applications on the DHIS2 platform",
     "repository": "https://github.com/dhis2/app-runtime.git",
     "author": "Austin McGee <austin@dhis2.org>",
@@ -57,5 +57,8 @@
             "name": "DHIS2 Application Runtime",
             "description": "A singular runtime dependency for applications on the [DHIS2 platform](https://platform.dhis2.nu)"
         }
+    },
+    "resolutions": {
+        "@dhis2/app-runtime": "2.10.0-pwa.4"
     }
 }
diff --git a/runtime/package.json b/runtime/package.json
index be1c2f24..090badb2 100644
--- a/runtime/package.json
+++ b/runtime/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@dhis2/app-runtime",
     "description": "A singular runtime dependency for applications on the DHIS2 platform",
-    "version": "2.10.0",
+    "version": "2.10.0-pwa.4",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "types": "./build/types/index.d.ts",
@@ -23,10 +23,10 @@
         "build/**"
     ],
     "dependencies": {
-        "@dhis2/app-service-alerts": "2.10.0",
-        "@dhis2/app-service-config": "2.10.0",
-        "@dhis2/app-service-data": "2.10.0",
-        "@dhis2/app-service-offline": "2.10.0"
+        "@dhis2/app-service-alerts": "2.10.0-pwa.4",
+        "@dhis2/app-service-config": "2.10.0-pwa.4",
+        "@dhis2/app-service-data": "2.10.0-pwa.4",
+        "@dhis2/app-service-offline": "2.10.0-pwa.4"
     },
     "peerDependencies": {
         "prop-types": "^15.7.2",
diff --git a/runtime/src/Provider.tsx b/runtime/src/Provider.tsx
index 4e2e2d82..19ad016d 100644
--- a/runtime/src/Provider.tsx
+++ b/runtime/src/Provider.tsx
@@ -2,16 +2,26 @@ import { AlertsProvider } from '@dhis2/app-service-alerts'
 import { ConfigProvider } from '@dhis2/app-service-config'
 import { Config } from '@dhis2/app-service-config/build/types/types'
 import { DataProvider } from '@dhis2/app-service-data'
+import { OfflineProvider } from '@dhis2/app-service-offline'
 import React from 'react'
 
 type ProviderInput = {
     config: Config
     children: React.ReactNode
+    offlineInterface?: any // temporary until offline service has types
 }
-export const Provider = ({ config, children }: ProviderInput) => (
+export const Provider = ({
+    config,
+    children,
+    offlineInterface,
+}: ProviderInput) => (
     <ConfigProvider config={config}>
         <AlertsProvider>
-            <DataProvider>{children}</DataProvider>
+            <DataProvider>
+                <OfflineProvider offlineInterface={offlineInterface}>
+                    {children}
+                </OfflineProvider>
+            </DataProvider>
         </AlertsProvider>
     </ConfigProvider>
 )
diff --git a/runtime/src/index.ts b/runtime/src/index.ts
index 1aaa87fd..341798b9 100644
--- a/runtime/src/index.ts
+++ b/runtime/src/index.ts
@@ -12,6 +12,11 @@ export { useConfig } from '@dhis2/app-service-config'
 
 export { useAlerts, useAlert } from '@dhis2/app-service-alerts'
 
-export { useOnlineStatus } from '@dhis2/app-service-offline'
+export {
+    useOnlineStatus,
+    useCacheableSection,
+    CacheableSection,
+    useCachedSections,
+} from '@dhis2/app-service-offline'
 
 export { Provider } from './Provider'
diff --git a/services/alerts/package.json b/services/alerts/package.json
index 34368bcb..3a332049 100644
--- a/services/alerts/package.json
+++ b/services/alerts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/app-service-alerts",
-    "version": "2.10.0",
+    "version": "2.10.0-pwa.4",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "types": "./build/types/index.d.ts",
diff --git a/services/config/package.json b/services/config/package.json
index f5949964..2b7789f4 100644
--- a/services/config/package.json
+++ b/services/config/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/app-service-config",
-    "version": "2.10.0",
+    "version": "2.10.0-pwa.4",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "types": "build/types/index.d.ts",
diff --git a/services/data/package.json b/services/data/package.json
index 7021d707..68592622 100644
--- a/services/data/package.json
+++ b/services/data/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/app-service-data",
-    "version": "2.10.0",
+    "version": "2.10.0-pwa.4",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "types": "build/types/index.d.ts",
@@ -22,7 +22,7 @@
         "build/**"
     ],
     "peerDependencies": {
-        "@dhis2/app-service-config": "2.10.0",
+        "@dhis2/app-service-config": "2.10.0-pwa.4",
         "prop-types": "^15.7.2",
         "react": "^16.8",
         "react-dom": "^16.8"
diff --git a/services/offline/package.json b/services/offline/package.json
index 7cca41b6..6796b08e 100644
--- a/services/offline/package.json
+++ b/services/offline/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@dhis2/app-service-offline",
     "description": "A runtime service for online/offline detection and offline caching",
-    "version": "2.10.0",
+    "version": "2.10.0-pwa.4",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "types": "build/types/index.d.ts",
@@ -33,7 +33,7 @@
         "coverage": "yarn test --coverage"
     },
     "peerDependencies": {
-        "@dhis2/app-service-alerts": "2.10.0",
+        "@dhis2/app-service-alerts": "^2.10.0-pwa.4",
         "prop-types": "^15.7.2",
         "react": "^16.8.6",
         "react-dom": "^16.8.6"
diff --git a/services/offline/src/__tests__/integration.test.tsx b/services/offline/src/__tests__/integration.test.tsx
new file mode 100644
index 00000000..cc7427af
--- /dev/null
+++ b/services/offline/src/__tests__/integration.test.tsx
@@ -0,0 +1,330 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import {
+    useCacheableSection,
+    CacheableSection,
+    CacheableSectionStartRecording,
+} from '../lib/cacheable-section'
+import { OfflineProvider } from '../lib/offline-provider'
+import { RenderCounter, resetRenderCounts } from '../utils/render-counter'
+import {
+    errorRecordingMock,
+    failedMessageRecordingMock,
+    mockOfflineInterface,
+} from '../utils/test-mocks'
+
+const renderCounts = {}
+
+const identity = (arg: any) => arg
+
+const TestControls = ({
+    id,
+    makeRecordingHandler = identity,
+}: {
+    id: string
+    makeRecordingHandler?: (cb?: any) => () => Promise<any>
+}) => {
+    const {
+        startRecording,
+        remove,
+        isCached,
+        lastUpdated,
+        recordingState,
+    } = useCacheableSection(id)
+
+    return (
+        <>
+            <RenderCounter id={`controls-rc-${id}`} countsObj={renderCounts} />
+            <button
+                data-testid={`start-recording-${id}`}
+                onClick={makeRecordingHandler(startRecording)}
+            />
+            <button
+                data-testid={`remove-${id}`}
+                onClick={() => {
+                    remove()
+                }}
+            />
+            <div data-testid={`is-cached-${id}`}>{isCached ? 'yes' : 'no'}</div>
+            <div data-testid={`last-updated-${id}`}>
+                {lastUpdated || 'never'}
+            </div>
+            <div data-testid={`recording-state-${id}`}>{recordingState}</div>
+        </>
+    )
+}
+
+const TestSection = ({
+    id,
+    children,
+}: {
+    id: string
+    children?: React.ReactNode
+}) => (
+    <CacheableSection
+        id={id}
+        loadingMask={<div data-testid={`loading-mask-${id}`} />}
+    >
+        <RenderCounter id={`section-rc-${id}`} countsObj={renderCounts} />
+        {children}
+    </CacheableSection>
+)
+
+const TestSingleSection = (props?: any) => {
+    // Props are spread so they can be overwritten
+    return (
+        <OfflineProvider offlineInterface={mockOfflineInterface} {...props}>
+            <TestControls id={'1'} {...props} />
+            <TestSection id={'1'} {...props} />
+        </OfflineProvider>
+    )
+}
+
+// Suppress 'act' warning for these tests
+const originalError = console.error
+beforeEach(() => {
+    // This is done before each because the 'recording error' test uses its own
+    // spy on console.error
+    jest.spyOn(console, 'error').mockImplementation((...args) => {
+        const pattern = /Warning: An update to .* inside a test was not wrapped in act/
+        if (typeof args[0] === 'string' && pattern.test(args[0])) {
+            return
+        }
+        return originalError.call(console, ...args)
+    })
+})
+
+afterEach(() => {
+    jest.clearAllMocks()
+    // This syntax appeases typescript:
+    ;(console.error as jest.Mock).mockRestore()
+    resetRenderCounts(renderCounts)
+})
+
+describe('Coordination between useCacheableSection and CacheableSection', () => {
+    it('renders in the default state initially', async () => {
+        render(<TestSingleSection />)
+
+        const { getByTestId } = screen
+        expect(getByTestId(/recording-state/)).toHaveTextContent('default')
+        expect(getByTestId(/is-cached/)).toHaveTextContent('no')
+        expect(getByTestId(/last-updated/)).toHaveTextContent('never')
+        expect(getByTestId(/section-rc/)).toBeInTheDocument()
+        expect(getByTestId(/controls-rc/)).toBeInTheDocument()
+    })
+
+    it('handles a successful recording', async done => {
+        const { getByTestId, queryByTestId } = screen
+
+        const onStarted = () => {
+            expect(getByTestId(/recording-state/)).toHaveTextContent(
+                'recording'
+            )
+            expect(getByTestId(/loading-mask/)).toBeInTheDocument()
+            expect(getByTestId(/section-rc/)).toBeInTheDocument()
+        }
+        const onCompleted = () => {
+            expect(getByTestId(/recording-state/)).toHaveTextContent('default')
+            expect(queryByTestId(/loading-mask/)).not.toBeInTheDocument()
+            done()
+        }
+        const recordingOptions = { onStarted, onCompleted }
+        const makeRecordingHandler = (
+            startRecording: CacheableSectionStartRecording
+        ) => {
+            return () => startRecording(recordingOptions)
+        }
+        render(
+            <TestSingleSection makeRecordingHandler={makeRecordingHandler} />
+        )
+
+        await act(async () => {
+            fireEvent.click(getByTestId(/start-recording/))
+        })
+
+        // At this stage, should be pending
+        expect(getByTestId(/recording-state/)).toHaveTextContent('pending')
+        expect(queryByTestId(/section-rc/)).not.toBeInTheDocument()
+        expect.assertions(7)
+    })
+
+    it('handles a recording that encounters an error', async done => {
+        // Suppress the expected error from console (in addition to 'act' warning)
+        jest.spyOn(console, 'error').mockImplementation((...args) => {
+            const actPattern = /Warning: An update to .* inside a test was not wrapped in act/
+            const errPattern = /Error during recording/
+            const matchesPattern =
+                actPattern.test(args[0]) || errPattern.test(args[0])
+            if (typeof args[0] === 'string' && matchesPattern) {
+                return
+            }
+            return originalError.call(console, ...args)
+        })
+        const { getByTestId, queryByTestId } = screen
+
+        const testOfflineInterface = {
+            ...mockOfflineInterface,
+            startRecording: errorRecordingMock,
+        }
+
+        const onError = () => {
+            expect(getByTestId(/recording-state/)).toHaveTextContent('error')
+            expect(queryByTestId(/loading-mask/)).not.toBeInTheDocument()
+            expect(getByTestId(/section-rc/)).toBeInTheDocument()
+            done()
+        }
+        const makeRecordingHandler = (
+            startRecording: CacheableSectionStartRecording
+        ) => {
+            return () => startRecording({ onError })
+        }
+        render(
+            <TestSingleSection
+                offlineInterface={testOfflineInterface}
+                makeRecordingHandler={makeRecordingHandler}
+            />
+        )
+
+        await act(async () => {
+            fireEvent.click(getByTestId(/start-recording/))
+        })
+
+        expect.assertions(3)
+    })
+
+    // ! After bumping testing-library versions, something about this test
+    // ! causes the following ones to mysteriously fail 😤
+    it.skip('handles an error starting the recording', async done => {
+        const { getByTestId } = screen
+        const testOfflineInterface = {
+            ...mockOfflineInterface,
+            startRecording: failedMessageRecordingMock,
+        }
+
+        const onStarted = jest.fn()
+
+        const testErrCondition = (err: Error) => {
+            expect(err.message).toBe('Failed message') // from the mock
+            expect(onStarted).not.toHaveBeenCalled()
+            expect(getByTestId(/recording-state/)).toHaveTextContent('default')
+            done()
+        }
+
+        const makeRecordingHandler = (
+            startRecording: CacheableSectionStartRecording
+        ) => {
+            return () => startRecording({ onStarted }).catch(testErrCondition)
+        }
+
+        render(
+            <TestSingleSection
+                offlineInterface={testOfflineInterface}
+                makeRecordingHandler={makeRecordingHandler}
+            />
+        )
+
+        await act(async () => {
+            fireEvent.click(getByTestId(/start-recording/))
+        })
+    })
+})
+
+const TwoTestSections = (props?: any) => (
+    // Props are spread so they can be overwritten (but only on one section)
+    <OfflineProvider offlineInterface={mockOfflineInterface} {...props}>
+        <TestControls id={'1'} {...props} />
+        <TestSection id={'1'} {...props} />
+        <TestControls id={'2'} />
+        <TestSection id={'2'} />
+    </OfflineProvider>
+)
+
+// test that other sections don't rerender when one section does
+describe('Performant state management', () => {
+    it('establishes a pre-recording render count', () => {
+        render(<TwoTestSections />)
+
+        const { getByTestId } = screen
+        // Two renders for controls: undefined and 'default' states
+        expect(getByTestId('controls-rc-1')).toHaveTextContent('2')
+        expect(getByTestId('controls-rc-2')).toHaveTextContent('2')
+        // Just one render for sections
+        expect(getByTestId('section-rc-1')).toHaveTextContent('1')
+        expect(getByTestId('section-rc-2')).toHaveTextContent('1')
+    })
+
+    it('isolates rerenders from other consumers', async done => {
+        const { getByTestId } = screen
+        // Make assertions
+        const onCompleted = () => {
+            // Before refactor: controls components have 6 renders EACH, and
+            // sections 1 and 2 have 2 and 1 renders, respectively
+            // After refactor, render counts for section that recorded:
+            expect(getByTestId('controls-rc-1')).toHaveTextContent('5')
+            expect(getByTestId('section-rc-1')).toHaveTextContent('2')
+            // Section that did not record (should be same as pre-recording):
+            expect(getByTestId('controls-rc-2')).toHaveTextContent('2')
+            expect(getByTestId('section-rc-2')).toHaveTextContent('1')
+            done()
+        }
+
+        const makeRecordingHandler = (
+            startRecording: CacheableSectionStartRecording
+        ) => () => startRecording({ onCompleted })
+        render(<TwoTestSections makeRecordingHandler={makeRecordingHandler} />)
+
+        await act(async () => {
+            fireEvent.click(getByTestId('start-recording-1'))
+        })
+
+        expect.assertions(4)
+    })
+})
+
+describe('useCacheableSection can be used inside a child of CacheableSection', () => {
+    const ChildTest = (props?: any) => {
+        // Props are spread so they can be overwritten
+        return (
+            <OfflineProvider offlineInterface={mockOfflineInterface} {...props}>
+                <TestSection id={'1'} {...props}>
+                    <TestControls id={'1'} {...props} />
+                </TestSection>
+            </OfflineProvider>
+        )
+    }
+
+    it('handles a successful recording', async done => {
+        const { getByTestId, queryByTestId } = screen
+
+        const onStarted = () => {
+            expect(getByTestId(/recording-state/)).toHaveTextContent(
+                'recording'
+            )
+            expect(getByTestId(/loading-mask/)).toBeInTheDocument()
+            expect(getByTestId(/section-rc/)).toBeInTheDocument()
+        }
+        const onCompleted = () => {
+            expect(getByTestId(/recording-state/)).toHaveTextContent('default')
+            expect(queryByTestId(/loading-mask/)).not.toBeInTheDocument()
+            done()
+        }
+        const recordingOptions = { onStarted, onCompleted }
+        const makeRecordingHandler = (
+            startRecording: CacheableSectionStartRecording
+        ) => {
+            return () => startRecording(recordingOptions)
+        }
+
+        render(<ChildTest makeRecordingHandler={makeRecordingHandler} />)
+
+        await act(async () => {
+            fireEvent.click(getByTestId(/start-recording/))
+        })
+
+        // At this stage, should be pending
+        // - In this test case, 'controls' should not be rendered
+        expect(queryByTestId(/recording-state/)).not.toBeInTheDocument()
+        expect(queryByTestId(/section-rc/)).not.toBeInTheDocument()
+        expect.assertions(7)
+    })
+})
diff --git a/services/offline/src/index.ts b/services/offline/src/index.ts
index 4a551e0e..81c89a4e 100644
--- a/services/offline/src/index.ts
+++ b/services/offline/src/index.ts
@@ -1 +1,4 @@
+export { OfflineProvider } from './lib/offline-provider'
+export { CacheableSection, useCacheableSection } from './lib/cacheable-section'
+export { useCachedSections } from './lib/cacheable-section-state'
 export { useOnlineStatus } from './lib/online-status'
diff --git a/services/offline/src/lib/__tests__/offline-provider.test.tsx b/services/offline/src/lib/__tests__/offline-provider.test.tsx
new file mode 100644
index 00000000..5e962a48
--- /dev/null
+++ b/services/offline/src/lib/__tests__/offline-provider.test.tsx
@@ -0,0 +1,128 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import React from 'react'
+import { mockOfflineInterface } from '../../utils/test-mocks'
+import { useCacheableSection, CacheableSection } from '../cacheable-section'
+import { useCachedSections } from '../cacheable-section-state'
+import { OfflineProvider } from '../offline-provider'
+
+// Suppress 'act' warning for these tests
+const originalError = console.error
+beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation((...args) => {
+        const pattern = /Warning: An update to .* inside a test was not wrapped in act/
+        if (typeof args[0] === 'string' && pattern.test(args[0])) {
+            return
+        }
+        return originalError.call(console, ...args)
+    })
+})
+
+afterEach(() => {
+    jest.clearAllMocks()
+    // syntax needed to appease typescript
+    ;(console.error as jest.Mock).mockRestore()
+})
+
+describe('Testing offline provider', () => {
+    it('Should render without failing', () => {
+        render(
+            <OfflineProvider offlineInterface={mockOfflineInterface}>
+                <div data-testid="test-div" />
+            </OfflineProvider>
+        )
+
+        expect(screen.getByTestId('test-div')).toBeInTheDocument()
+    })
+
+    it('Should initialize the offline interface with an update prompt', () => {
+        render(<OfflineProvider offlineInterface={mockOfflineInterface} />)
+
+        expect(mockOfflineInterface.init).toHaveBeenCalledTimes(1)
+
+        // Expect to have been called with a 'promptUpdate' function
+        const arg = mockOfflineInterface.init.mock.calls[0][0]
+        expect(arg).toHaveProperty('promptUpdate')
+        expect(typeof arg['promptUpdate']).toBe('function')
+    })
+
+    it('Should sync cached sections with indexedDB', async () => {
+        const testOfflineInterface = {
+            ...mockOfflineInterface,
+            getCachedSections: jest.fn().mockResolvedValue([
+                { sectionId: '1', lastUpdated: 'date1' },
+                { sectionId: '2', lastUpdated: 'date2' },
+            ]),
+        }
+
+        const CachedSections = () => {
+            const { cachedSections } = useCachedSections()
+            return (
+                <div data-testid="sections">
+                    {JSON.stringify(cachedSections)}
+                </div>
+            )
+        }
+
+        render(
+            <OfflineProvider offlineInterface={testOfflineInterface}>
+                <CachedSections />
+            </OfflineProvider>
+        )
+
+        const { getByTestId } = screen
+        expect(testOfflineInterface.getCachedSections).toHaveBeenCalled()
+        await waitFor(() => getByTestId('sections').textContent !== '{}')
+        const textContent = JSON.parse(
+            getByTestId('sections').textContent || ''
+        )
+        expect(textContent).toEqual({
+            1: { lastUpdated: 'date1' },
+            2: { lastUpdated: 'date2' },
+        })
+    })
+
+    it('Should provide the relevant contexts to consumers', () => {
+        const TestConsumer = () => {
+            useCacheableSection('id')
+
+            return (
+                <CacheableSection loadingMask={<div />} id={'id'}>
+                    <div data-testid="test-div" />
+                </CacheableSection>
+            )
+        }
+
+        render(
+            <OfflineProvider offlineInterface={mockOfflineInterface}>
+                <TestConsumer />
+            </OfflineProvider>
+        )
+
+        expect(screen.getByTestId('test-div')).toBeInTheDocument()
+    })
+
+    it('Should render without failing when no offlineInterface is provided', () => {
+        render(
+            <OfflineProvider>
+                <div data-testid="test-div" />
+            </OfflineProvider>
+        )
+        expect(screen.getByTestId('test-div')).toBeInTheDocument()
+    })
+
+    it('Should render without failing if PWA is not enabled', () => {
+        const testOfflineInterface = {
+            ...mockOfflineInterface,
+            pwaEnabled: false,
+        }
+        render(
+            <OfflineProvider offlineInterface={testOfflineInterface}>
+                <div data-testid="test-div" />
+            </OfflineProvider>
+        )
+
+        // Init should still be called - see comments in offline-provider.js
+        expect(testOfflineInterface.init).toHaveBeenCalled()
+        expect(screen.getByTestId('test-div')).toBeInTheDocument()
+    })
+})
diff --git a/services/offline/src/lib/__tests__/use-cacheable-section.test.tsx b/services/offline/src/lib/__tests__/use-cacheable-section.test.tsx
new file mode 100644
index 00000000..e38219dc
--- /dev/null
+++ b/services/offline/src/lib/__tests__/use-cacheable-section.test.tsx
@@ -0,0 +1,249 @@
+/* eslint-disable react/display-name, react/prop-types */
+
+import { renderHook, act } from '@testing-library/react-hooks'
+import React from 'react'
+import {
+    errorRecordingMock,
+    failedMessageRecordingMock,
+    mockOfflineInterface,
+} from '../../utils/test-mocks'
+import { useCacheableSection } from '../cacheable-section'
+import { OfflineProvider } from '../offline-provider'
+
+// Suppress 'act' warning for these tests
+const originalError = console.error
+beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation((...args) => {
+        const pattern = /Warning: An update to .* inside a test was not wrapped in act/
+        if (typeof args[0] === 'string' && pattern.test(args[0])) {
+            return
+        }
+        return originalError.call(console, ...args)
+    })
+})
+
+afterEach(() => {
+    jest.clearAllMocks()
+    // This syntax appeases typescript:
+    ;(console.error as jest.Mock).mockRestore()
+})
+
+it('renders in the default state initially', () => {
+    const { result } = renderHook(() => useCacheableSection('one'), {
+        wrapper: ({ children }) => (
+            <OfflineProvider offlineInterface={mockOfflineInterface}>
+                {children}
+            </OfflineProvider>
+        ),
+    })
+
+    expect(result.current.recordingState).toBe('default')
+    expect(result.current.isCached).toBe(false)
+    expect(result.current.lastUpdated).toBeUndefined()
+})
+
+it('handles a successful recording', async done => {
+    const [sectionId, timeoutDelay] = ['one', 1234]
+    const testOfflineInterface = {
+        ...mockOfflineInterface,
+        getCachedSections: jest
+            .fn()
+            .mockResolvedValueOnce([])
+            .mockResolvedValueOnce([
+                { sectionId: sectionId, lastUpdated: new Date() },
+            ]),
+    }
+    const { result, waitFor } = renderHook(
+        () => useCacheableSection(sectionId),
+        {
+            wrapper: ({ children }) => (
+                <OfflineProvider offlineInterface={testOfflineInterface}>
+                    {children}
+                </OfflineProvider>
+            ),
+        }
+    )
+
+    const assertRecordingStarted = () => {
+        expect(result.current.recordingState).toBe('recording')
+    }
+    const assertRecordingCompleted = async () => {
+        expect(result.current.recordingState).toBe('default')
+
+        // Test that 'isCached' gets updated
+        expect(testOfflineInterface.getCachedSections).toBeCalledTimes(2)
+        await waitFor(() => result.current.isCached === true)
+        expect(result.current.isCached).toBe(true)
+        expect(result.current.lastUpdated).toBeInstanceOf(Date)
+
+        // If this cb is not called, test should time out and fail
+        done()
+    }
+
+    await act(async () => {
+        await result.current.startRecording({
+            onStarted: assertRecordingStarted,
+            onCompleted: assertRecordingCompleted,
+            recordingTimeoutDelay: timeoutDelay,
+        })
+    })
+
+    // At this stage, recording should be 'pending'
+    expect(result.current.recordingState).toBe('pending')
+
+    // Check correct options sent to offline interface
+    const options = mockOfflineInterface.startRecording.mock.calls[0][0]
+    expect(options.sectionId).toBe(sectionId)
+    expect(options.recordingTimeoutDelay).toBe(timeoutDelay)
+    expect(typeof options.onStarted).toBe('function')
+    expect(typeof options.onCompleted).toBe('function')
+    expect(typeof options.onError).toBe('function')
+
+    // Make sure all async assertions are called
+    expect.assertions(11)
+})
+
+it('handles a recording that encounters an error', async done => {
+    // Suppress the expected error from console (in addition to 'act' warning)
+    jest.spyOn(console, 'error').mockImplementation((...args) => {
+        const actPattern = /Warning: An update to .* inside a test was not wrapped in act/
+        const errPattern = /Error during recording/
+        const matchesPattern =
+            actPattern.test(args[0]) || errPattern.test(args[0])
+        if (typeof args[0] === 'string' && matchesPattern) {
+            return
+        }
+        return originalError.call(console, ...args)
+    })
+    const testOfflineInterface = {
+        ...mockOfflineInterface,
+        startRecording: errorRecordingMock,
+    }
+    const { result } = renderHook(() => useCacheableSection('one'), {
+        wrapper: ({ children }) => (
+            <OfflineProvider offlineInterface={testOfflineInterface}>
+                {children}
+            </OfflineProvider>
+        ),
+    })
+
+    const assertRecordingStarted = () => {
+        expect(result.current.recordingState).toBe('recording')
+    }
+    const assertRecordingError = (error: Error) => {
+        expect(result.current.recordingState).toBe('error')
+        expect(error.message).toMatch(/test err/) // see errorRecordingMock
+        expect(console.error).toHaveBeenCalledWith(
+            'Error during recording:',
+            error
+        )
+
+        // Expect only one call, from initialization:
+        expect(mockOfflineInterface.getCachedSections).toBeCalledTimes(1)
+
+        // If this cb is not called, test should time out and fail
+        done()
+    }
+
+    await act(async () => {
+        await result.current.startRecording({
+            onStarted: assertRecordingStarted,
+            onError: assertRecordingError,
+        })
+    })
+
+    // At this stage, recording should be 'pending'
+    expect(result.current.recordingState).toBe('pending')
+
+    // Make sure all async assertions are called
+    expect.assertions(6)
+})
+
+it('handles an error starting the recording', async () => {
+    const testOfflineInterface = {
+        ...mockOfflineInterface,
+        startRecording: failedMessageRecordingMock,
+    }
+    const { result } = renderHook(() => useCacheableSection('err'), {
+        wrapper: ({ children }) => (
+            <OfflineProvider offlineInterface={testOfflineInterface}>
+                {children}
+            </OfflineProvider>
+        ),
+    })
+
+    await expect(result.current.startRecording()).rejects.toThrow(
+        'Failed message' // from failedMessageRecordingMock
+    )
+})
+
+it('handles remove and updates sections', async () => {
+    const sectionId = 'one'
+    const testOfflineInterface = {
+        ...mockOfflineInterface,
+        getCachedSections: jest
+            .fn()
+            .mockResolvedValueOnce([
+                { sectionId: sectionId, lastUpdated: new Date() },
+            ])
+            .mockResolvedValueOnce([]),
+    }
+    const { result, waitFor } = renderHook(
+        () => useCacheableSection(sectionId),
+        {
+            wrapper: ({ children }) => (
+                <OfflineProvider offlineInterface={testOfflineInterface}>
+                    {children}
+                </OfflineProvider>
+            ),
+        }
+    )
+
+    // Wait for state to sync with indexedDB
+    await waitFor(() => result.current.isCached === true)
+
+    let success
+    await act(async () => {
+        success = await result.current.remove()
+    })
+
+    expect(success).toBe(true)
+    // Test that 'isCached' gets updated
+    expect(testOfflineInterface.getCachedSections).toBeCalledTimes(2)
+    await waitFor(() => result.current.isCached === false)
+    expect(result.current.isCached).toBe(false)
+    expect(result.current.lastUpdated).toBeUndefined()
+})
+
+it('handles a change in ID', async () => {
+    const testOfflineInterface = {
+        ...mockOfflineInterface,
+        getCachedSections: jest
+            .fn()
+            .mockResolvedValue([
+                { sectionId: 'id-one', lastUpdated: new Date() },
+            ]),
+    }
+    const { result, waitFor, rerender } = renderHook(
+        (...args) => useCacheableSection(...args),
+        {
+            wrapper: ({ children }) => (
+                <OfflineProvider offlineInterface={testOfflineInterface}>
+                    {children}
+                </OfflineProvider>
+            ),
+            initialProps: 'id-one',
+        }
+    )
+
+    // Wait for state to sync with indexedDB
+    await waitFor(() => result.current.isCached === true)
+
+    rerender('id-two')
+
+    // Test that 'isCached' gets updated
+    // expect(testOfflineInterface.getCachedSections).toBeCalledTimes(2)
+    await waitFor(() => result.current.isCached === false)
+    expect(result.current.isCached).toBe(false)
+    expect(result.current.lastUpdated).toBeUndefined()
+})
diff --git a/services/offline/src/lib/cacheable-section-state.tsx b/services/offline/src/lib/cacheable-section-state.tsx
new file mode 100644
index 00000000..bdd15880
--- /dev/null
+++ b/services/offline/src/lib/cacheable-section-state.tsx
@@ -0,0 +1,225 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+    GlobalStateStore,
+    IndexedDBCachedSection,
+    RecordingState,
+} from '../types'
+import {
+    createStore,
+    useGlobalState,
+    useGlobalStateMutation,
+    GlobalStateProvider,
+} from './global-state-service'
+import { useOfflineInterface } from './offline-interface'
+
+// Functions in here use the global state service to manage cacheable section
+// state in a performant way
+
+interface CachedSectionsById {
+    [index: string]: { lastUpdated: Date }
+}
+
+/**
+ * Helper that transforms an array of cached section objects from the IndexedDB
+ * into an object of values keyed by section ID
+ *
+ * @param {Array} list - An array of section objects
+ * @returns {Object} An object of sections, keyed by ID
+ */
+function getSectionsById(
+    sectionsArray: IndexedDBCachedSection[]
+): CachedSectionsById {
+    return sectionsArray.reduce(
+        (result, { sectionId, lastUpdated }) => ({
+            ...result,
+            [sectionId]: { lastUpdated },
+        }),
+        {}
+    )
+}
+
+/**
+ * Create a store for Cacheable Section state.
+ * Expected to be used in app adapter
+ */
+export function createCacheableSectionStore(): GlobalStateStore {
+    const initialState = { recordingStates: {}, cachedSections: {} }
+    return createStore(initialState)
+}
+
+/**
+ * Helper hook that returns a value that will persist between renders but makes
+ * sure to only set its initial state once.
+ * See https://gist.github.com/amcgee/42bb2fa6d5f79e607f00e6dccc733482
+ */
+function useConst<Type>(factory: () => Type): Type {
+    const ref = React.useRef<Type | null>(null)
+    if (ref.current === null) {
+        ref.current = factory()
+    }
+    return ref.current
+}
+
+/**
+ * Provides context for a global state context which will track cached
+ * sections' status and cacheable sections' recording states, which will
+ * determine how that component will render. The provider will be a part of
+ * the OfflineProvider.
+ */
+export function CacheableSectionProvider({
+    children,
+}: {
+    children: React.ReactNode
+}): JSX.Element {
+    const offlineInterface = useOfflineInterface()
+    const store = useConst(createCacheableSectionStore)
+
+    // On load, get sections and add to store
+    React.useEffect(() => {
+        if (offlineInterface) {
+            offlineInterface.getCachedSections().then(sections => {
+                store.mutate(state => ({
+                    ...state,
+                    cachedSections: getSectionsById(sections),
+                }))
+            })
+        }
+    }, [store, offlineInterface])
+
+    return <GlobalStateProvider store={store}>{children}</GlobalStateProvider>
+}
+CacheableSectionProvider.propTypes = {
+    children: PropTypes.node,
+}
+
+interface RecordingStateControls {
+    recordingState: RecordingState
+    setRecordingState: (newState: RecordingState) => void
+    removeRecordingState: () => void
+}
+
+/**
+ * Uses an optimized global state to manage 'recording state' values without
+ * unnecessarily rerendering all consuming components
+ *
+ * @param {String} id - ID of the cacheable section to track
+ * @returns {Object} { recordingState: String, setRecordingState: Function, removeRecordingState: Function}
+ */
+export function useRecordingState(id: string): RecordingStateControls {
+    const [recordingState] = useGlobalState(state => state.recordingStates[id])
+    const setRecordingState = useGlobalStateMutation(newState => state => ({
+        ...state,
+        recordingStates: { ...state.recordingStates, [id]: newState },
+    }))
+    const removeRecordingState = useGlobalStateMutation(() => state => {
+        const recordingStates = { ...state.recordingStates }
+        delete recordingStates[id]
+        return { ...state, recordingStates }
+    })
+
+    return { recordingState, setRecordingState, removeRecordingState }
+}
+
+/**
+ * Returns a function that syncs cached sections in the global state
+ * with IndexedDB, so that IndexedDB is the single source of truth
+ *
+ * @returns {Function} syncCachedSections
+ */
+function useSyncCachedSections() {
+    const offlineInterface = useOfflineInterface()
+    const setCachedSections = useGlobalStateMutation(
+        cachedSections => state => ({
+            ...state,
+            cachedSections,
+        })
+    )
+
+    return async function syncCachedSections() {
+        const sections = await offlineInterface.getCachedSections()
+        setCachedSections(getSectionsById(sections))
+    }
+}
+
+interface CachedSectionsControls {
+    cachedSections: CachedSectionsById
+    removeById: (id: string) => Promise<boolean>
+    syncCachedSections: () => Promise<void>
+}
+
+/**
+ * Uses global state to manage an object of cached sections' statuses
+ *
+ * @returns {Object} { cachedSections: Object, removeSection: Function }
+ */
+export function useCachedSections(): CachedSectionsControls {
+    const [cachedSections] = useGlobalState(state => state.cachedSections)
+    const syncCachedSections = useSyncCachedSections()
+    const offlineInterface = useOfflineInterface()
+
+    /**
+     * Uses offline interface to remove a section from IndexedDB and Cache
+     * Storage.
+     *
+     * Returns a promise that resolves to `true` if a section is found and
+     * deleted, or `false` if asection with the specified ID does not exist.
+     */
+    async function removeById(id: string) {
+        const success = await offlineInterface.removeSection(id)
+        if (success) {
+            await syncCachedSections()
+        }
+        return success
+    }
+
+    return {
+        cachedSections,
+        removeById,
+        syncCachedSections,
+    }
+}
+
+interface CachedSectionControls {
+    lastUpdated: Date
+    isCached: boolean
+    remove: () => Promise<boolean>
+    syncCachedSections: () => Promise<void>
+}
+
+/**
+ * Uses global state to manage the cached status of just one section, which
+ * prevents unnecessary rerenders of consuming components
+ *
+ * @param {String} id
+ * @returns {Object} { lastUpdated: Date, remove: Function }
+ */
+export function useCachedSection(id: string): CachedSectionControls {
+    const [status] = useGlobalState(state => state.cachedSections[id])
+    const syncCachedSections = useSyncCachedSections()
+    const offlineInterface = useOfflineInterface()
+
+    const lastUpdated = status && status.lastUpdated
+
+    /**
+     * Uses offline interface to remove a section from IndexedDB and Cache
+     * Storage.
+     *
+     * Returns `true` if a section is found and deleted, or `false` if a
+     * section with the specified ID does not exist.
+     */
+    async function remove() {
+        const success = await offlineInterface.removeSection(id)
+        if (success) {
+            await syncCachedSections()
+        }
+        return success
+    }
+
+    return {
+        lastUpdated,
+        isCached: !!lastUpdated,
+        remove,
+        syncCachedSections,
+    }
+}
diff --git a/services/offline/src/lib/cacheable-section.tsx b/services/offline/src/lib/cacheable-section.tsx
new file mode 100644
index 00000000..530959c0
--- /dev/null
+++ b/services/offline/src/lib/cacheable-section.tsx
@@ -0,0 +1,175 @@
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
+import { RecordingState } from '../types'
+import { useRecordingState, useCachedSection } from './cacheable-section-state'
+import { useOfflineInterface } from './offline-interface'
+
+const recordingStates: { [index: string]: RecordingState } = {
+    default: 'default',
+    pending: 'pending',
+    recording: 'recording',
+    error: 'error',
+}
+
+interface CacheableSectionStartRecordingOptions {
+    recordingTimeoutDelay?: number
+    onStarted?: () => void
+    onCompleted?: () => void
+    onError?: (err: Error) => void
+}
+
+export type CacheableSectionStartRecording = (
+    options?: CacheableSectionStartRecordingOptions
+) => Promise<any>
+
+interface CacheableSectionControls {
+    recordingState: RecordingState
+    startRecording: CacheableSectionStartRecording
+    lastUpdated: Date | undefined
+    isCached: boolean
+    remove: () => Promise<boolean>
+}
+
+/**
+ * Returns the main controls for a cacheable section and manages recording
+ * state, which affects the render state of the CacheableSection component.
+ * Also returns the cached status of the section, which come straight from
+ * the `useCachedSection` hook.
+ *
+ * @param {String} id
+ * @returns {Object}
+ */
+export function useCacheableSection(id: string): CacheableSectionControls {
+    const offlineInterface = useOfflineInterface()
+    const {
+        isCached,
+        lastUpdated,
+        remove,
+        syncCachedSections,
+    } = useCachedSection(id)
+    const {
+        recordingState,
+        setRecordingState,
+        removeRecordingState,
+    } = useRecordingState(id)
+
+    useEffect(() => {
+        // On mount, add recording state for this ID to context if needed
+        if (!recordingState) {
+            setRecordingState(recordingStates.default)
+        }
+        // On unnmount, remove recording state if not recording
+        return () => {
+            if (
+                recordingState &&
+                recordingState !== recordingStates.recording &&
+                recordingState !== recordingStates.pending
+            ) {
+                removeRecordingState()
+            }
+        }
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+    function startRecording({
+        recordingTimeoutDelay = 1000,
+        onStarted,
+        onCompleted,
+        onError,
+    }: CacheableSectionStartRecordingOptions = {}) {
+        // This promise resolving means that the message to the service worker
+        // to start recording was successful. Waiting for resolution prevents
+        // unnecessarily rerendering the whole component in case of an error
+        return offlineInterface
+            .startRecording({
+                sectionId: id,
+                recordingTimeoutDelay,
+                onStarted: () => {
+                    onRecordingStarted()
+                    onStarted && onStarted()
+                },
+                onCompleted: () => {
+                    onRecordingCompleted()
+                    onCompleted && onCompleted()
+                },
+                onError: error => {
+                    onRecordingError(error)
+                    onError && onError(error)
+                },
+            })
+            .then(() => setRecordingState(recordingStates.pending))
+    }
+
+    function onRecordingStarted() {
+        setRecordingState(recordingStates.recording)
+    }
+
+    function onRecordingCompleted() {
+        setRecordingState(recordingStates.default)
+        syncCachedSections()
+    }
+
+    function onRecordingError(error: Error) {
+        console.error('Error during recording:', error)
+        setRecordingState(recordingStates.error)
+    }
+
+    // isCached, lastUpdated, remove: _could_ be accessed by useCachedSection,
+    // but provided through this hook for convenience
+    return {
+        recordingState,
+        startRecording,
+        lastUpdated,
+        isCached,
+        remove,
+    }
+}
+
+interface CacheableSectionProps {
+    id: string
+    loadingMask: JSX.Element
+    children: React.ReactNode
+}
+
+/**
+ * Used to wrap the relevant component to be recorded and saved offline.
+ * Depending on the recording state of the section, this wrapper will
+ * render its children, not render its children while recording is pending,
+ * or RErerender the chilren to force data fetching to record by the service
+ * worker.
+ *
+ * During recording, a loading mask provided by props is also rendered that is
+ * intended to prevent other interaction with the app that might interfere
+ * with the recording process.
+ */
+export function CacheableSection({
+    id,
+    loadingMask,
+    children,
+}: CacheableSectionProps): JSX.Element {
+    // Accesses recording state that useCacheableSection controls
+    const { recordingState } = useRecordingState(id)
+
+    // The following causes the component to reload in the event of a recording
+    // error; the state will be cleared next time recording moves to pending.
+    // It fixes a component getting stuck while rendered without data after
+    // failing a recording while offline.
+    // Errors can be handled in the `onError` callback to `startRecording`.
+    if (recordingState === recordingStates.error) {
+        return <>{children}</>
+    }
+
+    // Handling rendering with the following conditions prevents an unncessary
+    // rerender after successful recording
+    return (
+        <>
+            {recordingState === recordingStates.recording && loadingMask}
+            {recordingState !== recordingStates.pending && children}
+        </>
+    )
+}
+
+CacheableSection.propTypes = {
+    id: PropTypes.string.isRequired,
+    children: PropTypes.node,
+    loadingMask: PropTypes.node,
+}
diff --git a/services/offline/src/lib/global-state-service.tsx b/services/offline/src/lib/global-state-service.tsx
new file mode 100644
index 00000000..57181a5d
--- /dev/null
+++ b/services/offline/src/lib/global-state-service.tsx
@@ -0,0 +1,96 @@
+import isEqual from 'lodash/isEqual'
+import PropTypes from 'prop-types'
+import React, { useEffect, useCallback, useContext, useState } from 'react'
+import {
+    GlobalStateStore,
+    GlobalStateStoreMutateMethod,
+    GlobalStateMutation,
+    GlobalStateStoreMutationCreator,
+} from '../types'
+
+// This file creates a redux-like state management service using React context
+// that minimizes unnecessary rerenders that consume the context.
+// See more at https://github.com/amcgee/state-service-poc
+
+const identity = (state: any) => state
+
+export const createStore = (initialState = {}): GlobalStateStore => {
+    const subscriptions: Set<(state: any) => void> = new Set()
+    let state = initialState
+
+    return {
+        getState: () => state,
+        subscribe: callback => {
+            subscriptions.add(callback)
+        },
+        unsubscribe: callback => {
+            subscriptions.delete(callback)
+        },
+        mutate: mutation => {
+            state = mutation(state)
+            for (const callback of subscriptions) {
+                callback(state)
+            }
+        },
+    }
+}
+
+const GlobalStateContext = React.createContext(createStore())
+const useGlobalStateStore = () => useContext(GlobalStateContext)
+
+export const GlobalStateProvider = ({
+    store,
+    children,
+}: {
+    store: GlobalStateStore
+    children: React.ReactNode
+}): JSX.Element => (
+    <GlobalStateContext.Provider value={store}>
+        {children}
+    </GlobalStateContext.Provider>
+)
+GlobalStateProvider.propTypes = {
+    children: PropTypes.node,
+    store: PropTypes.shape({}),
+}
+
+export const useGlobalState = (
+    selector = identity
+): [any, GlobalStateStoreMutateMethod] => {
+    const store = useGlobalStateStore()
+    const [selectedState, setSelectedState] = useState(
+        selector(store.getState())
+    )
+
+    useEffect(() => {
+        // NEW: deep equality check before updating
+        const callback = (state: any) => {
+            const newSelectedState = selector(state)
+            // Second condition handles case where a selected object gets
+            // deleted, but state does not update
+            if (
+                !isEqual(selectedState, newSelectedState) ||
+                selectedState === undefined
+            )
+                setSelectedState(newSelectedState)
+        }
+        store.subscribe(callback)
+        // Make sure to update state when selector changes
+        callback(store.getState())
+        return () => store.unsubscribe(callback)
+    }, [store, selector]) /* eslint-disable-line react-hooks/exhaustive-deps */
+
+    return [selectedState, store.mutate]
+}
+
+export function useGlobalStateMutation<Type>(
+    mutationCreator: GlobalStateStoreMutationCreator<Type>
+): GlobalStateMutation<Type> {
+    const store = useGlobalStateStore()
+    return useCallback(
+        (...args) => {
+            store.mutate(mutationCreator(...args))
+        },
+        [mutationCreator, store]
+    )
+}
diff --git a/services/offline/src/lib/offline-interface.tsx b/services/offline/src/lib/offline-interface.tsx
new file mode 100644
index 00000000..147154dc
--- /dev/null
+++ b/services/offline/src/lib/offline-interface.tsx
@@ -0,0 +1,71 @@
+import { useAlert } from '@dhis2/app-service-alerts'
+import PropTypes from 'prop-types'
+import React, { createContext, useContext } from 'react'
+import { OfflineInterface } from '../types'
+
+// This is to prevent 'offlineInterface could be null' type-checking errors
+const noopOfflineInterface: OfflineInterface = {
+    pwaEnabled: false,
+    init: () => () => null,
+    startRecording: async () => undefined,
+    getCachedSections: async () => [],
+    removeSection: async () => false,
+}
+
+const OfflineInterfaceContext = createContext<OfflineInterface>(
+    noopOfflineInterface
+)
+
+interface OfflineInterfaceProviderInput {
+    offlineInterface: OfflineInterface
+    children: React.ReactNode
+}
+
+/**
+ * Receives an OfflineInterface instance as a prop (presumably from the app
+ * adapter) and provides it as context for other offline tools.
+ *
+ * On mount, it initializes the offline interface, which (among other things)
+ * checks for service worker updates and, if updates are ready, prompts the
+ * user with an alert to skip waiting and reload the page to use new content.
+ */
+export function OfflineInterfaceProvider({
+    offlineInterface,
+    children,
+}: OfflineInterfaceProviderInput): JSX.Element {
+    const { show } = useAlert(
+        ({ message }) => message,
+        ({ action, onConfirm }) => ({
+            actions: [{ label: action, onClick: onConfirm }],
+            permanent: true,
+        })
+    )
+
+    React.useEffect(() => {
+        // Init returns a tear-down function
+        return offlineInterface.init({ promptUpdate: show })
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <OfflineInterfaceContext.Provider value={offlineInterface}>
+            {children}
+        </OfflineInterfaceContext.Provider>
+    )
+}
+
+OfflineInterfaceProvider.propTypes = {
+    children: PropTypes.node,
+    offlineInterface: PropTypes.shape({ init: PropTypes.func }),
+}
+
+export function useOfflineInterface(): OfflineInterface {
+    const offlineInterface = useContext(OfflineInterfaceContext)
+
+    if (offlineInterface === undefined) {
+        throw new Error(
+            'Offline interface context not found. If this app is using the app platform, make sure `pwa: { enabled: true }` is in d2.config.js. If this is not a platform app, make sure your app is wrapped with an app-runtime <Provider> or an <OfflineProvider> from app-service-offline.'
+        )
+    }
+
+    return offlineInterface
+}
diff --git a/services/offline/src/lib/offline-provider.tsx b/services/offline/src/lib/offline-provider.tsx
new file mode 100644
index 00000000..7b3d9bbb
--- /dev/null
+++ b/services/offline/src/lib/offline-provider.tsx
@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { OfflineInterface } from '../types'
+import { CacheableSectionProvider } from './cacheable-section-state'
+import { OfflineInterfaceProvider } from './offline-interface'
+
+interface OfflineProviderInput {
+    offlineInterface?: OfflineInterface
+    children?: React.ReactNode
+}
+
+/** A context provider for all the relevant offline contexts */
+export function OfflineProvider({
+    offlineInterface,
+    children,
+}: OfflineProviderInput): JSX.Element {
+    // If an offline interface is not provided, or if one is provided and PWA
+    // is not enabled, skip adding context providers
+    if (!offlineInterface) {
+        return <>{children}</>
+    }
+
+    // If PWA is not enabled, just init interface to make sure new SW gets
+    // activated with code that unregisters SW. Not technically necessary if a
+    // killswitch SW takes over, but the killswitch may not always be in use.
+    // Then, skip adding any context
+    if (!offlineInterface.pwaEnabled) {
+        offlineInterface.init({ promptUpdate: ({ onConfirm }) => onConfirm() })
+        return <>{children}</>
+    }
+
+    return (
+        <OfflineInterfaceProvider offlineInterface={offlineInterface}>
+            <CacheableSectionProvider>{children}</CacheableSectionProvider>
+        </OfflineInterfaceProvider>
+    )
+}
+
+OfflineProvider.propTypes = {
+    children: PropTypes.node,
+    offlineInterface: PropTypes.shape({
+        init: PropTypes.func,
+        pwaEnabled: PropTypes.bool,
+    }),
+}
diff --git a/services/offline/src/types.ts b/services/offline/src/types.ts
index 65b3dba3..92a3a010 100644
--- a/services/offline/src/types.ts
+++ b/services/offline/src/types.ts
@@ -1 +1,65 @@
-// todo
+// Cacheable Section types
+
+export type RecordingState = 'default' | 'pending' | 'error' | 'recording'
+
+// Global state types
+
+// This is the mutation that gets executed by store.mutate. Should return
+// new state
+export interface GlobalStateStoreMutation {
+    (state: any): any
+}
+
+// Uses generic <Type> because global state mutation will also receive
+// the same parameters
+export interface GlobalStateStoreMutationCreator<Type> {
+    (...args: Type[]): GlobalStateStoreMutation
+}
+
+// This is the function returned by useGlobalStateMutation;
+// it triggers a GlobalStateStoreMutation
+export interface GlobalStateMutation<Type> {
+    (...args: Type[]): void
+}
+
+export interface GlobalStateStoreMutateMethod {
+    (mutation: GlobalStateStoreMutation): void
+}
+
+export interface GlobalStateStore {
+    getState: () => any
+    subscribe: (callback: (state: any) => void) => void
+    unsubscribe: (callback: (state: any) => void) => void
+    mutate: GlobalStateStoreMutateMethod
+}
+
+// Offline Interface types
+
+interface PromptUpdate {
+    (params: { message: string; action: string; onConfirm: () => void }): void
+}
+
+interface StartRecording {
+    (params: {
+        sectionId: string
+        recordingTimeoutDelay: number
+        onStarted: () => void
+        onCompleted: () => void
+        onError: (err: Error) => void
+    }): Promise<undefined>
+}
+
+export interface IndexedDBCachedSection {
+    sectionId: string
+    lastUpdated: Date
+    // this may change in the future:
+    requests: number
+}
+
+export interface OfflineInterface {
+    readonly pwaEnabled: boolean
+    init: (params: { promptUpdate: PromptUpdate }) => () => void
+    startRecording: StartRecording
+    getCachedSections: () => Promise<IndexedDBCachedSection[]>
+    removeSection: (id: string) => Promise<boolean>
+}
diff --git a/services/offline/src/utils/__tests__/render-counter.test.tsx b/services/offline/src/utils/__tests__/render-counter.test.tsx
new file mode 100644
index 00000000..de0bb3a1
--- /dev/null
+++ b/services/offline/src/utils/__tests__/render-counter.test.tsx
@@ -0,0 +1,45 @@
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import { RenderCounter, resetRenderCounts } from '../render-counter'
+
+const renderCounts = {}
+
+export const Rerenderer = (): JSX.Element => {
+    const [, setState] = React.useState(true)
+    const toggleState = () => setState(prevState => !prevState)
+
+    return (
+        <>
+            <button onClick={toggleState} role="button" />
+            <RenderCounter id={'rc1'} countsObj={renderCounts} />
+        </>
+    )
+}
+
+afterEach(() => {
+    resetRenderCounts(renderCounts)
+})
+
+it('increments the counter when rerendered', () => {
+    render(<Rerenderer />)
+
+    const { getByTestId, getByRole } = screen
+    expect(getByTestId('rc1')).toHaveTextContent('1')
+
+    act(() => {
+        fireEvent.click(getByRole('button'))
+    })
+
+    expect(getByTestId('rc1')).toHaveTextContent('2')
+
+    act(() => {
+        fireEvent.click(getByRole('button'))
+    })
+
+    expect(getByTestId('rc1')).toHaveTextContent('3')
+})
+
+it('resets the render counter successfully', () => {
+    render(<Rerenderer />)
+    expect(screen.getByTestId('rc1')).toHaveTextContent('1')
+})
diff --git a/services/offline/src/utils/render-counter.tsx b/services/offline/src/utils/render-counter.tsx
new file mode 100644
index 00000000..41d90b5e
--- /dev/null
+++ b/services/offline/src/utils/render-counter.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+interface RenderCounts {
+    [index: string]: number
+}
+
+export const RenderCounter = ({
+    id,
+    countsObj,
+}: {
+    id: string
+    countsObj: RenderCounts
+}): JSX.Element => {
+    if (!(id in countsObj)) countsObj[id] = 0
+    return <div data-testid={id}>{++countsObj[id]}</div>
+}
+
+export const resetRenderCounts = (renderCounts: RenderCounts): void =>
+    Object.keys(renderCounts).forEach(key => (renderCounts[key] = 0))
diff --git a/services/offline/src/utils/test-mocks.ts b/services/offline/src/utils/test-mocks.ts
new file mode 100644
index 00000000..eb575bb0
--- /dev/null
+++ b/services/offline/src/utils/test-mocks.ts
@@ -0,0 +1,37 @@
+export const successfulRecordingMock = jest
+    .fn()
+    .mockImplementation(async ({ onStarted, onCompleted } = {}) => {
+        // in 100ms, call 'onStarted' callback (allows 'pending' state)
+        if (onStarted) setTimeout(onStarted, 100)
+
+        // in 200ms, call 'onCompleted' callback
+        if (onCompleted) setTimeout(onCompleted, 200)
+
+        // resolve
+        return Promise.resolve()
+    })
+
+export const errorRecordingMock = jest
+    .fn()
+    .mockImplementation(({ onStarted, onError } = {}) => {
+        // in 100ms, call 'onStarted' callback (allows 'pending' state)
+        if (onStarted) setTimeout(onStarted, 100)
+
+        // in 200ms, call 'onError'
+        setTimeout(() => onError(new Error('test err')), 200)
+
+        // resolve to signal successful initiation
+        return Promise.resolve()
+    })
+
+export const failedMessageRecordingMock = jest
+    .fn()
+    .mockRejectedValue(new Error('Failed message'))
+
+export const mockOfflineInterface = {
+    pwaEnabled: true,
+    init: jest.fn(),
+    startRecording: successfulRecordingMock,
+    getCachedSections: jest.fn().mockResolvedValue([]),
+    removeSection: jest.fn().mockResolvedValue(true),
+}
diff --git a/yarn.lock b/yarn.lock
index b3566fef..30950986 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1340,6 +1340,14 @@
   dependencies:
     moment "^2.24.0"
 
+"@dhis2/app-runtime@^2.8.0":
+  version "2.10.0-pwa.4"
+  dependencies:
+    "@dhis2/app-service-alerts" "2.10.0-pwa.4"
+    "@dhis2/app-service-config" "2.10.0-pwa.4"
+    "@dhis2/app-service-data" "2.10.0-pwa.4"
+    "@dhis2/app-service-offline" "2.10.0-pwa.4"
+
 "@dhis2/app-shell@6.2.0":
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/@dhis2/app-shell/-/app-shell-6.2.0.tgz#b571120d59f248b4f51e21a9b760fa9a4b3c04f1"