fix(server): blank screen on mobile (#8460)

Co-authored-by: forehalo <forehalo@gmail.com>
2026-02-12 04:18:54 +00:00 · 2024-10-16 13:12:40 +08:00
parent 82916e8264
commit f393f89a3f
47 changed files with 425 additions and 212 deletions
--- a/packages/backend/server/src/app.ts
+++ b/packages/backend/server/src/app.ts
@@ -24,6 +24,10 @@ export async function createApp() {
    logger: AFFiNE.affine.stable ? ['log'] : ['verbose'],
  });

+  if (AFFiNE.server.path) {
+    app.setGlobalPrefix(AFFiNE.server.path);
+  }
+
  app.use(serverTimingAndCache);

  app.use(
--- a/packages/backend/server/src/core/doc-renderer/controller.ts
+++ b/packages/backend/server/src/core/doc-renderer/controller.ts
@@ -18,7 +18,6 @@ interface RenderOptions {
 }

 interface HtmlAssets {
-  html: string;
  css: string[];
  js: string[];
  publicPath: string;
@@ -27,7 +26,6 @@ interface HtmlAssets {
 }

 const defaultAssets: HtmlAssets = {
-  html: '',
  css: [],
  js: [],
  publicPath: '/',
@@ -152,9 +150,15 @@ export class DocRendererController {
    return null;
  }

+  // @TODO(@forehalo): pre-compile html template to accelerate serializing
  _render(opts: RenderOptions | null, assets: HtmlAssets): string {
-    if (!opts && assets.html) {
-      return assets.html;
+    // TODO(@forehalo): how can we enable the type reference to @affine/env
+    const env: Record<string, any> = {
+      publicPath: assets.publicPath,
+    };
+
+    if (this.config.isSelfhosted) {
+      env.isSelfHosted = true;
    }

    const title = opts?.title
@@ -182,7 +186,7 @@ export class DocRendererController {

    <title>${title}</title>
    <meta name="theme-color" content="#fafafa" />
-    <link rel="preconnect" href="${assets.publicPath}">
+    ${assets.publicPath.startsWith('/') ? '' : `<link rel="preconnect" href="${assets.publicPath}">`}
    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" sizes="192x192" href="/favicon-192.png" />
@@ -199,6 +203,10 @@ export class DocRendererController {
    <meta property="og:title" content="${title}" />
    <meta property="og:description" content="${summary}" />
    <meta property="og:image" content="${image}" />
+    <meta name="renderer" content="ssr" />
+    ${Object.entries(env)
+      .map(([key, val]) => `<meta name="env:${key}" content="${val}" />`)
+      .join('\n')}
    ${assets.css.map(url => `<link rel="stylesheet" href="${url}" />`).join('\n')}
  </head>
  <body>
@@ -214,11 +222,20 @@ export class DocRendererController {
   */
  private readHtmlAssets(path: string): HtmlAssets {
    const manifestPath = join(path, 'assets-manifest.json');
-    const htmlPath = join(path, 'index.html');

    try {
-      const assets = JSON.parse(readFileSync(manifestPath, 'utf-8'));
-      assets.html = readFileSync(htmlPath, 'utf-8');
+      const assets: HtmlAssets = JSON.parse(
+        readFileSync(manifestPath, 'utf-8')
+      );
+
+      const publicPath = this.config.isSelfhosted
+        ? this.config.server.host + '/'
+        : assets.publicPath;
+
+      assets.publicPath = publicPath;
+      assets.js = assets.js.map(path => publicPath + path);
+      assets.css = assets.css.map(path => publicPath + path);
+
      return assets;
    } catch (e) {
      if (this.config.node.prod) {
--- a/packages/backend/server/src/core/selfhost/index.ts
+++ b/packages/backend/server/src/core/selfhost/index.ts
@@ -9,6 +9,7 @@ import {
 import { HttpAdapterHost } from '@nestjs/core';
 import type { Application, Request, Response } from 'express';
 import { static as serveStatic } from 'express';
+import isMobile from 'is-mobile';

 import { Config } from '../../fundamentals';
 import { AuthModule } from '../auth';
@@ -58,50 +59,106 @@ export class SelfhostModule implements OnModuleInit {
  ) {}

  onModuleInit() {
-    // selfhost static file location
-    // web => 'static/selfhost'
-    // admin => 'static/admin/selfhost'
-    // mobile => 'static/mobile/selfhost'
-    const staticPath = join(this.config.projectRoot, 'static');
    // in command line mode
    if (!this.adapterHost.httpAdapter) {
      return;
    }

    const app = this.adapterHost.httpAdapter.getInstance<Application>();
+    // for example, '/affine' in host [//host.com/affine]
    const basePath = this.config.server.path;
+    const staticPath = join(this.config.projectRoot, 'static');

+    // web => {
+    //   affine: 'static/index.html',
+    //   selfhost: 'static/selfhost.html'
+    // }
+    // admin => {
+    //   affine: 'static/admin/index.html',
+    //   selfhost: 'static/admin/selfhost.html'
+    // }
+    // mobile => {
+    //   affine: 'static/mobile/index.html',
+    //   selfhost: 'static/mobile/selfhost.html'
+    // }
+    // NOTE(@forehalo):
+    //   the order following routes should be respected,
+    //   otherwise the app won't work properly.
+
+    // START REGION: /admin
+    // do not allow '/index.html' url, redirect to '/'
    app.get(basePath + '/admin/index.html', (_req, res) => {
-      res.redirect(basePath + '/admin');
+      return res.redirect(basePath + '/admin');
    });
+
+    // serve all static files
    app.use(
-      basePath + '/admin',
-      serveStatic(join(staticPath, 'admin', 'selfhost'), {
+      basePath,
+      serveStatic(join(staticPath, 'admin'), {
        redirect: false,
        index: false,
+        fallthrough: true,
      })
    );

+    // fallback all unknown routes
    app.get(
      [basePath + '/admin', basePath + '/admin/*'],
      this.check.use,
      (_req, res) => {
-        res.sendFile(join(staticPath, 'admin', 'selfhost', 'index.html'));
+        res.sendFile(
+          join(
+            staticPath,
+            'admin',
+            this.config.isSelfhosted ? 'selfhost.html' : 'index.html'
+          )
+        );
      }
    );
+    // END REGION

-    app.get(basePath + '/index.html', (_req, res) => {
-      res.redirect(basePath);
-    });
+    // START REGION: /mobile
+    // serve all static files
    app.use(
      basePath,
-      serveStatic(join(staticPath, 'selfhost'), {
+      serveStatic(join(staticPath, 'mobile'), {
        redirect: false,
        index: false,
+        fallthrough: true,
      })
    );
-    app.get('*', this.check.use, (_req, res) => {
-      res.sendFile(join(staticPath, 'selfhost', 'index.html'));
+    // END REGION
+
+    // START REGION: /
+    // do not allow '/index.html' url, redirect to '/'
+    app.get(basePath + '/index.html', (_req, res) => {
+      return res.redirect(basePath);
    });
+
+    // serve all static files
+    app.use(
+      basePath,
+      serveStatic(staticPath, {
+        redirect: false,
+        index: false,
+        fallthrough: true,
+      })
+    );
+
+    // fallback all unknown routes
+    app.get([basePath, basePath + '/*'], this.check.use, (req, res) => {
+      const mobile = isMobile({
+        ua: req.headers['user-agent'] ?? undefined,
+      });
+
+      return res.sendFile(
+        join(
+          staticPath,
+          mobile ? 'mobile' : '',
+          this.config.isSelfhosted ? 'selfhost.html' : 'index.html'
+        )
+      );
+    });
+    // END REGION
  }
 }
--- a/packages/backend/server/src/fundamentals/nestjs/config.ts
+++ b/packages/backend/server/src/fundamentals/nestjs/config.ts
@@ -3,7 +3,7 @@ import { defineStartupConfig, ModuleConfig } from '../../fundamentals/config';
 export interface ServerStartupConfigurations {
  /**
   * Base url of AFFiNE server, used for generating external urls.
-   * default to be `[AFFiNE.protocol]://[AFFiNE.host][:AFFiNE.port]?[AFFiNE.path]` if not specified
+   * default to be `[AFFiNE.protocol]://[AFFiNE.host][:AFFiNE.port]/[AFFiNE.path]` if not specified
   */
  externalUrl: string;
  /**
--- a/packages/backend/server/tests/app/selfhost.e2e.ts
+++ b/packages/backend/server/tests/app/selfhost.e2e.ts
@@ -17,12 +17,17 @@ const test = ava as TestFn<{
  db: PrismaClient;
 }>;

+const mobileUAString =
+  'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Mobile Safari/537.36';
+
 function initTestStaticFiles(staticPath: string) {
  const files = {
-    'selfhost/index.html': `<!DOCTYPE html><html><body>AFFiNE</body><script src="main.js"/></html>`,
-    'selfhost/main.js': `const name = 'affine'`,
-    'admin/selfhost/index.html': `<!DOCTYPE html><html><body>AFFiNE Admin</body><script src="/admin/main.js"/></html>`,
-    'admin/selfhost/main.js': `const name = 'affine-admin'`,
+    'selfhost.html': `<!DOCTYPE html><html><body>AFFiNE</body><script src="main.a.js"/></html>`,
+    'main.a.js': `const name = 'affine'`,
+    'admin/selfhost.html': `<!DOCTYPE html><html><body>AFFiNE Admin</body><script src="/admin/main.b.js"/></html>`,
+    'admin/main.b.js': `const name = 'affine-admin'`,
+    'mobile/selfhost.html': `<!DOCTYPE html><html><body>AFFiNE mobile</body><script src="/mobile/main.c.js"/></html>`,
+    'mobile/main.c.js': `const name = 'affine-mobile'`,
  };

  for (const [filename, content] of Object.entries(files)) {
@@ -35,6 +40,7 @@ function initTestStaticFiles(staticPath: string) {
 test.before('init selfhost server', async t => {
  // @ts-expect-error override
  AFFiNE.isSelfhosted = true;
+  AFFiNE.flavor.renderer = true;
  const { app } = await createTestingApp({
    imports: [buildAppModule()],
  });
@@ -54,7 +60,7 @@ test.beforeEach(async t => {
  server._initialized = false;
 });

-test.afterEach.always(async t => {
+test.after.always(async t => {
  await t.context.app.close();
 });

@@ -70,19 +76,28 @@ test('do not allow visit index.html directly', async t => {
    .expect(302);

  t.is(res.header.location, '/admin');
+
+  res = await request(t.context.app.getHttpServer())
+    .get('/mobile/index.html')
+    .expect(302);
 });

 test('should always return static asset files', async t => {
  let res = await request(t.context.app.getHttpServer())
-    .get('/main.js')
+    .get('/main.a.js')
    .expect(200);
  t.is(res.text, "const name = 'affine'");

  res = await request(t.context.app.getHttpServer())
-    .get('/admin/main.js')
+    .get('/main.b.js')
    .expect(200);
  t.is(res.text, "const name = 'affine-admin'");

+  res = await request(t.context.app.getHttpServer())
+    .get('/main.c.js')
+    .expect(200);
+  t.is(res.text, "const name = 'affine-mobile'");
+
  await t.context.db.user.create({
    data: {
      name: 'test',
@@ -91,14 +106,19 @@ test('should always return static asset files', async t => {
  });

  res = await request(t.context.app.getHttpServer())
-    .get('/main.js')
+    .get('/main.a.js')
    .expect(200);
  t.is(res.text, "const name = 'affine'");

  res = await request(t.context.app.getHttpServer())
-    .get('/admin/main.js')
+    .get('/main.b.js')
    .expect(200);
  t.is(res.text, "const name = 'affine-admin'");
+
+  res = await request(t.context.app.getHttpServer())
+    .get('/main.c.js')
+    .expect(200);
+  t.is(res.text, "const name = 'affine-mobile'");
 });

 test('should be able to call apis', async t => {
@@ -167,3 +187,19 @@ test('should redirect to admin if initialized', async t => {

  t.is(res.header.location, '/admin');
 });
+
+test('should return mobile assets if visited by mobile', async t => {
+  await t.context.db.user.create({
+    data: {
+      name: 'test',
+      email: 'test@affine.pro',
+    },
+  });
+
+  const res = await request(t.context.app.getHttpServer())
+    .get('/')
+    .set('user-agent', mobileUAString)
+    .expect(200);
+
+  t.true(res.text.includes('AFFiNE mobile'));
+});
--- a/packages/backend/server/tests/doc/renderer.spec.ts
+++ b/packages/backend/server/tests/doc/renderer.spec.ts
@@ -0,0 +1,94 @@
+import { mkdirSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import type { INestApplication } from '@nestjs/common';
+import { PrismaClient } from '@prisma/client';
+import type { TestFn } from 'ava';
+import ava from 'ava';
+import request from 'supertest';
+
+import { DocRendererModule } from '../../src/core/doc-renderer';
+import { createTestingApp } from '../utils';
+
+const test = ava as TestFn<{
+  app: INestApplication;
+  db: PrismaClient;
+}>;
+
+const mobileUAString =
+  'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Mobile Safari/537.36';
+
+function initTestStaticFiles(staticPath: string) {
+  const files = {
+    'main.a.js': `const name = 'affine'`,
+    'assets-manifest.json': JSON.stringify({
+      js: ['main.a.js'],
+      css: [],
+      publicPath: 'https://app.affine.pro/',
+      gitHash: '',
+      description: '',
+    }),
+    'admin/main.b.js': `const name = 'affine-admin'`,
+    'mobile/main.c.js': `const name = 'affine-mobile'`,
+    'mobile/assets-manifest.json': JSON.stringify({
+      js: ['main.c.js'],
+      css: [],
+      publicPath: 'https://app.affine.pro/',
+      gitHash: '',
+      description: '',
+    }),
+  };
+
+  for (const [filename, content] of Object.entries(files)) {
+    const filePath = path.join(staticPath, filename);
+    mkdirSync(path.dirname(filePath), { recursive: true });
+    writeFileSync(filePath, content);
+  }
+}
+
+test.before('init selfhost server', async t => {
+  const staticPath = path.join(
+    fileURLToPath(import.meta.url),
+    '../../../static'
+  );
+  initTestStaticFiles(staticPath);
+
+  const { app } = await createTestingApp({
+    imports: [DocRendererModule],
+  });
+
+  t.context.app = app;
+  t.context.db = t.context.app.get(PrismaClient);
+});
+
+test.after.always(async t => {
+  await t.context.app.close();
+});
+
+test('should render correct html', async t => {
+  const res = await request(t.context.app.getHttpServer())
+    .get('/workspace/xxxx/xxx')
+    .expect(200);
+
+  t.true(
+    res.text.includes(
+      `<script src="https://app.affine.pro/main.a.js"></script>`
+    )
+  );
+});
+
+test('should render correct mobile html', async t => {
+  const res = await request(t.context.app.getHttpServer())
+    .get('/workspace/xxxx/xxx')
+    .set('user-agent', mobileUAString)
+    .expect(200);
+
+  t.true(
+    res.text.includes(
+      `<script src="https://app.affine.pro/main.c.js"></script>`
+    )
+  );
+});
+
+test.todo('should render correct page preview');