mirror of https://git.tuxpa.in/a/code-server.git
Register a service worker
To make installing as a PWA possible. Fixes #1181.
This commit is contained in:
parent
eef2ed0e78
commit
963ebaca5b
29
ci/build.ts
29
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",
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -60,5 +60,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{BASE}}/static-{{COMMIT}}/dist/register.js"></script>
|
||||
</body>
|
||||
</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}}"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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")
|
||||
})
|
||||
}
|
|
@ -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",
|
||||
}),
|
||||
)
|
||||
}),
|
||||
)
|
||||
}
|
||||
})
|
|
@ -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 ? "/" : "")
|
||||
}
|
||||
|
|
|
@ -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> {
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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> {
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue