Register a service worker

code-asher · code-asher · commit 963ebaca5b75 · 2020-02-27T16:37:00.000-06:00
To make installing as a PWA possible. Fixes coder#1181.
diff --git 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",
+      },
+    )
   }
 }
 
diff --git 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"
     },
diff --git 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>
diff --git 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)
diff --git 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 @@ <h2 class="header">{{ERROR_HEADER}}</h2>
         </div>
       </div>
     </div>
+    <script src="{{BASE}}/static-{{COMMIT}}/dist/register.js"></script>
   </body>
 </html>
diff --git a/src/browser/pages/home.html b/src/browser/pages/home.html
@@ -60,5 +60,6 @@ <h2 class="main">Version</h2>
         </div>
       </div>
     </div>
+    <script src="{{BASE}}/static-{{COMMIT}}/dist/register.js"></script>
   </body>
 </html>
diff --git 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 @@ <h1 class="main">Welcome to code-server</h1>
       </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}}"
diff --git 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 @@ <h1 class="main">Update</h1>
         </div>
       </div>
     </div>
+    <script src="{{BASE}}/static-{{COMMIT}}/dist/register.js"></script>
   </body>
 </html>
diff --git 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>
diff --git a/src/browser/register.ts b/src/browser/register.ts
@@ -0,0 +1,14 @@
+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")
+    })
+}
diff --git a/src/browser/serviceWorker.ts b/src/browser/serviceWorker.ts
@@ -0,0 +1,24 @@
+/* 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",
+          }),
+        )
+      }),
+    )
+  }
+})
diff --git 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 ? "/" : "")
-}
diff --git a/src/node/app/app.ts b/src/node/app/app.ts
@@ -1,9 +1,7 @@
-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> {
diff --git 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)
   }
 
   /**
diff --git 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> {
diff --git 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)
   }
 
   /**
diff --git a/src/node/http.ts b/src/node/http.ts

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`"sizes": "96x96"`
`13`	`13`	`},`
`14`	`14`	`{`
`15`		`- "src": "/{{BASE}}/static-{{COMMIT}}/src/browser/media/pwa-icon-128.png",`
	`15`	`+ "src": "{{BASE}}/static-{{COMMIT}}/src/browser/media/pwa-icon-128.png",`
`16`	`16`	`"type": "image/png",`
`17`	`17`	`"sizes": "128x128"`
`18`	`18`	`},`
-Original file line number
+Diff line change
         </div>
       </div>
     </div>
 +    <script src="{{BASE}}/static-{{COMMIT}}/dist/register.js"></script>
   </body>
 </html>