diff --git a/angular-cli.json b/angular-cli.json
index b95b48b22f19..ab3c1cbb0dda 100644
--- a/angular-cli.json
+++ b/angular-cli.json
@@ -16,7 +16,7 @@
       "test": "test.ts",
       "tsconfig": "tsconfig.json",
       "prefix": "app",
-      "serviceWorker": false,
+      "serviceWorker": true,
       "styles": [
         "main.scss",
         "highlightjs/material-light.css",
diff --git a/ngsw-manifest.json b/ngsw-manifest.json
deleted file mode 100644
index 4df2cda4d2c0..000000000000
--- a/ngsw-manifest.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "external": {
-    "urls": [
-      {"url": "https://fonts.googleapis.com/icon?family=Material+Icons"},
-      {"url": "https://fonts.googleapis.com/css?family=Roboto:300,400,500|Roboto+Mono:300"},
-      {"url": "https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"},
-      {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"}
-    ]
-  }
-}
diff --git a/src/app/app-module.ts b/src/app/app-module.ts
index 02fad8cfb50c..9560b519d93e 100644
--- a/src/app/app-module.ts
+++ b/src/app/app-module.ts
@@ -33,6 +33,8 @@ import {
   CanActivateComponentSidenav
 } from './pages/component-sidenav/component-sidenav-can-load-guard';
 import {HttpClientModule} from '@angular/common/http';
+import {ServiceWorkerModule} from '@angular/service-worker';
+import {environment} from '../environments/environment';
 
 @NgModule({
   imports: [
@@ -44,7 +46,7 @@ import {HttpClientModule} from '@angular/common/http';
     HttpClientModule,
     MatNativeDateModule,
     RouterModule.forRoot(MATERIAL_DOCS_ROUTES),
-
+    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
     ComponentCategoryListModule,
     ComponentHeaderModule,
     ComponentListModule,
diff --git a/src/ngsw-config.json b/src/ngsw-config.json
new file mode 100644
index 000000000000..2dc816d8e2cd
--- /dev/null
+++ b/src/ngsw-config.json
@@ -0,0 +1,38 @@
+{
+  "index": "/index.html",
+  "assetGroups": [{
+    "name": "app",
+    "installMode": "prefetch",
+    "resources": {
+      "files": [
+        "/favicon.ico",
+        "/index.html"
+      ],
+      "versionedFiles": [
+        "/*.bundle.css",
+        "/*.bundle.js",
+        "/*.chunk.js"
+      ]
+    }
+  }, {
+    "name": "assets",
+    "installMode": "prefetch",
+    "resources": {
+      "files": [
+        "/assets/**"
+      ]
+    }
+  }, {
+    "name": "static-assets",
+    "installMode": "lazy",
+    "updateMode": "prefetch",
+    "resources": {
+      "urls":  [
+        "https://fonts.googleapis.com/icon?family=Material+Icons",
+        "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono",
+        "https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js",
+        "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"
+      ]
+    }
+  }]
+}
\ No newline at end of file