Using offline mode in Hilla

Tatu2 · April 26, 2024, 8:10am

I wrote a simple custom hook for handling offline mode support in Hilla applications. There are functions to check offline mode, offline mode state variable to be used with components, callback to run when state changes and couple functions to store and get data from local storage.

github.com

TatuLund/hilla-v2-demo/blob/master/frontend/util/useOffline.tsx

import { ConnectionState, ConnectionStateStore } from '@vaadin/common-frontend';
import { useEffect, useState } from 'react';

/**
 * Represents the offline hook.
 */
type OfflineHook = {
  offline: boolean;
  isOffline: () => boolean;
  clearCache: () => void;
  store: (key: string, value: any) => void;
  get: (key: string) => any;
};

/**
 * Represents a callback function that is invoked when the offline status changes.
 * @param offline - A boolean value indicating whether the user is offline or not.
 */
type OfflineChangedListener = (offline: boolean) => void;

This file has been truncated. show original

You can inspect the linked demo application for use cases.

rbrki07 · April 26, 2024, 8:52am

Wow, that’s great! Thank you for sharing @Tatu2.