diff --git a/src/cli/traceViewer/screenshotGenerator.ts b/src/cli/traceViewer/screenshotGenerator.ts
index 2ed6329e29..ba4b8dc805 100644
--- a/src/cli/traceViewer/screenshotGenerator.ts
+++ b/src/cli/traceViewer/screenshotGenerator.ts
@@ -18,31 +18,31 @@ import * as fs from 'fs';
 import * as path from 'path';
 import * as playwright from '../../..';
 import * as util from 'util';
-import { actionById, ActionEntry, ContextEntry, PageEntry, TraceModel } from './traceModel';
+import { actionById, ActionEntry, ContextEntry, TraceModel } from './traceModel';
 import { SnapshotServer } from './snapshotServer';
 
 const fsReadFileAsync = util.promisify(fs.readFile.bind(fs));
 const fsWriteFileAsync = util.promisify(fs.writeFile.bind(fs));
 
 export class ScreenshotGenerator {
-  private _traceStorageDir: string;
+  private _resourcesDir: string;
   private _browserPromise: Promise<playwright.Browser>;
-  private _serverPromise: Promise<SnapshotServer>;
+  private _snapshotServer: SnapshotServer;
   private _traceModel: TraceModel;
   private _rendering = new Map<ActionEntry, Promise<Buffer | undefined>>();
   private _lock = new Lock(3);
 
-  constructor(resourcesDir: string, traceModel: TraceModel) {
-    this._traceStorageDir = resourcesDir;
+  constructor(snapshotServer: SnapshotServer, resourcesDir: string, traceModel: TraceModel) {
+    this._snapshotServer = snapshotServer;
+    this._resourcesDir = resourcesDir;
     this._traceModel = traceModel;
     this._browserPromise = playwright.chromium.launch();
-    this._serverPromise = SnapshotServer.create(undefined, resourcesDir, traceModel, undefined);
   }
 
   generateScreenshot(actionId: string): Promise<Buffer | undefined> {
-    const { context, action, page } = actionById(this._traceModel, actionId);
+    const { context, action } = actionById(this._traceModel, actionId);
     if (!this._rendering.has(action)) {
-      this._rendering.set(action, this._render(context, page, action).then(body => {
+      this._rendering.set(action, this._render(context, action).then(body => {
         this._rendering.delete(action);
         return body;
       }));
@@ -50,8 +50,8 @@ export class ScreenshotGenerator {
     return this._rendering.get(action)!;
   }
 
-  private async _render(contextEntry: ContextEntry, pageEntry: PageEntry, actionEntry: ActionEntry): Promise<Buffer | undefined> {
-    const imageFileName = path.join(this._traceStorageDir, actionEntry.action.timestamp + '-screenshot.png');
+  private async _render(contextEntry: ContextEntry, actionEntry: ActionEntry): Promise<Buffer | undefined> {
+    const imageFileName = path.join(this._resourcesDir, actionEntry.action.timestamp + '-screenshot.png');
     try {
       return await fsReadFileAsync(imageFileName);
     } catch (e) {
@@ -60,7 +60,6 @@ export class ScreenshotGenerator {
 
     const { action } = actionEntry;
     const browser = await this._browserPromise;
-    const server = await this._serverPromise;
 
     await this._lock.obtain();
 
@@ -70,15 +69,11 @@ export class ScreenshotGenerator {
     });
 
     try {
-      await page.goto(server.snapshotRootUrl());
-      await page.evaluate(async () => {
-        navigator.serviceWorker.register('/service-worker.js');
-        await new Promise(resolve => navigator.serviceWorker.oncontrollerchange = resolve);
-      });
+      await page.goto(this._snapshotServer.snapshotRootUrl());
 
       const snapshots = action.snapshots || [];
       const snapshotId = snapshots.length ? snapshots[0].snapshotId : undefined;
-      const snapshotUrl = server.snapshotUrl(action.pageId!, snapshotId, action.endTime);
+      const snapshotUrl = this._snapshotServer.snapshotUrl(action.pageId!, snapshotId, action.endTime);
       console.log('Generating screenshot for ' + action.action); // eslint-disable-line no-console
       await page.evaluate(snapshotUrl => (window as any).showSnapshot(snapshotUrl), snapshotUrl);
 
diff --git a/src/cli/traceViewer/snapshotServer.ts b/src/cli/traceViewer/snapshotServer.ts
index 8b1e94cd17..4d93a8fda9 100644
--- a/src/cli/traceViewer/snapshotServer.ts
+++ b/src/cli/traceViewer/snapshotServer.ts
@@ -18,29 +18,16 @@ import * as http from 'http';
 import * as fs from 'fs';
 import * as path from 'path';
 import type { TraceModel, trace } from './traceModel';
-import type { ScreenshotGenerator } from './screenshotGenerator';
+import { TraceServer } from './traceServer';
 
 export class SnapshotServer {
-  static async create(traceViewerDir: string | undefined, resourcesDir: string | undefined, traceModel: TraceModel, screenshotGenerator: ScreenshotGenerator | undefined): Promise<SnapshotServer> {
-    const server = new SnapshotServer(traceViewerDir, resourcesDir, traceModel, screenshotGenerator);
-    await new Promise(cb => server._server.once('listening', cb));
-    return server;
-  }
-
-  private _traceViewerDir: string | undefined;
   private _resourcesDir: string | undefined;
-  private _traceModel: TraceModel;
-  private _server: http.Server;
+  private _server: TraceServer;
   private _resourceById: Map<string, trace.NetworkResourceTraceEvent>;
-  private _screenshotGenerator: ScreenshotGenerator | undefined;
 
-  constructor(traceViewerDir: string | undefined, resourcesDir: string | undefined, traceModel: TraceModel, screenshotGenerator: ScreenshotGenerator | undefined) {
-    this._traceViewerDir = traceViewerDir;
+  constructor(server: TraceServer, traceModel: TraceModel, resourcesDir: string | undefined) {
     this._resourcesDir = resourcesDir;
-    this._traceModel = traceModel;
-    this._screenshotGenerator = screenshotGenerator;
-    this._server = http.createServer(this._onRequest.bind(this));
-    this._server.listen();
+    this._server = server;
 
     this._resourceById = new Map();
     for (const contextEntry of traceModel.contexts) {
@@ -50,74 +37,25 @@ export class SnapshotServer {
         pageEntry.resources.forEach(r => this._resourceById.set(r.resourceId, r));
       }
     }
-  }
 
-  private _urlPrefix() {
-    const address = this._server.address();
-    return typeof address === 'string' ? address : `http://127.0.0.1:${address.port}`;
-  }
-
-  traceViewerUrl(relative: string) {
-    return this._urlPrefix() + '/traceviewer/' + relative;
+    server.routePath('/snapshot/', this._serveSnapshotRoot.bind(this), true);
+    server.routePath('/snapshot/service-worker.js', this._serveServiceWorker.bind(this));
+    server.routePrefix('/resources/', this._serveResource.bind(this));
   }
 
   snapshotRootUrl() {
-    return this._urlPrefix() + '/snapshot/';
+    return this._server.urlPrefix() + '/snapshot/';
   }
 
   snapshotUrl(pageId: string, snapshotId?: string, timestamp?: number) {
+    // Prefer snapshotId over timestamp.
     if (snapshotId)
-      return this._urlPrefix() + `/snapshot/pageId/${pageId}/snapshotId/${snapshotId}/main`;
+      return this._server.urlPrefix() + `/snapshot/pageId/${pageId}/snapshotId/${snapshotId}/main`;
     if (timestamp)
-      return this._urlPrefix() + `/snapshot/pageId/${pageId}/timestamp/${timestamp}/main`;
+      return this._server.urlPrefix() + `/snapshot/pageId/${pageId}/timestamp/${timestamp}/main`;
     return 'data:text/html,Snapshot is not available';
   }
 
-  private _onRequest(request: http.IncomingMessage, response: http.ServerResponse) {
-    // This server serves:
-    // - "/traceviewer/..." - our frontend;
-    // - "/sha1/<sha1>" - trace resources;
-    // - "/tracemodel" - json with trace model;
-    // - "/resources/<resourceId>" - network resources from the trace;
-    // - "/file?filePath" - local files for sources tab;
-    // - "/action-preview/..." - lazily generated action previews;
-    // - "/snapshot/" - root for snapshot frame;
-    // - "/snapshot/pageId/..." - actual snapshot html;
-    // - "/service-worker.js" - service worker that intercepts snapshot resources
-    //   and translates them into "/resources/<resourceId>".
-
-    request.on('error', () => response.end());
-    if (!request.url)
-      return response.end();
-
-    const url = new URL('http://localhost' + request.url);
-    // These two entry points do not require referrer check.
-    if (url.pathname.startsWith('/traceviewer/') && this._serveTraceViewer(request, response, url.pathname))
-      return;
-    if (url.pathname === '/snapshot/' && this._serveSnapshotRoot(request, response))
-      return;
-
-    // Only serve the rest when referrer is present to avoid exposure.
-    const hasReferrer = request.headers['referer'] && request.headers['referer'].startsWith(this._urlPrefix());
-    if (!hasReferrer)
-      return response.end();
-    if (url.pathname.startsWith('/resources/') && this._serveResource(request, response, url.pathname))
-      return;
-    if (url.pathname.startsWith('/sha1/') && this._serveSha1(request, response, url.pathname))
-      return;
-    if (url.pathname.startsWith('/action-preview/') && this._serveActionPreview(request, response, url.pathname))
-      return;
-    if (url.pathname === '/file' && this._serveFile(request, response, url.search))
-      return;
-    if (url.pathname === '/service-worker.js' && this._serveServiceWorker(request, response))
-      return;
-    if (url.pathname === '/tracemodel' && this._serveTraceModel(request, response))
-      return;
-
-    response.statusCode = 404;
-    response.end();
-  }
-
   private _serveSnapshotRoot(request: http.IncomingMessage, response: http.ServerResponse): boolean {
     response.statusCode = 200;
     response.setHeader('Cache-Control', 'public, max-age=31536000');
@@ -139,13 +77,18 @@ export class SnapshotServer {
       </style>
       <body>
         <script>
+          navigator.serviceWorker.register('./service-worker.js');
+
+          let showPromise = Promise.resolve();
+          if (!navigator.serviceWorker.controller)
+            showPromise = new Promise(resolve => navigator.serviceWorker.oncontrollerchange = resolve);
+
           let current = document.createElement('iframe');
           document.body.appendChild(current);
           let next = document.createElement('iframe');
           document.body.appendChild(next);
           next.style.visibility = 'hidden';
 
-          let showPromise = Promise.resolve();
           let nextUrl;
           window.showSnapshot = url => {
             if (!nextUrl) {
@@ -172,7 +115,7 @@ export class SnapshotServer {
   }
 
   private _serveServiceWorker(request: http.IncomingMessage, response: http.ServerResponse): boolean {
-    function serviceWorkerMain(self: any /* ServiceWorkerGlobalScope */, urlPrefix: string) {
+    function serviceWorkerMain(self: any /* ServiceWorkerGlobalScope */) {
       let traceModel: TraceModel;
 
       function preprocessModel() {
@@ -195,7 +138,7 @@ export class SnapshotServer {
       }
 
       self.addEventListener('install', function(event: any) {
-        event.waitUntil(fetch('./tracemodel').then(async response => {
+        event.waitUntil(fetch('/tracemodel').then(async response => {
           traceModel = await response.json();
           preprocessModel();
         }));
@@ -212,8 +155,8 @@ export class SnapshotServer {
           parts.shift();
         if (!parts[parts.length - 1])
           parts.pop();
-        // snapshot/pageId/<pageId>/snapshotId/<snapshotId>/<frameId>
-        // snapshot/pageId/<pageId>/timestamp/<timestamp>/<frameId>
+        // - /snapshot/pageId/<pageId>/snapshotId/<snapshotId>/<frameId>
+        // - /snapshot/pageId/<pageId>/timestamp/<timestamp>/<frameId>
         if (parts.length !== 6 || parts[0] !== 'snapshot' || parts[1] !== 'pageId' || (parts[3] !== 'snapshotId' && parts[3] !== 'timestamp'))
           throw new Error(`Unexpected url "${urlString}"`);
         return {
@@ -243,13 +186,11 @@ export class SnapshotServer {
       }
 
       async function doFetch(event: any /* FetchEvent */): Promise<Response> {
-        for (const prefix of ['/traceviewer/', '/sha1/', '/resources/', '/file?', '/action-preview/']) {
-          if (event.request.url.startsWith(urlPrefix + prefix))
-            return fetch(event.request);
-        }
-        for (const exact of ['/tracemodel', '/service-worker.js', '/snapshot/']) {
-          if (event.request.url === urlPrefix + exact)
+        try {
+          const pathname = new URL(event.request.url).pathname;
+          if (pathname === '/snapshot/service-worker.js' || pathname === '/snapshot/')
             return fetch(event.request);
+        } catch (e) {
         }
 
         const request = event.request;
@@ -308,9 +249,20 @@ export class SnapshotServer {
           return respond404();
         const resourceOverride = snapshotEvent.snapshot.resourceOverrides.find(o => o.url === request.url);
         const overrideSha1 = resourceOverride ? resourceOverride.sha1 : undefined;
-        if (overrideSha1)
-          return fetch(`/resources/${resource.resourceId}/override/${overrideSha1}`);
-        return fetch(`/resources/${resource.resourceId}`);
+
+        const response = overrideSha1 ?
+          await fetch(`/resources/${resource.resourceId}/override/${overrideSha1}`) :
+          await fetch(`/resources/${resource.resourceId}`);
+        // We make a copy of the response, instead of just forwarding,
+        // so that response url is not inherited as "/resources/...", but instead
+        // as the original request url.
+        // Response url turns into resource base uri that is used to resolve
+        // relative links, e.g. url(/foo/bar) in style sheets.
+        return new Response(response.body, {
+          status: response.status,
+          statusText: response.statusText,
+          headers: response.headers,
+        });
       }
 
       self.addEventListener('fetch', function(event: any) {
@@ -321,22 +273,17 @@ export class SnapshotServer {
     response.statusCode = 200;
     response.setHeader('Cache-Control', 'public, max-age=31536000');
     response.setHeader('Content-Type', 'application/javascript');
-    response.end(`(${serviceWorkerMain.toString()})(self, '${this._urlPrefix()}')`);
+    response.end(`(${serviceWorkerMain.toString()})(self)`);
     return true;
   }
 
-  private _serveTraceModel(request: http.IncomingMessage, response: http.ServerResponse): boolean {
-    response.statusCode = 200;
-    response.setHeader('Content-Type', 'application/json');
-    response.end(JSON.stringify(this._traceModel));
-    return true;
-  }
-
-  private _serveResource(request: http.IncomingMessage, response: http.ServerResponse, pathname: string): boolean {
+  private _serveResource(request: http.IncomingMessage, response: http.ServerResponse): boolean {
     if (!this._resourcesDir)
       return false;
 
-    const parts = pathname.split('/');
+    // - /resources/<resourceId>
+    // - /resources/<resourceId>/override/<overrideSha1>
+    const parts = request.url!.split('/');
     if (!parts[0])
       parts.shift();
     if (!parts[parts.length - 1])
@@ -360,7 +307,6 @@ export class SnapshotServer {
       return false;
     const sha1 = overrideSha1 || resource.responseSha1;
     try {
-      // console.log(`reading ${sha1} as ${resource.contentType}...`);
       const content = fs.readFileSync(path.join(this._resourcesDir, sha1));
       response.statusCode = 200;
       let contentType = resource.contentType;
@@ -377,87 +323,9 @@ export class SnapshotServer {
       response.removeHeader('Content-Length');
       response.setHeader('Content-Length', content.byteLength);
       response.end(content);
-      // console.log(`done`);
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-
-  private _serveActionPreview(request: http.IncomingMessage, response: http.ServerResponse, pathname: string): boolean {
-    if (!this._screenshotGenerator)
-      return false;
-    const fullPath = pathname.substring('/action-preview/'.length);
-    const actionId = fullPath.substring(0, fullPath.indexOf('.png'));
-    this._screenshotGenerator.generateScreenshot(actionId).then(body => {
-      if (!body) {
-        response.statusCode = 404;
-        response.end();
-      } else {
-        response.statusCode = 200;
-        response.setHeader('Content-Type', 'image/png');
-        response.setHeader('Content-Length', body.byteLength);
-        response.end(body);
-      }
-    });
-    return true;
-  }
-
-  private _serveSha1(request: http.IncomingMessage, response: http.ServerResponse, pathname: string): boolean {
-    if (!this._resourcesDir)
-      return false;
-    const parts = pathname.split('/');
-    if (!parts[0])
-      parts.shift();
-    if (!parts[parts.length - 1])
-      parts.pop();
-    if (parts.length !== 2 || parts[0] !== 'sha1')
-      return false;
-    const sha1 = parts[1];
-    return this._serveStaticFile(response, path.join(this._resourcesDir, sha1));
-  }
-
-  private _serveFile(request: http.IncomingMessage, response: http.ServerResponse, search: string): boolean {
-    if (search[0] !== '?')
-      return false;
-    return this._serveStaticFile(response, search.substring(1));
-  }
-
-  private _serveTraceViewer(request: http.IncomingMessage, response: http.ServerResponse, pathname: string): boolean {
-    if (!this._traceViewerDir)
-      return false;
-    const relativePath = pathname.substring('/traceviewer/'.length);
-    const absolutePath = path.join(this._traceViewerDir, ...relativePath.split('/'));
-    return this._serveStaticFile(response, absolutePath, { 'Service-Worker-Allowed': '/' });
-  }
-
-  private _serveStaticFile(response: http.ServerResponse, absoluteFilePath: string, headers?: { [name: string]: string }): boolean {
-    try {
-      const content = fs.readFileSync(absoluteFilePath);
-      response.statusCode = 200;
-      const contentType = extensionToMime[path.extname(absoluteFilePath).substring(1)] || 'application/octet-stream';
-      response.setHeader('Content-Type', contentType);
-      response.setHeader('Content-Length', content.byteLength);
-      for (const [name, value] of Object.entries(headers || {}))
-        response.setHeader(name, value);
-      response.end(content);
       return true;
     } catch (e) {
       return false;
     }
   }
 }
-
-const extensionToMime: { [key: string]: string } = {
-  'css': 'text/css',
-  'html': 'text/html',
-  'jpeg': 'image/jpeg',
-  'jpg': 'image/jpeg',
-  'js': 'application/javascript',
-  'png': 'image/png',
-  'ttf': 'font/ttf',
-  'svg': 'image/svg+xml',
-  'webp': 'image/webp',
-  'woff': 'font/woff',
-  'woff2': 'font/woff2',
-};
diff --git a/src/cli/traceViewer/traceServer.ts b/src/cli/traceViewer/traceServer.ts
new file mode 100644
index 0000000000..bf6715a563
--- /dev/null
+++ b/src/cli/traceViewer/traceServer.ts
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as http from 'http';
+import * as fs from 'fs';
+import * as path from 'path';
+import type { TraceModel } from './traceModel';
+
+export type ServerRouteHandler = (request: http.IncomingMessage, response: http.ServerResponse) => boolean;
+
+export class TraceServer {
+  private _traceModel: TraceModel;
+  private _server: http.Server | undefined;
+  private _urlPrefix: string;
+  private _routes: { prefix?: string, exact?: string, needsReferrer: boolean, handler: ServerRouteHandler }[] = [];
+
+  constructor(traceModel: TraceModel) {
+    this._traceModel = traceModel;
+    this._urlPrefix = '';
+
+    const traceModelHandler: ServerRouteHandler = (request, response) => {
+      response.statusCode = 200;
+      response.setHeader('Content-Type', 'application/json');
+      response.end(JSON.stringify(this._traceModel));
+      return true;
+    };
+    this.routePath('/tracemodel', traceModelHandler);
+  }
+
+  routePrefix(prefix: string, handler: ServerRouteHandler, skipReferrerCheck?: boolean) {
+    this._routes.push({ prefix, handler, needsReferrer: !skipReferrerCheck });
+  }
+
+  routePath(path: string, handler: ServerRouteHandler, skipReferrerCheck?: boolean) {
+    this._routes.push({ exact: path, handler, needsReferrer: !skipReferrerCheck });
+  }
+
+  async start(): Promise<string> {
+    this._server = http.createServer(this._onRequest.bind(this));
+    this._server.listen();
+    await new Promise(cb => this._server!.once('listening', cb));
+    const address = this._server.address();
+    this._urlPrefix = typeof address === 'string' ? address : `http://127.0.0.1:${address.port}`;
+    return this._urlPrefix;
+  }
+
+  async stop() {
+    await new Promise(cb => this._server!.close(cb));
+  }
+
+  urlPrefix() {
+    return this._urlPrefix;
+  }
+
+  serveFile(response: http.ServerResponse, absoluteFilePath: string, headers?: { [name: string]: string }): boolean {
+    try {
+      const content = fs.readFileSync(absoluteFilePath);
+      response.statusCode = 200;
+      const contentType = extensionToMime[path.extname(absoluteFilePath).substring(1)] || 'application/octet-stream';
+      response.setHeader('Content-Type', contentType);
+      response.setHeader('Content-Length', content.byteLength);
+      for (const [name, value] of Object.entries(headers || {}))
+        response.setHeader(name, value);
+      response.end(content);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  private _onRequest(request: http.IncomingMessage, response: http.ServerResponse) {
+    request.on('error', () => response.end());
+    try {
+      if (!request.url) {
+        response.end();
+        return;
+      }
+      const url = new URL('http://localhost' + request.url);
+      const hasReferrer = request.headers['referer'] && request.headers['referer'].startsWith(this._urlPrefix);
+      for (const route of this._routes) {
+        if (route.needsReferrer && !hasReferrer)
+          continue;
+        if (route.exact && url.pathname === route.exact && route.handler(request, response))
+          return;
+        if (route.prefix && url.pathname.startsWith(route.prefix) && route.handler(request, response))
+          return;
+      }
+      response.statusCode = 404;
+      response.end();
+    } catch (e) {
+      response.end();
+    }
+  }
+}
+
+const extensionToMime: { [key: string]: string } = {
+  'css': 'text/css',
+  'html': 'text/html',
+  'jpeg': 'image/jpeg',
+  'jpg': 'image/jpeg',
+  'js': 'application/javascript',
+  'png': 'image/png',
+  'ttf': 'font/ttf',
+  'svg': 'image/svg+xml',
+  'webp': 'image/webp',
+  'woff': 'font/woff',
+  'woff2': 'font/woff2',
+};
diff --git a/src/cli/traceViewer/traceViewer.ts b/src/cli/traceViewer/traceViewer.ts
index 5b6fcd75f8..d43619f7c7 100644
--- a/src/cli/traceViewer/traceViewer.ts
+++ b/src/cli/traceViewer/traceViewer.ts
@@ -22,6 +22,7 @@ import { ScreenshotGenerator } from './screenshotGenerator';
 import { readTraceFile, TraceModel } from './traceModel';
 import type { TraceEvent } from '../../trace/traceTypes';
 import { SnapshotServer } from './snapshotServer';
+import { ServerRouteHandler, TraceServer } from './traceServer';
 
 const fsReadFileAsync = util.promisify(fs.readFile.bind(fs));
 
@@ -80,14 +81,81 @@ class TraceViewer {
 
   async show() {
     const browser = await playwright.chromium.launch({ headless: false });
-    const server = await SnapshotServer.create(
-        path.join(__dirname, '..', '..', 'web'),
-        this._document ? this._document.resourcesDir : undefined,
-        this._document ? this._document.model : emptyModel,
-        this._document ? new ScreenshotGenerator(this._document.resourcesDir, this._document.model) : undefined);
+
+    // Served by TraceServer
+    // - "/tracemodel" - json with trace model.
+    //
+    // Served by TraceViewer
+    // - "/traceviewer/..." - our frontend.
+    // - "/file?filePath" - local files, used by sources tab.
+    // - "/action-preview/..." - lazily generated action previews.
+    // - "/sha1/<sha1>" - trace resource bodies, used by network previews.
+    //
+    // Served by SnapshotServer
+    // - "/resources/<resourceId>" - network resources from the trace.
+    // - "/snapshot/" - root for snapshot frame.
+    // - "/snapshot/pageId/..." - actual snapshot html.
+    // - "/snapshot/service-worker.js" - service worker that intercepts snapshot resources
+    //   and translates them into "/resources/<resourceId>".
+
+    const server = new TraceServer(this._document ? this._document.model : emptyModel);
+    const snapshotServer = new SnapshotServer(server, this._document ? this._document.model : emptyModel, this._document ? this._document.resourcesDir : undefined);
+    const screenshotGenerator = this._document ? new ScreenshotGenerator(snapshotServer, this._document.resourcesDir, this._document.model) : undefined;
+
+    const traceViewerHandler: ServerRouteHandler = (request, response) => {
+      const relativePath = request.url!.substring('/traceviewer/'.length);
+      const absolutePath = path.join(__dirname, '..', '..', 'web', ...relativePath.split('/'));
+      return server.serveFile(response, absolutePath);
+    };
+    server.routePrefix('/traceviewer/', traceViewerHandler, true);
+
+    const actionPreviewHandler: ServerRouteHandler = (request, response) => {
+      if (!screenshotGenerator)
+        return false;
+      const fullPath = request.url!.substring('/action-preview/'.length);
+      const actionId = fullPath.substring(0, fullPath.indexOf('.png'));
+      screenshotGenerator.generateScreenshot(actionId).then(body => {
+        if (!body) {
+          response.statusCode = 404;
+          response.end();
+        } else {
+          response.statusCode = 200;
+          response.setHeader('Content-Type', 'image/png');
+          response.setHeader('Content-Length', body.byteLength);
+          response.end(body);
+        }
+      });
+      return true;
+    };
+    server.routePrefix('/action-preview/', actionPreviewHandler);
+
+    const fileHandler: ServerRouteHandler = (request, response) => {
+      try {
+        const url = new URL('http://localhost' + request.url!);
+        const search = url.search;
+        if (search[0] !== '?')
+          return false;
+        return server.serveFile(response, search.substring(1));
+      } catch (e) {
+        return false;
+      }
+    };
+    server.routePath('/file', fileHandler);
+
+    const sha1Handler: ServerRouteHandler = (request, response) => {
+      if (!this._document)
+        return false;
+      const sha1 = request.url!.substring('/sha1/'.length);
+      if (sha1.includes('/'))
+        return false;
+      return server.serveFile(response, path.join(this._document.resourcesDir, sha1));
+    };
+    server.routePrefix('/sha1/', sha1Handler);
+
+    const urlPrefix = await server.start();
     const uiPage = await browser.newPage({ viewport: null });
     uiPage.on('close', () => process.exit(0));
-    await uiPage.goto(server.traceViewerUrl('traceViewer/index.html'));
+    await uiPage.goto(urlPrefix + '/traceviewer/traceViewer/index.html');
   }
 }
 
diff --git a/src/web/traceViewer/index.tsx b/src/web/traceViewer/index.tsx
index 240171b10e..22d491124b 100644
--- a/src/web/traceViewer/index.tsx
+++ b/src/web/traceViewer/index.tsx
@@ -22,9 +22,6 @@ import { applyTheme } from '../theme';
 import '../common.css';
 
 (async () => {
-  navigator.serviceWorker.register('/service-worker.js');
-  if (!navigator.serviceWorker.controller)
-    await new Promise(resolve => navigator.serviceWorker.oncontrollerchange = resolve);
   applyTheme();
   const traceModel = await fetch('/tracemodel').then(response => response.json());
   ReactDOM.render(<Workbench traceModel={traceModel} />, document.querySelector('#root'));
diff --git a/src/web/traceViewer/ui/propertiesTabbedPane.tsx b/src/web/traceViewer/ui/propertiesTabbedPane.tsx
index 48f4110fa3..47a15594f3 100644
--- a/src/web/traceViewer/ui/propertiesTabbedPane.tsx
+++ b/src/web/traceViewer/ui/propertiesTabbedPane.tsx
@@ -76,8 +76,6 @@ const SnapshotTab: React.FunctionComponent<{
 }> = ({ actionEntry, snapshotSize, selectedTime, boundaries }) => {
   const [measure, ref] = useMeasure<HTMLDivElement>();
   const [snapshotIndex, setSnapshotIndex] = React.useState(0);
-  const origin = location.href.substring(0, location.href.indexOf(location.pathname));
-  const snapshotIframeUrl = origin + '/snapshot/';
 
   let snapshots: { name: string, snapshotId?: string, snapshotTime?: number }[] = [];
   snapshots = (actionEntry ? (actionEntry.action.snapshots || []) : []).slice();
@@ -91,15 +89,16 @@ const SnapshotTab: React.FunctionComponent<{
     if (!actionEntry || !iframeRef.current)
       return;
 
+    // TODO: this logic is copied from SnapshotServer. Find a way to share.
     let snapshotUrl = 'data:text/html,Snapshot is not available';
     if (selectedTime) {
-      snapshotUrl = origin + `/snapshot/pageId/${actionEntry.action.pageId!}/timestamp/${selectedTime}/main`;
+      snapshotUrl = `/snapshot/pageId/${actionEntry.action.pageId!}/timestamp/${selectedTime}/main`;
     } else {
       const snapshot = snapshots[snapshotIndex];
       if (snapshot && snapshot.snapshotTime)
-        snapshotUrl = origin + `/snapshot/pageId/${actionEntry.action.pageId!}/timestamp/${snapshot.snapshotTime}/main`;
+        snapshotUrl = `/snapshot/pageId/${actionEntry.action.pageId!}/timestamp/${snapshot.snapshotTime}/main`;
       else if (snapshot && snapshot.snapshotId)
-        snapshotUrl = origin + `/snapshot/pageId/${actionEntry.action.pageId!}/snapshotId/${snapshot.snapshotId}/main`;
+        snapshotUrl = `/snapshot/pageId/${actionEntry.action.pageId!}/snapshotId/${snapshot.snapshotId}/main`;
     }
 
     try {
@@ -129,7 +128,7 @@ const SnapshotTab: React.FunctionComponent<{
         height: snapshotSize.height + 'px',
         transform: `translate(${-snapshotSize.width * (1 - scale) / 2}px, ${-snapshotSize.height * (1 - scale) / 2}px) scale(${scale})`,
       }}>
-        <iframe ref={iframeRef} id='snapshot' name='snapshot' src={snapshotIframeUrl}></iframe>
+        <iframe ref={iframeRef} id='snapshot' name='snapshot' src='/snapshot/'></iframe>
       </div>
     </div>
   </div>;