web: wait for internet before running sync on device wake

apps/web/src/stores/app-store.js

@@ -35,7 +35,9 @@ import { EV, EVENTS, SYNC_CHECK_IDS } from "@notesnook/core/common";
 import { logger } from "../utils/logger";
 import Config from "../utils/config";
 import { onPageVisibilityChanged } from "../utils/page-visibility";
+import { NetworkCheck } from "../utils/network-check";
 
+const networkCheck = new NetworkCheck();
 var syncStatusTimeout = 0;
 const BATCH_SIZE = 50;
 class AppStore extends BaseStore {
@@ -128,7 +130,7 @@ class AppStore extends BaseStore {
         if (type === "online") {
           // a slight delay to make sure sockets are open and can be connected
           // to. Otherwise, this fails miserably.
-          await new Promise((resolve) => setTimeout(resolve, 2000));
+          await networkCheck.waitForInternet();
         }
         await db.connectSSE({ force: type === "online" }).catch(logger.error);
       } else if (type === "offline") {

apps/web/src/utils/network-check.ts

@@ -0,0 +1,38 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import Worker from "worker-loader?filename=static/workers/network.worker.[contenthash].js!./network.worker";
+import type { NetworkCheck as NetworkWorker } from "./network-check.worker";
+import { wrap, Remote } from "comlink";
+
+export class NetworkCheck {
+  private worker!: globalThis.Worker;
+  private network!: Remote<NetworkWorker>;
+
+  constructor() {
+    this.worker = new Worker();
+    this.network = wrap<NetworkWorker>(this.worker);
+  }
+
+  waitForInternet() {
+    return this.network.waitForInternet();
+  }
+}

apps/web/src/utils/network-check.worker.ts

@@ -0,0 +1,40 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { expose } from "comlink";
+
+const module = {
+  async waitForInternet() {
+    let retries = 10;
+    while (retries-- > 0) {
+      try {
+        const response = await fetch("https://api.notesnook.com/health");
+        if (response.ok) return true;
+      } catch {
+        // ignore
+      }
+
+      // wait a bit before trying again.
+      await new Promise((resolve) => setTimeout(resolve, 2500));
+    }
+    return false;
+  }
+};
+
+expose(module);
+export type NetworkCheck = typeof module;