fix: false positive case of navigator.online

src/pages/create/index.tsx

@@ -35,6 +35,7 @@ import {
   generateEncryptionKey,
   getHash,
   hexToNpub,
+  isOnline,
   npubToHex,
   queryNip05,
   sendDM,
@@ -338,7 +339,7 @@ export const CreatePage = () => {
 
     const blob = new Blob([encryptedArrayBuffer])
 
-    if (navigator.onLine) {
+    if (await isOnline()) {
       setIsLoading(true)
       setLoadingSpinnerDesc('Uploading zip file to file storage.')
       const fileUrl = await uploadToFileStorage(blob, nostrController)

src/pages/sign/index.tsx

@@ -50,7 +50,8 @@ import {
   sendDM,
   shorten,
   signEventForMetaFile,
-  uploadToFileStorage
+  uploadToFileStorage,
+  isOnline
 } from '../../utils'
 import styles from './style.module.scss'
 import {
@@ -433,7 +434,7 @@ export const SignPage = () => {
 
     const blob = new Blob([encryptedArrayBuffer])
 
-    if (navigator.onLine) {
+    if (await isOnline()) {
       setLoadingSpinnerDesc('Uploading zip file to file storage.')
       const fileUrl = await uploadToFileStorage(blob, nostrController)
         .then((url) => {

src/utils/utils.ts

@@ -11,3 +11,41 @@ export const compareObjects = (
 
   return JSON.stringify(obj1) === JSON.stringify(obj2)
 }
+
+// Function to check if the system is online by making a network request
+export const isOnline = async () => {
+  // First, check the navigator's online status
+  if (!navigator.onLine) return false // If navigator reports offline, return false
+
+  /**
+   * If navigator.onLine is true, it can be false positive.
+   * In other words, navigator.onLine being true does not necessarily mean that there is a working internet connection.
+   * Most implementations seem to only be checking if there's a connected network adapter.
+   * There are a number of circumstances where that's the case, but the internet is still unreachable. For example:
+   * The user is only connected to an internal network
+   * The user is inside a virtual machine, and the virtual network adapter is connected, but the host system is offline
+   * The user uses a VPN which has installed a virtual network adapter that is always connected
+   *
+   * To overcome the above problem we'll have to make a http request
+   */
+
+  try {
+    // Define a URL to check the online status
+    const url = 'https://www.google.com'
+
+    // Make a HEAD request to the URL with 'no-cors' mode
+    // This mode is used to handle opaque responses which do not expose their content
+    const response = await fetch(url, { method: 'HEAD', mode: 'no-cors' })
+
+    // Check if the response is OK or if the response type is 'opaque'
+    // An 'opaque' response type means that the request succeeded but the response content is not available
+    if (response.ok || response.type === 'opaque') {
+      return true // If the request is successful, return true
+    } else {
+      return false // If the request fails, return false
+    }
+  } catch (error) {
+    // Catch any errors that occur during the fetch request
+    return false // If an error occurs, return false
+  }
+}