From 0af7bf22ebb641ee68f3ca76ad116b226ce97e64 Mon Sep 17 00:00:00 2001
From: tristan <yangguochun@ddweilai.com>
Date: Tue, 10 Sep 2019 15:42:06 +0800
Subject: [PATCH] feat: update workbox setting

---
 config/webpack.config.prod.js | 65 ++++++++++++++++++++++++++++++++++-
 1 file changed, 64 insertions(+), 1 deletion(-)

diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index 1f8294d..fc768e9 100644
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -58,9 +58,72 @@ module.exports = merge(commonConfig, {
     }),
     new GenerateSW({
       clientsClaim: true,
-      exclude: [/\.map$/, /asset-manifest\.json$/, /index\.html$/, /chinese-colors\/$/],
+      exclude: [/\.map$/, /asset-manifest\.json$/, /\.(?:png|jpg|jpeg|svg)$/, /\.js$/],
       importWorkboxFrom: 'local',
       navigateFallback: 'index.html',
+      //定义运行时缓存（可接受多个json对象）
+      runtimeCaching: [
+        {
+          urlPattern: /\.html$/,
+          // 在缓存时使用 StaleWhileRevalidate 策略.
+          handler: 'StaleWhileRevalidate',
+          options: {
+            // 定义缓存这些图片的 cache名称
+            cacheName: 'my-html-cache',
+
+            //配置 expiration
+            expiration: {
+              maxEntries: 10,
+              maxAgeSeconds: 60
+            },
+
+            //配置哪些响应被认为是可缓存的
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
+        {
+          urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
+          // 在缓存时使用 StaleWhileRevalidate 策略.
+          handler: 'StaleWhileRevalidate',
+          options: {
+            // 定义缓存这些图片的 cache名称
+            cacheName: 'my-images-cache',
+
+            //配置 expiration
+            expiration: {
+              maxEntries: 10,
+              maxAgeSeconds: 60
+            },
+
+            //配置哪些响应被认为是可缓存的
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        },
+        {
+          urlPattern: /\.js$/,
+          // 在缓存时使用 StaleWhileRevalidate 策略.
+          handler: 'StaleWhileRevalidate',
+          options: {
+            // 定义缓存这些图片的 cache名称
+            cacheName: 'my-js-cache',
+
+            //配置 expiration
+            expiration: {
+              maxEntries: 10,
+              maxAgeSeconds: 60
+            },
+
+            //配置哪些响应被认为是可缓存的
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        }
+      ],
       navigateFallbackBlacklist: [
         // Exclude URLs starting with /_, as they're likely an API call
         new RegExp('^/_'),