fix: add server static asset cache headers

Author: patrickmichalina

package-lock.json

@@ -103,6 +103,7 @@
     "jest-zone-patch": "0.0.8",
     "js-cookie": "^2.2.0",
     "lru-cache": "^4.1.3",
+    "ms": "^2.1.1",
     "ng2-fused": "^0.5.1",
     "node-sass": "^4.9.2",
     "npm": "^6.2.0",

package.json

@@ -6,7 +6,8 @@ import {
   appComponentCssTemplate,
   appComponentHtmlTemplate,
   appIndex,
-  favicon
+  favicon,
+  ngsw
 } from '../templates/core/app'
 import { writeFile_, mkDirAndContinueIfExists_ } from '../utilities/rx-fs'
 import { forkJoin } from 'rxjs'
@@ -63,21 +64,10 @@ export function generateCoreAngularApp(projectDir: string, universal = true) {
         writeFile_(`${baseDir}/app.component.scss`, appComponentCssTemplate), // TODO: write component generator function instead
         writeFile_(`${baseDir}/app.component.html`, appComponentHtmlTemplate),
         writeFile_(`${baseDir}/index.pug`, appIndex),
-        writeFile_(`${baseDir}/favicon.svg`, favicon)
+        writeFile_(`${baseDir}/favicon.svg`, favicon),
+        writeFile_(`${baseDir}/ngsw.json`, ngsw)
       ])
     )
-    // flatMap(() =>
-    //   mkDirAndContinueIfExists_(resolve(baseDir, 'home')).pipe(
-    //     flatMap(() =>
-    //       forkJoin([
-    //         // writeFile_(
-    //         //   `${baseDir}/home/home.component.ts`,
-    //         //   homeComponentTemplate
-    //         // )
-    //       ])
-    //     )
-    //   )
-    // )
   )
 }
 

src/generators/angular-core.gen.ts

@@ -7,6 +7,7 @@ import * as appComponentHtmlTemplate from './app.component.html.txt'
 import * as homeComponentTemplate from './home.component.ts.txt'
 import * as appIndex from './index.pug.txt'
 import * as favicon from './favicon.svg.txt'
+import * as ngsw from './ngsw.json.txt'
 
 export {
   appModuleTemplate,
@@ -17,5 +18,6 @@ export {
   appComponentCssTemplate,
   appComponentHtmlTemplate,
   appIndex,
-  favicon
+  favicon,
+  ngsw
 }

src/templates/core/app/index.ts

@@ -0,0 +1,29 @@
+{
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": ["/index.html", "/ngsw-worker.js", "/js/**/**", "!/js/**/*.(br|gzip)"]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "lazy",
+      "resources": {
+        "files": ["/assets/**/**"]
+      }
+    },
+    {
+      "name": "fonts",
+      "resources": {
+        "urls": [
+          "https://fonts.googleapis.com/**",
+          "https://fonts.gstatic.com/**"
+        ]
+      }
+    }
+  ]
+}

src/templates/core/app/ngsw.json.txt

@@ -1,11 +1,12 @@
 import * as express from 'express'
 import * as cookieParser from 'cookie-parser'
+import * as lru from 'lru-cache'
 import { resolve } from 'path'
 import { ngExpressEngine } from '@nguniversal/express-engine'
 import { AppServerModule } from './server.angular.module'
 import { stat, createReadStream } from 'fs'
 import { LRU_CACHE } from 'fusing-angular-cli/.build/modules/src/modules/firebase'
-import * as lru from 'lru-cache'
+const ms = require('ms')
 
 const environment = JSON.parse(process.env.FUSING_ANGULAR || '{}')
 const isLocalDevelopmentServer = environment.ENV === 'dev'
@@ -25,6 +26,28 @@ const publicDir = `${dir}/public`
 
 require('reload')(expressApp)
 
+function seconds(time: string) {
+  return ms(time) / 1000
+}
+
+function staticCacheOptionsGen(time: string, disableCacheForLocalDev = true) {
+  return {
+    index: false,
+    setHeaders: (res: express.Response) => {
+      res.setHeader(
+        'Expires',
+        disableCacheForLocalDev
+          ? new Date(Date.now() + seconds(time)).toUTCString()
+          : new Date(Date.now()).toUTCString()
+      )
+      res.setHeader(
+        'Cache-Control',
+        disableCacheForLocalDev ? 'max-age=0' : `max-age=${seconds(time)}`
+      )
+    }
+  }
+}
+
 expressApp.use(cookieParser())
 
 expressApp.set('x-powered-by', false)
@@ -53,7 +76,10 @@ function writeJsHeaders(res: express.Response, contentLength: number, type: stri
   res.writeHead(200, {
     "Content-Type": "application/javascript",
     "Content-Encoding": type,
-    "Content-Length": contentLength
+    "Content-Length": contentLength,
+    "Cache-Control": isLocalDevelopmentServer
+      ? "public, no-cache"
+      : `public, max-age=${seconds('180d')}, s-maxage=${seconds('180d')}`
   })
 }
 
@@ -72,11 +98,11 @@ function checkReturnJsFile(filePath: string, res: express.Response, encoding: st
   })
 }
 
-expressApp.use('/robots.txt', express.static(`${publicDir}/assets/robots.txt`))
-expressApp.use('/assets', express.static(`${publicDir}/assets`))
-expressApp.use('/favicon.ico', express.static(`${publicDir}/assets/favicons/favicon.ico`))
-expressApp.use('/manifest.json', express.static(`${publicDir}/assets/favicons/manifest.json`))
-expressApp.use('/js/ngsw.json', express.static(`${publicDir}/ngsw.json`))
+expressApp.use('/robots.txt', express.static(`${publicDir}/assets/robots.txt`, staticCacheOptionsGen('30d')))
+expressApp.use('/assets', express.static(`${publicDir}/assets`, staticCacheOptionsGen('30d')))
+expressApp.use('/favicon.ico', express.static(`${publicDir}/assets/favicons/favicon.ico`, staticCacheOptionsGen('30d')))
+expressApp.use('/manifest.json', express.static(`${publicDir}/assets/favicons/manifest.json`, staticCacheOptionsGen('30d')))
+expressApp.use('/js/ngsw.json', express.static(`${publicDir}/ngsw.json`, staticCacheOptionsGen('30d')))
 
 expressApp.get('/js/**', (req, res) => {
   const encodings = (req.get('Accept-Encoding') || '').split(',').map(a => a.trim())