diff --git a/docs/design-system/custom-components/application-container.md b/docs/design-system/custom-components/application-container.md index 19c3996..8b42e3a 100644 --- a/docs/design-system/custom-components/application-container.md +++ b/docs/design-system/custom-components/application-container.md @@ -4,44 +4,74 @@ sidebar_position: 1 # Application Container -The `Application` container handles network status changes and displays appropriate toast notifications. It has **built-in** functionality that automatically handles these changes. +The Application container handles core application-wide functionality, including service worker integration, custom storage management, and network status detection. It provides a centralized way to manage these features within your app. ## Features -- **Built-in Offline/Online Notifications**: The `Application` component monitors the network status. It shows toast messages when the app goes offline or comes back online. -- **Custom Hooks**: It leverages the `useToasts` and `useOfflineStatus` hooks from within `@nmfs-radfish/react-radfish` package. +1. **Service Worker for Offline Caching** -## How It Works + The Application container supports service worker integration, enabling offline capabilities by caching static assets and handling API requests when the network is unavailable. -### Built-in Offline/Online Notifications +2. **Pluggable Storage** -The `Application` component has **built-in** functionality to check the application's network status. It displays toast notifications when the state changes: + Pass in IndexedDB or LocalStorage storage methods. -- **When the application goes offline**: A warning toast is displayed with the message `"Application is offline"`. -- **When the application comes back online**: An info toast is displayed with the message `"Application is online"`. +3. **Offline/Online Detection** -This feature is provided **out of the box** and requires no additional setup from your side. + Automatically detects network changes and displays toast notifications: -### Example Usage + - Offline: Shows a warning toast with "Application is offline". + - Online: Shows an informational toast with "Application is online". -To use the `Application` component, wrap it around your app in the entry file (e.g. `index.js` or `index.jsx`): +## Usage + +### Setting up Application instance + +To use the `Application` container, instantiate it with your desired configuration: ```jsx -import { Application } from "@nmfs-radfish/react-radfish"; +import { Application } from "@nmfs-radfish/radfish"; + +const myApp = new Application({ + serviceWorker: { + url: + import.meta.env.MODE === "development" + ? "/mockServiceWorker.js" + : "/service-worker.js", + }, + storage: store, // Use IndexedDBMethod or LocalStorageMethod for offline storage +}); +``` + +### Using `` + +Once instantiated, the `Application` instance should be passed to the `` component. -function App () { - return ( - - { /* Your application code */ } - - ); -} +```jsx +import { Application } from "@nmfs-radfish/react-radfish"; -export default App; +; ``` - +- **`@nmfs-radfish/radfish`** = the **engine** (all the logic). +- **`@nmfs-radfish/react-radfish`** = the **React car** that sits on top of the engine, making it easy to drive your offline-ready web app in React.