👌 优化 SW 性能

Author: CCKNBC

_config.butterfly.yml

@@ -947,9 +947,9 @@ pjax:
   enable: true
   exclude:
     - /music/
-    - /blogroll/
-    - /moments/
-    - /essay/
+    # - /blogroll/
+    # - /moments/
+    # - /essay/
     # - /about/
 
 # Inject the css and script (aplayer/meting)
@@ -1026,16 +1026,16 @@ inject:
     # - <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
     # - <div id="music" key="6208da041a763" api="https://music.mx142.ltd"></div><script id="xplayer" src="https://music.mx142.ltd/Static/player4/js/player.js" ></script>
 
+# CDN
 # Don't modify the following settings unless you know how they work
 # 非必要請不要修改
-
 CDN:
   # The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
-  # option: local/jsdelivr
-  # Dev version cannot choose jsdelivr (dev版的主題不能設置為 jsdelivr)
+  # option: local/jsdelivr/unpkg
+  # Dev version cannot choose jsdelivr/unpkg (dev版的主題不能設置為 jsdelivr/unpkg)
   internal_provider: local
   # The CDN provider of third party scripts (第三方 js 的 cdn 配置)
-  # option: local/jsdelivr
+  # option: local/jsdelivr/unpkg
   # when set it to local, you need to install hexo-butterfly-extjs
   third_party_provider: jsdelivr
   option:
@@ -1045,6 +1045,7 @@ CDN:
     # translate:
     # local_search:
     # algolia_js:
+    
     # algolia_search_v4:
     # instantsearch_v4:
     # pjax:
@@ -1089,6 +1090,7 @@ CDN:
     # prismjs_js:
     # prismjs_lineNumber_js:
     # prismjs_autoloader:
+  
   # other
   statuspage: https://ccknbc.statuspage.io/embed/script.js
   pace: https://gcore.jsdelivr.net/gh/CodeByZach/pace/pace.min.js

gulpfile.js

@@ -54,7 +54,7 @@ gulp.task('generate-service-worker', () => {
     swSrc: './sw.js',
     swDest: './public/sw.js',
     globDirectory: './public',
-    globPatterns: ['index.html','**/*.{css,js}'],
+    globPatterns: ['{index,404}.html'],
     modifyURLPrefix: {
         '': './'
     }

sw.js

@@ -51,7 +51,7 @@ workbox.precaching.precacheAndRoute(self.__WB_MANIFEST, {
 
 // CDN
 workbox.routing.registerRoute(
-    /\.(?:js|css)$/,
+    /\.(?:js|css|json)$/,
     new workbox.strategies.StaleWhileRevalidate({
         cacheName: 'assets',
         plugins: [
@@ -87,13 +87,13 @@ workbox.routing.registerRoute(
 );
 
 // Catch routing errors, like if the user is offline
-// setCatchHandler(async ({ event }) => {
-//     // Return the precached offline page if a document is being requested
-//     if (event.request.destination === 'document') {
-//         return matchPrecache('/404.html');
-//     }
-//     return Response.error();
-// });
+workbox.routing.setCatchHandler(async ({ event }) => {
+    // Return the precached offline page if a document is being requested
+    if (event.request.destination === 'document') {
+        return matchPrecache('/404.html');
+    }
+    return Response.error();
+});
 
 // Fonts
 // workbox.routing.registerRoute(
@@ -152,8 +152,143 @@ workbox.routing.registerRoute(
 //     })
 // );
 
+workbox.precaching.cleanupOutdatedCaches();
 
+// workbox.googleAnalytics.initialize();
 
-workbox.precaching.cleanupOutdatedCaches();
+const cdn = {
+    gh: {
+        jsdelivr: 'https://cdn.jsdelivr.net/gh',
+        fastly: 'https://fastly.jsdelivr.net/gh',
+        gcore: 'https://gcore.jsdelivr.net/gh',
+        testingcf: 'https://testingcf.jsdelivr.net/gh',
+        test1: 'https://test1.jsdelivr.net/gh',
+        tianli: 'https://cdn1.tianli0.top/gh'
+    },
+    combine: {
+        jsdelivr: 'https://cdn.jsdelivr.net/combine',
+        fastly: 'https://fastly.jsdelivr.net/combine',
+        gcore: 'https://gcore.jsdelivr.net/combine',
+        testingcf: 'https://testingcf.jsdelivr.net/combine',
+        test1: 'https://test1.jsdelivr.net/combine',
+        tianli: 'https://cdn1.tianli0.top/combine'
+    },
+    npm: {
+        jsdelivr: 'https://cdn.jsdelivr.net/npm',
+        fastly: 'https://fastly.jsdelivr.net/npm',
+        gcore: 'https://gcore.jsdelivr.net/npm',
+        testingcf: 'https://testingcf.jsdelivr.net/npm',
+        test1: 'https://test1.jsdelivr.net/npm',
+        eleme: 'https://npm.elemecdn.com',
+        unpkg: 'https://unpkg.com',
+        tianli: 'https://cdn1.tianli0.top/npm'
+    }
+}
+
+// self.addEventListener('install', async () => {
+//     await self.skipWaiting()
+// })
+
+// self.addEventListener('activate', async () => {
+//     await self.clients.claim()
+// })
+
+self.addEventListener('fetch', async (event) => {
+    try {
+        // 如果用户当前网速慢，或是开启了省流模式，则不使用sw处理请求
+        const nav = navigator
+        const { saveData, effectiveType } = nav.connection || nav.mozConnection || nav.webkitConnection || {}
+        if (saveData || /2g/.test(effectiveType)) return
+
+        // 劫持请求
+        event.respondWith(handleRequest(event.request))
+        // eslint-disable-next-line
+    } catch (e) { }
+})
+
+// 返回响应
+async function progress(res) {
+    return new Response(await res.arrayBuffer(), {
+        status: res.status,
+        headers: res.headers
+    })
+}
+
+function handleRequest(req) {
+    const urls = []
+    const urlStr = req.url
+    let urlObj = new URL(urlStr)
+    // 为了获取 cdn 类型
+    // 例如获取gh (https://cdn.jsdelivr.net/gh)
+    const path = urlObj.pathname.split('/')[1]
 
-// workbox.googleAnalytics.initialize();
+    // 匹配 cdn
+    for (const type in cdn) {
+        if (type === path) {
+            for (const key in cdn[type]) {
+                const url = cdn[type][key] + urlObj.pathname.replace('/' + path, '')
+                urls.push(url)
+            }
+        }
+    }
+
+    // 如果上方 cdn 遍历 匹配到 cdn 则直接统一发送请求
+    if (urls.length) return fetchAny(urls)
+    throw new Error('failure')
+}
+
+// Promise.any 的 polyfill
+function createPromiseAny() {
+    Promise.any = function (promises) {
+        return new Promise((resolve, reject) => {
+            promises = Array.isArray(promises) ? promises : []
+            let len = promises.length
+            let errs = []
+            if (len === 0) return reject(new AggregateError('All promises were rejected'))
+            promises.forEach((p) => {
+                if (p instanceof Promise) {
+                    p.then(
+                        (res) => resolve(res),
+                        (err) => {
+                            len--
+                            errs.push(err)
+                            if (len === 0) reject(new AggregateError(errs))
+                        }
+                    )
+                } else {
+                    reject(p)
+                }
+            })
+        })
+    }
+}
+
+// 发送所有请求
+function fetchAny(urls) {
+    // 中断一个或多个请求
+    const controller = new AbortController()
+    const signal = controller.signal
+
+    // 遍历将所有的请求地址转换为promise
+    const PromiseAll = urls.map((url) => {
+        return new Promise((resolve, reject) => {
+            fetch(url, { signal })
+                .then(progress)
+                .then((res) => {
+                    const r = res.clone()
+                    if (r.status !== 200) reject(null)
+                    controller.abort() // 中断
+                    resolve(r)
+                })
+                .catch(() => reject(null))
+        })
+    })
+
+    // 判断浏览器是否支持 Promise.any
+    if (!Promise.any) createPromiseAny()
+
+    // 谁先返回"成功状态"则返回谁的内容，如果都返回"失败状态"则返回null
+    return Promise.any(PromiseAll)
+        .then((res) => res)
+        .catch(() => null)
+}

themes/butterfly/.github/stale.yml

@@ -0,0 +1,20 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 30
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+  - bug
+  - enhancement
+  - documentation 
+# Label to use when marking an issue as stale
+staleLabel: stale
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

themes/butterfly/.github/workflows/publish.yml

@@ -0,0 +1,19 @@
+name: npm publish
+
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    # Setup .npmrc file to publish to npm
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+        registry-url: 'https://registry.npmjs.org'
+    - run: npm install
+    - run: npm publish
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}