Offline Support

Network Status indicator

To detect whether the user's browser is connected to the internet, we make use of a custom React hook - useOnlineStatus. This hook tracks the online status of the user's browser and returns a boolean value indicating whether the browser is currently online or offline.

The hook which can be found here, starts by checking if the browser is online using navigator.onLine and sets a state variable isOnline to true or false based on that. It then listens for changes in the internet connection:

• When the browser connects to the internet, it updates isOnline to true.
• When the browser loses the internet connection, it updates isOnline to false.

Vite PWA Configuration

In the vite.config.ts file here, we add configurations to enhance the web application with offline capabilities and caching strategies. For more details, refer to the Vite PWA documentation. The configurations are passed to the Vite PWA plugin and include three main sections:

Service Worker Registration

This setting configures the service worker to automatically update in the background. When a new service worker is available, it will be installed and activated without requiring a manual refresh from the user.

registerType: "autoUpdate"

Asset Inclusion

This specifies additional assets to be precached by the service worker. These files which include the favicon, apple-touch-icon and robots.txt are neccessary for PWA functionality and offline support.

includeAssets: ["favicon.ico"] 

Workbox Caching Strategies

The workbox object contains settings that control the caching behavior of the service worker using Workbox.

• maximumFileSizeToCacheInBytes This property sets the maximum file size (in bytes) that can be cached. Files larger than this limit will not be cached, thus preventing the caching of excessively large resources.

• globPatterns This property defines the file patterns to include in the precaching process. The pattern covers typical web assets such as JavaScript, CSS, HTML, image files (png, svg, ico), and JSON files.

• runtimeCaching This defines caching strategies for different types of requests. In AMR Surveys, we have the:

  • API cache with NetworkFirst The NetworkFirst strategy attempts to fetch fresh content from the network first. If the network is unavailable or the fetch fails, it falls back to the cached version. Using the maxAgeSeconds property, we set a limit on the lifetime of cached responses to one week. After this period, cached responses are considered stale and are removed. Only successful responses with HTTP status 200 (OK) are cached, ensuring that error responses are not stored.

  • Asset cache with StaleWhileRevalidate The StaleWhileRevalidate strategy serves the cached content immediately while simultaneously fetching an updated version in the background. This provides a fast response time while keeping the cache fresh. This strategy targets static assets like JavaScript files, CSS, images, and fonts.

Offline error snackbar

The useOfflineSnackbar hook provides a convenient way to handle error messages that adapt to the user's online status.

We can find the implemenation of the hook here. It makes use of the existing useOnlineStatus hook to determine the user's connection status and uses the snackbar component from the @eyeseetea/d2-ui-components library to display error messages. When the user is offline, a custom OfflineMessage component is displayed instead of the regular error message.

Next steps

• Using the Vite PWA background sync plugin, we can extend the PWA functionality to intercept POST requests, store them in a queue while the user is offline and automatically resend them when connectivity is restored.