adds backpack-api mobile-service-worker (#3530)

* updates

* adds file

.github/workflows/pull_requests_and_merges.yml

@@ -87,6 +87,7 @@ jobs:
         if: github.event_name == 'push' && github.ref == 'refs/heads/master'
         uses: peaceiris/actions-gh-pages@v3
         with:
+          cname: mobile-service-worker.xnfts.dev
           publish_dir: packages/background/build
           github_token: ${{ secrets.GITHUB_TOKEN }}
           destination_dir: "background-scripts/${{ env.short_sha }}"

backend/native/backpack-api/src/index.ts

@@ -1,7 +1,6 @@
 import cors from "cors";
-import type { NextFunction, Request, Response } from "express";
+import type { Request, Response } from "express";
 import express from "express";
-import { createProxyMiddleware } from "http-proxy-middleware";
 import { ZodError } from "zod";
 
 import authenticateRouter from "./routes/v1/authenticate";
@@ -10,6 +9,7 @@ import chatRouter from "./routes/v1/chats";
 import dropzoneRouter from "./routes/v1/dropzone";
 import friendsRouter from "./routes/v1/friends";
 import inboxRouter from "./routes/v1/inbox";
+import mobileRouter from "./routes/v1/mobile";
 import nftsRouter from "./routes/v1/nft";
 import notificationRoutes from "./routes/v1/notifications";
 import preferenceRoutes from "./routes/v1/preferences";
@@ -48,14 +48,7 @@ app.use("/s3", s3Router);
 app.use("/twitter", twitterRouter);
 app.use("/tx-parsing", txParsingRouter);
 app.use("/users", usersRouter);
-app.use(
-  "/mobile-service-worker",
-  createProxyMiddleware({
-    target:
-      "https://coral-xyz.github.io/backpack/background-scripts/85fa0c25/service-worker-loader.html",
-    changeOrigin: false,
-  })
-);
+app.use("/mobile", mobileRouter);
 app.get("/_health", (_req, res) => {
   return res.status(200).json({
     uptime: process.uptime(),
@@ -73,7 +66,7 @@ app.get("/", (_req, res) => {
 });
 
 // @ts-ignore
-app.use((err: any, _req: Request, res: Response, next: NextFunction) => {
+app.use((err: any, _req: Request, res: Response) => {
   if (err instanceof ZodError) {
     return res.status(400).json({
       message: zodErrorToString(err),

backend/native/backpack-api/src/routes/v1/mobile.ts

@@ -0,0 +1,45 @@
+import express from "express";
+import https from "https";
+
+const router = express.Router();
+
+const getUrl = (hash = "45b6c8d") =>
+  `https://mobile-service-worker.xnfts.dev/background-scripts/${hash}`;
+
+// Serve the HTML file
+router.get("/loader", (_req, res) => {
+  const baseUrl = getUrl();
+  const url = `${baseUrl}/service-worker-loader.html`;
+
+  https.get(url, (remoteRes) => {
+    const options = {
+      headers: {
+        "Service-Worker-Allowed": "/",
+      },
+    };
+
+    // @ts-ignore
+    res.writeHead(remoteRes.statusCode, options);
+    remoteRes.pipe(res);
+  });
+});
+
+// Serve the service worker file
+router.get("/service-worker.js", (req, res) => {
+  const baseUrl = getUrl();
+  const url = `${baseUrl}/service-worker.js`;
+
+  https.get(url, (remoteRes) => {
+    const options = {
+      headers: {
+        "Service-Worker-Allowed": "/",
+      },
+    };
+
+    // @ts-ignore
+    res.writeHead(remoteRes.statusCode, options);
+    remoteRes.pipe(res);
+  });
+});
+
+export default router;

packages/app-mobile/app.config.ts

@@ -4,6 +4,11 @@ export default ({ config }: ConfigContext): ExpoConfig => {
   const projectID = "55bf074d-0473-4e61-9d9d-ecf570704635";
   const packageName = "app.backpack.mobile";
 
+  const getUrl = (hash: string = "45b6c8d") =>
+    `https://mobile-service-worker.xnfts.dev/background-scripts/${hash}/service-worker-loader.html`;
+
+  const remoteWebViewUrl = getUrl();
+
   return {
     ...config,
     name: "Backpack",
@@ -41,6 +46,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
           "coral-xyz.github.io",
           "ngrok.io",
           "backpack-api.xnfts.dev",
+          "mobile-service-worker.xnfts.dev",
         ],
       },
     },
@@ -56,9 +62,10 @@ export default ({ config }: ConfigContext): ExpoConfig => {
       favicon: "./assets/favicon.png",
     },
     extra: {
+      // localWebViewUrl: "http://localhost:8080/mobile/loader",
       localWebViewUrl: "http://localhost:9333",
-      remoteWebViewUrl:
-        "https://coral-xyz.github.io/backpack/background-scripts/7b1f07d/service-worker-loader.html",
+      // localWebViewUrl: remoteWebViewUrl,
+      remoteWebViewUrl,
       eas: {
         projectId: projectID,
       },

packages/app-mobile/eas.json

@@ -8,11 +8,13 @@
       "node": "18.15.0",
       "ios": {
         "resourceClass": "m-medium"
-      }
+      },
+      "channel": "monorepo"
     },
     "production": {
       "extends": "monorepo",
-      "autoIncrement": true
+      "autoIncrement": true,
+      "channel": "production"
     },
     "simulator": {
       "extends": "monorepo",

packages/app-mobile/src/App.tsx

@@ -151,6 +151,8 @@ function BackgroundHiddenWebView(): JSX.Element {
         source={{
           uri: webviewUrl,
         }}
+        onError={(error) => console.log("WebView error:", error)}
+        onHttpError={(error) => console.log("WebView HTTP error:", error)}
         onMessage={(event) => {
           const msg = JSON.parse(event.nativeEvent.data);
           maybeParseLog(msg);