Offline Competition Signup App

What did the project entail?

This was a short project, consisting of a one-page application, requiring the ability to handle user signups and run completely offline (an initial internet connection is required to start the application).

How does the offline website work?

Utilising the React framework, this was built as a PWA (progressive web application), which basically caches every file of the website in the browser and utilises the browser indexedDB for storring data when offline.

How online/offline is detected.

To determine whether online or offline, the application makes a request every 20 seconds with a method of Head to the current origin, with a random string as search parameters to avoid a cached response.

If the request returns data, the application is online, otherwise it is offline. This is displayed on the top right of the application with an icon showing full bars for online and a disconnected icon when offline.

The code snippet below shows how to detect if there is an active network connection in a React application. There is a window.onLine property which can be used instead of a custom function, however it is not available in all browsers and is very iffy - i.e. will return true, even when wifi is disconnected 🤷‍♀️

// useNetworkConnection.ts
// Hook to determine whether the website is online or offline.
// Returns boolean value of networkConnected

type IUseNetworkReturns = {
  networkConnected: boolean;
}

const useNetworkConnection = (): IUseNetwork => {  
  const [networkConnected, setNetworkConnected] = useState(false);
  
  // Check if online on mount
  useEffect(() => {
    if (typeof window === undefined) return;
    isOnline();
  }, []);
  
  // Check if online every 20 seconds
  useEffect(() => {
    if (typeof window === undefined) return;
    const pingInterval = setInterval(() => {
      isOnline();
    }, 20000);
    return () => clearInterval(pingInterval);
  }, []);
  
  // Function to check if online
  const isOnline = async () => {
    const requestUrl = new URL(window.location.origin);
    requestUrl.searchParams.set(
      'randomString', 
      Math.random()
        .toString(36)
        .substring(2, 10)
    );
    
    try {
      const response = await fetch(requestUrl.toString(), {
        method: 'HEAD'
      });
      setNetworkConnected(true);
    } catch(err) {
      setNetworkConnected(false);
    };
  };
  
  return { networkConnected }
}

Posting user signups when offline/online.

When online, the application will post user signups directly to the database.

When offline, the application stores user signups in the indexedDB.

Whether offline or online, after clicking submit, the user will be notified of a successfull signup, which displays a message and a timer of 10 seconds until the form is reset.

If the application is in an offline state and switches back to online, a function runs which checks the indexedDB for any items, if items are detected, a request is made to the server to add the offline signups. If a successful response is received from posting the offline signups, the items in the local indexedDB are copied to a backup local database and the primary indexedDB is cleared.

The full tech stack and APIs/packages utilised

• Frontend: React (PWA), indexedDB, dexie, yup, react-hook-form.
• Backend: Cloudflare workers, mongoose, mongodb.

Got a web application you need developing?

Get in touch with us to discuss your requirements. The sky is endless when it comes to web development.