Register a service worker

To make installing as a PWA possible. Fixes #1181.

Register a service worker
To make installing as a PWA possible. Fixes #1181.
963ebaca · Asher · eef2ed0e · 963ebaca · 963ebaca · 963ebaca
17 changed file
--- a/ci/build.ts
+++ b/ci/build.ts
@@ -339,17 +339,24 @@ class Builder {
  }

  private createBundler(out = "dist", commit?: string): Bundler {
-    return new Bundler(path.join(this.rootPath, "src/browser/pages/app.ts"), {
-      cache: true,
-      cacheDir: path.join(this.rootPath, ".cache"),
-      detailedReport: true,
-      minify: !!process.env.MINIFY,
-      hmr: false,
-      logLevel: 1,
-      outDir: path.join(this.rootPath, out),
-      publicUrl: `/static-${commit}/dist`,
-      target: "browser",
-    })
+    return new Bundler(
+      [
+        path.join(this.rootPath, "src/browser/pages/app.ts"),
+        path.join(this.rootPath, "src/browser/register.ts"),
+        path.join(this.rootPath, "src/browser/serviceWorker.ts"),
+      ],
+      {
+        cache: true,
+        cacheDir: path.join(this.rootPath, ".cache"),
+        detailedReport: true,
+        minify: !!process.env.MINIFY,
+        hmr: false,
+        logLevel: 1,
+        outDir: path.join(this.rootPath, out),
+        publicUrl: `/static-${commit || "development"}/dist`,
+        target: "browser",
+      },
+    )
  }
 }


--- a/src/browser/media/manifest.json
+++ b/src/browser/media/manifest.json
@@ -12,7 +12,7 @@
      "sizes": "96x96"
    },
    {
-      "src": "/{{BASE}}/static-{{COMMIT}}/src/browser/media/pwa-icon-128.png",
+      "src": "{{BASE}}/static-{{COMMIT}}/src/browser/media/pwa-icon-128.png",
      "type": "image/png",
      "sizes": "128x128"
    },

--- a/src/browser/pages/app.html
+++ b/src/browser/pages/app.html
@@ -19,6 +19,7 @@
    <meta id="coder-options" data-settings="{{OPTIONS}}" />
  </head>
  <body>
+    <script src="{{BASE}}/static-{{COMMIT}}/dist/register.js"></script>
    <script src="{{BASE}}/static-{{COMMIT}}/dist/app.js"></script>
  </body>
 </html>
--- a/src/browser/pages/app.ts
+++ b/src/browser/pages/app.ts
@@ -8,8 +8,5 @@ import "./login.css"
 import "./update.css"

 const options = getOptions()
-const parts = window.location.pathname.replace(/^\//g, "").split("/")
-parts[parts.length - 1] = options.base
-const url = new URL(window.location.origin + "/" + parts.join("/"))

-console.log(url)
+console.log(options)
--- a/src/browser/pages/error.html
+++ b/src/browser/pages/error.html
@@ -16,6 +16,7 @@
    />
    <link rel="apple-touch-icon" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/code-server.png" />
    <link href="{{BASE}}/static-{{COMMIT}}/dist/app.css" rel="stylesheet" />
+    <meta id="coder-options" data-settings="{{OPTIONS}}" />
  </head>
  <body>
    <div class="center-container">
@@ -29,5 +30,6 @@
        </div>
      </div>
    </div>
+    <script src="{{BASE}}/static-{{COMMIT}}/dist/register.js"></script>
  </body>
 </html>
--- a/src/browser/pages/home.html
+++ b/src/browser/pages/home.html
@@ -60,5 +60,6 @@
        </div>
      </div>
    </div>
+    <script src="{{BASE}}/static-{{COMMIT}}/dist/register.js"></script>
  </body>
 </html>
--- a/src/browser/pages/login.html
+++ b/src/browser/pages/login.html
@@ -8,7 +8,7 @@
    />
    <meta
      http-equiv="Content-Security-Policy"
-      content="style-src 'self'; script-src 'unsafe-inline'; manifest-src 'self'; img-src 'self' data:;"
+      content="style-src 'self'; script-src 'self' 'unsafe-inline'; manifest-src 'self'; img-src 'self' data:;"
    />
    <title>code-server login</title>
    <link rel="icon" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/favicon.ico" type="image/x-icon" />
@@ -19,6 +19,7 @@
    />
    <link rel="apple-touch-icon" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/code-server.png" />
    <link href="{{BASE}}/static-{{COMMIT}}/dist/app.css" rel="stylesheet" />
+    <meta id="coder-options" data-settings="{{OPTIONS}}" />
  </head>
  <body>
    <div class="center-container">
@@ -52,6 +53,7 @@
      </div>
    </div>
  </body>
+  <script src="{{BASE}}/static-{{COMMIT}}/dist/register.js"></script>
  <script>
    const parts = window.location.pathname.replace(/^\//g, "").split("/")
    parts[parts.length - 1] = "{{BASE}}"

--- a/src/browser/pages/update.html
+++ b/src/browser/pages/update.html
@@ -16,6 +16,7 @@
    />
    <link rel="apple-touch-icon" href="{{BASE}}/static-{{COMMIT}}/src/browser/media/code-server.png" />
    <link href="{{BASE}}/static-{{COMMIT}}/dist/app.css" rel="stylesheet" />
+    <meta id="coder-options" data-settings="{{OPTIONS}}" />
  </head>
  <body>
    <div class="center-container">
@@ -32,5 +33,6 @@
        </div>
      </div>
    </div>
+    <script src="{{BASE}}/static-{{COMMIT}}/dist/register.js"></script>
  </body>
 </html>
--- a/src/browser/pages/vscode.html
+++ b/src/browser/pages/vscode.html
@@ -41,6 +41,8 @@
    <!-- PROD_ONLY
    <link rel="prefetch" href="{{VS_BASE}}/static-{{COMMIT}}/node_modules/semver-umd/lib/semver-umd.js">
    END_PROD_ONLY -->
+
+    <meta id="coder-options" data-settings="{{OPTIONS}}" />
  </head>

  <body aria-label=""></body>
@@ -91,6 +93,7 @@
      "vs/nls": nlsConfig,
    }
  </script>
+  <script src="{{BASE}}/static-{{COMMIT}}/dist/register.js"></script>
  <script src="{{VS_BASE}}/static-{{COMMIT}}/out/vs/loader.js"></script>
  <!-- PROD_ONLY
  <script src="{{VS_BASE}}/static-{{COMMIT}}/out/vs/workbench/workbench.web.api.nls.js"></script>

--- a/src/browser/register.ts
+++ b/src/browser/register.ts
+import { getOptions, normalize } from "../common/util"
+
+const options = getOptions()
+
+if ("serviceWorker" in navigator) {
+  const path = normalize(`${options.base}/static-${options.commit}/dist/serviceWorker.js`)
+  navigator.serviceWorker
+    .register(path, {
+      scope: options.base || "/",
+    })
+    .then(function() {
+      console.log("[Service Worker] registered")
+    })
+}
--- a/src/browser/serviceWorker.ts
+++ b/src/browser/serviceWorker.ts
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+self.addEventListener("install", () => {
+  console.log("[Service Worker] install")
+})
+
+self.addEventListener("activate", (event: any) => {
+  event.waitUntil((self as any).clients.claim())
+})
+
+self.addEventListener("fetch", (event: any) => {
+  if (!navigator.onLine) {
+    event.respondWith(
+      new Promise((resolve) => {
+        resolve(
+          new Response("OFFLINE", {
+            status: 200,
+            statusText: "OK",
+          }),
+        )
+      }),
+    )
+  }
+})
--- a/src/common/util.ts
+++ b/src/common/util.ts
@@ -2,8 +2,9 @@ import { logger } from "@coder/logger"

 export interface Options {
  base: string
+  commit: string
  logLevel: number
-  sessionId: string
+  sessionId?: string
 }

 /**
@@ -25,6 +26,13 @@ export const generateUuid = (length = 24): string => {
    .join("")
 }

+/**
+ * Remove extra slashes in a URL.
+ */
+export const normalize = (url: string, keepTrailing = false): string => {
+  return url.replace(/\/\/+/g, "/").replace(/\/+$/, keepTrailing ? "/" : "")
+}
+
 /**
 * Get options embedded in the HTML from the server.
 */
@@ -45,16 +53,15 @@ export const getOptions = <T extends Options>(): T => {
    if (typeof options.logLevel !== "undefined") {
      logger.level = options.logLevel
    }
-    return options
+    const parts = window.location.pathname.replace(/^\//g, "").split("/")
+    parts[parts.length - 1] = options.base
+    const url = new URL(window.location.origin + "/" + parts.join("/"))
+    return {
+      ...options,
+      base: normalize(url.pathname, true),
+    }
  } catch (error) {
    logger.warn(error.message)
    return {} as T
  }
 }
-
-/**
- * Remove extra slashes in a URL.
- */
-export const normalize = (url: string, keepTrailing = false): string => {
-  return url.replace(/\/\/+/g, "/").replace(/\/+$/, keepTrailing ? "/" : "")
-}
--- a/src/node/app/app.ts
+++ b/src/node/app/app.ts
-import { logger } from "@coder/logger"
 import * as http from "http"
 import * as querystring from "querystring"
 import { Application } from "../../common/api"
 import { HttpCode, HttpError } from "../../common/http"
-import { Options } from "../../common/util"
 import { HttpProvider, HttpProviderOptions, HttpResponse, Route } from "../http"
 import { ApiHttpProvider } from "./api"
 import { UpdateHttpProvider } from "./update"
@@ -61,15 +59,7 @@ export class MainHttpProvider extends HttpProvider {
    }

    if (sessionId) {
-      return this.getAppRoot(
-        route,
-        {
-          sessionId,
-          base: this.base(route),
-          logLevel: logger.level,
-        },
-        (app && app.name) || "",
-      )
+      return this.getAppRoot(route, (app && app.name) || "", sessionId)
    }

    return this.getErrorRoot(route, "404", "404", "Application not found")
@@ -79,12 +69,12 @@ export class MainHttpProvider extends HttpProvider {
   * Return a resource with variables replaced where necessary.
   */
  protected async getReplacedResource(route: Route): Promise<HttpResponse> {
-    if (route.requestPath.endsWith("/manifest.json")) {
-      const response = await this.getUtf8Resource(this.rootPath, route.requestPath)
-      response.content = response.content
-        .replace(/{{BASE}}/g, this.base(route))
-        .replace(/{{COMMIT}}/g, this.options.commit)
-      return response
+    const split = route.requestPath.split("/")
+    switch (split[split.length - 1]) {
+      case "manifest.json": {
+        const response = await this.getUtf8Resource(this.rootPath, route.requestPath)
+        return this.replaceTemplates(route, response)
+      }
    }
    return this.getResource(this.rootPath, route.requestPath)
  }
@@ -94,8 +84,6 @@ export class MainHttpProvider extends HttpProvider {
    const apps = await this.api.installedApplications()
    const response = await this.getUtf8Resource(this.rootPath, "src/browser/pages/home.html")
    response.content = response.content
-      .replace(/{{COMMIT}}/g, this.options.commit)
-      .replace(/{{BASE}}/g, this.base(route))
      .replace(/{{UPDATE:NAME}}/, await this.getUpdate())
      .replace(/{{APP_LIST:RUNNING}}/, this.getAppRows(running.applications))
      .replace(
@@ -106,17 +94,13 @@ export class MainHttpProvider extends HttpProvider {
        /{{APP_LIST:OTHER}}/,
        this.getAppRows(apps.filter((app) => !app.categories || !app.categories.includes("Editor"))),
      )
-    return response
+    return this.replaceTemplates(route, response)
  }

-  public async getAppRoot(route: Route, options: Options, name: string): Promise<HttpResponse> {
+  public async getAppRoot(route: Route, name: string, sessionId: string): Promise<HttpResponse> {
    const response = await this.getUtf8Resource(this.rootPath, "src/browser/pages/app.html")
-    response.content = response.content
-      .replace(/{{COMMIT}}/g, this.options.commit)
-      .replace(/{{BASE}}/g, this.base(route))
-      .replace(/{{APP_NAME}}/, name)
-      .replace(/"{{OPTIONS}}"/, `'${JSON.stringify(options)}'`)
-    return response
+    response.content = response.content.replace(/{{APP_NAME}}/, name)
+    return this.replaceTemplates(route, response, sessionId)
  }

  public async handleWebSocket(): Promise<undefined> {

--- a/src/node/app/login.ts
+++ b/src/node/app/login.ts
@@ -48,11 +48,9 @@ export class LoginHttpProvider extends HttpProvider {
  public async getRoot(route: Route, value?: string, error?: Error): Promise<HttpResponse> {
    const response = await this.getUtf8Resource(this.rootPath, "src/browser/pages/login.html")
    response.content = response.content
-      .replace(/{{COMMIT}}/g, this.options.commit)
-      .replace(/{{BASE}}/g, this.base(route))
      .replace(/{{VALUE}}/, value || "")
      .replace(/{{ERROR}}/, error ? `<div class="error">${error.message}</div>` : "")
-    return response
+    return this.replaceTemplates(route, response)
  }

  /**

--- a/src/node/app/update.ts
+++ b/src/node/app/update.ts
@@ -86,11 +86,9 @@ export class UpdateHttpProvider extends HttpProvider {
  public async getRoot(route: Route, error?: Error): Promise<HttpResponse> {
    const response = await this.getUtf8Resource(this.rootPath, "src/browser/pages/update.html")
    response.content = response.content
-      .replace(/{{COMMIT}}/g, this.options.commit)
-      .replace(/{{BASE}}/g, this.base(route))
      .replace(/{{UPDATE_STATUS}}/, await this.getUpdateHtml())
      .replace(/{{ERROR}}/, error ? `<div class="error">${error.message}</div>` : "")
-    return response
+    return this.replaceTemplates(route, response)
  }

  public async handleWebSocket(): Promise<undefined> {

--- a/src/node/app/vscode.ts
+++ b/src/node/app/vscode.ts
@@ -219,17 +219,13 @@ export class VscodeHttpProvider extends HttpProvider {
      response.content = response.content.replace(/<!-- PROD_ONLY/g, "").replace(/END_PROD_ONLY -->/g, "")
    }

-    return {
-      ...response,
-      content: response.content
-        .replace(/{{COMMIT}}/g, options.commit)
-        .replace(/{{BASE}}/g, this.base(route))
-        .replace(/{{VS_BASE}}/g, this.base(route) + this.options.base)
-        .replace(`"{{REMOTE_USER_DATA_URI}}"`, `'${JSON.stringify(options.remoteUserDataUri)}'`)
-        .replace(`"{{PRODUCT_CONFIGURATION}}"`, `'${JSON.stringify(options.productConfiguration)}'`)
-        .replace(`"{{WORKBENCH_WEB_CONFIGURATION}}"`, `'${JSON.stringify(options.workbenchWebConfiguration)}'`)
-        .replace(`"{{NLS_CONFIGURATION}}"`, `'${JSON.stringify(options.nlsConfiguration)}'`),
-    }
+    response.content = response.content
+      .replace(/{{VS_BASE}}/g, this.base(route) + this.options.base)
+      .replace(`"{{REMOTE_USER_DATA_URI}}"`, `'${JSON.stringify(options.remoteUserDataUri)}'`)
+      .replace(`"{{PRODUCT_CONFIGURATION}}"`, `'${JSON.stringify(options.productConfiguration)}'`)
+      .replace(`"{{WORKBENCH_WEB_CONFIGURATION}}"`, `'${JSON.stringify(options.workbenchWebConfiguration)}'`)
+      .replace(`"{{NLS_CONFIGURATION}}"`, `'${JSON.stringify(options.nlsConfiguration)}'`)
+    return this.replaceTemplates(route, response)
  }

  /**

--- a/src/node/http.ts
+++ b/src/node/http.ts
@@ -12,7 +12,7 @@ import * as tarFs from "tar-fs"
 import * as tls from "tls"
 import * as url from "url"
 import { HttpCode, HttpError } from "../common/http"
-import { normalize, plural, split } from "../common/util"
+import { normalize, Options, plural, split } from "../common/util"
 import { SocketProxyProvider } from "./socket"
 import { getMediaMime, xdgLocalDir } from "./util"

@@ -165,14 +165,36 @@ export abstract class HttpProvider {
    return normalize("./" + (depth > 1 ? "../".repeat(depth - 1) : ""))
  }

+  /**
+   * Get error response.
+   */
  public async getErrorRoot(route: Route, title: string, header: string, body: string): Promise<HttpResponse> {
    const response = await this.getUtf8Resource(this.rootPath, "src/browser/pages/error.html")
    response.content = response.content
-      .replace(/{{COMMIT}}/g, this.options.commit)
-      .replace(/{{BASE}}/g, this.base(route))
      .replace(/{{ERROR_TITLE}}/g, title)
      .replace(/{{ERROR_HEADER}}/g, header)
      .replace(/{{ERROR_BODY}}/g, body)
+    return this.replaceTemplates(route, response)
+  }
+
+  /**
+   * Replace common templates strings.
+   */
+  protected replaceTemplates(
+    route: Route,
+    response: HttpStringFileResponse,
+    sessionId?: string,
+  ): HttpStringFileResponse {
+    const options: Options = {
+      base: this.base(route),
+      commit: this.options.commit,
+      logLevel: logger.level,
+      sessionId,
+    }
+    response.content = response.content
+      .replace(/{{COMMIT}}/g, this.options.commit)
+      .replace(/{{BASE}}/g, this.base(route))
+      .replace(/"{{OPTIONS}}"/, `'${JSON.stringify(options)}'`)
    return response
  }

@@ -338,11 +360,15 @@ export class Heart {
        clearTimeout(this.heartbeatTimer)
      }
      this.heartbeatTimer = setTimeout(() => {
-        this.isActive().then((active) => {
-          if (active) {
-            this.beat()
-          }
-        })
+        this.isActive()
+          .then((active) => {
+            if (active) {
+              this.beat()
+            }
+          })
+          .catch((error) => {
+            logger.warn(error.message)
+          })
      }, this.heartbeatInterval)
    }
  }