swpp-backends 2.0.9 → 2.1.1

package/README.md

@@ -1,3 +1,5 @@
+![swpp](./swpp.jpg)
+
 ## 欢迎使用 SwppBackends
 
 swpp-backends（以下简称 swpp）插件的功能是为网站生成一个高度可用的 ServiceWorker（以下简称 SW），为网站优化二次加载、提供离线体验、提高可靠性，并为此附带了一些其它的功能。

package/dist/ServiceWorkerBuilder.js

@@ -30,6 +30,7 @@ function buildServiceWorker() {
         ...('external' in rules && Array.isArray(rules.external) ? rules.external : [])
     ], true) + '\n';
     if (!fetchFile) {
+        const { JS_CODE_GET_CDN_LIST, JS_CODE_GET_SPARE_URLS, JS_CODE_DEF_FETCH_FILE } = require('./resources/sw-fetch.js');
         if (getRaceUrls)
             cache += JS_CODE_GET_CDN_LIST;
         else if (getSpareUrls)
@@ -53,9 +54,12 @@ function buildServiceWorker() {
     if (modifyRequest) {
         content = content.replaceAll('// [modifyRequest call]', `
                 const modify = modifyRequest(request)
-                if (modify) request = modify
+                if (modify) {
+                    request = modify
+                    url = new URL(request.url)
+                }
             `).replaceAll('// [modifyRequest else-if]', `
-                else if (modify) event.respondWith(fetch(request))
+                else if (modify) handleFetch(fetchFile(request, false))
             `);
     }
     if (blockRequest) {
@@ -79,91 +83,3 @@ function buildServiceWorker() {
     return content;
 }
 exports.buildServiceWorker = buildServiceWorker;
-// 缺省的 fetchFile 函数的代码
-const JS_CODE_DEF_FETCH_FILE = `
-    const fetchFile = (request, banCache) => fetch(request, {
-        cache: banCache ? "no-store" : "default",
-        mode: 'cors',
-        credentials: 'same-origin'
-    })
-`;
-// getRaceUrls 函数的代码
-const JS_CODE_GET_CDN_LIST = `
-    const fetchFile = (request, banCache) => {
-        const fetchArgs = {
-            cache: banCache ? 'no-store' : 'default',
-            mode: 'cors',
-            credentials: 'same-origin'
-        }
-        const list = getRaceUrls(request.url)
-        if (!list || !Promise.any) return fetch(request, fetchArgs)
-        const res = list.map(url => new Request(url, request))
-        const controllers = []
-        return Promise.any(res.map(
-            (it, index) => fetch(it, Object.assign(
-                {signal: (controllers[index] = new AbortController()).signal},
-                fetchArgs
-            )).then(response => checkResponse(response) ? {index, response} : Promise.reject())
-        )).then(it => {
-            for (let i in controllers) {
-                if (i != it.index) controllers[i].abort()
-            }
-            return it.response
-        })
-    }
-`;
-// getSpareUrls 函数的代码
-const JS_CODE_GET_SPARE_URLS = `
-    const fetchFile = (request, banCache, spare = null) => {
-        const fetchArgs = {
-            cache: banCache ? 'no-store' : 'default',
-            mode: 'cors',
-            credentials: 'same-origin'
-        }
-        if (!spare) {
-            spare = getSpareUrls(request.url)
-            if (!spare) return fetch(request, fetchArgs)
-        }
-        const list = spare.list
-        const controllers = new Array(list.length)
-        const startFetch =
-            index => fetch(
-                new Request(list[index], request),
-                Object.assign({
-                    signal: (controllers[index] = new AbortController()).signal
-                }, fetchArgs)
-            ).then(response => checkResponse(response) ? {r: response, i: index} : Promise.reject())
-        return new Promise((resolve, reject) => {
-            let flag = true
-            const startAll = () => {
-                flag = false
-                Promise.any([
-                    first,
-                    ...Array.from({
-                        length: list.length - 1
-                    }, (_, index) => index + 1).map(index => startFetch(index))
-                ]).then(res => {
-                    for (let i = 0; i !== list.length; ++i) {
-                        if (i !== res.i)
-                            controllers[i].abort()
-                    }
-                    resolve(res.r)
-                }).catch(() => reject(\`请求 \${request.url} 失败\`))
-            }
-            const id = setTimeout(startAll, spare.timeout)
-            const first = startFetch(0)
-                .then(res => {
-                    if (flag) {
-                        clearTimeout(id)
-                        resolve(res.r)
-                    }
-                }).catch(() => {
-                    if (flag) {
-                        clearTimeout(id)
-                        startAll()
-                    }
-                    return Promise.reject()
-                })
-        })
-    }
-`;

package/dist/index.js

@@ -10,7 +10,7 @@ const VersionAnalyzer_1 = require("./VersionAnalyzer");
 const DomBuilder_1 = require("./DomBuilder");
 // noinspection JSUnusedGlobalSymbols
 exports.default = {
-    version: '2.0.9',
+    version: '2.1.1',
     cache: {
         readEjectData: Utils_1.readEjectData, readUpdateJson: Variant_1.readUpdateJson,
         readRules: Variant_1.readRules, readMergeVersionMap: Variant_1.readMergeVersionMap,

package/dist/resources/sw-fetch.js

@@ -0,0 +1,92 @@
+/** @type function */
+let getRaceUrls, checkResponse, getSpareUrls
+
+module.exports.JS_CODE_DEF_FETCH_FILE = 'const fetchFile = ' + (
+    (request, banCache) => fetch(request, {
+        cache: banCache ? "no-store" : "default",
+        mode: 'cors',
+        credentials: 'same-origin'
+    })
+).toString()
+
+module.exports.JS_CODE_GET_CDN_LIST= 'const fetchFile = ' + (
+    (request, banCache) => {
+        const fetchArgs = {
+            cache: banCache ? 'no-store' : 'default',
+            mode: 'cors',
+            credentials: 'same-origin'
+        }
+        const list = getRaceUrls(request.url)
+        if (!list || !Promise.any) return fetch(request, fetchArgs)
+        const res = list.map(url => new Request(url, request))
+        const controllers = []
+        // noinspection JSCheckFunctionSignatures
+        return Promise.any(res.map(
+            (it, index) => fetch(it, Object.assign(
+                {signal: (controllers[index] = new AbortController()).signal},
+                fetchArgs
+            )).then(response => checkResponse(response) ? {index, response} : Promise.reject())
+        )).then(it => {
+            for (let i in controllers) {
+                if (i !== it.index) controllers[i].abort()
+            }
+            return it.response
+        })
+    }
+).toString()
+
+module.exports.JS_CODE_GET_SPARE_URLS = 'const fetchFile = ' + (
+    (request, banCache, spare = null) => {
+        const fetchArgs = {
+            cache: banCache ? 'no-store' : 'default',
+            mode: 'cors',
+            credentials: 'same-origin'
+        }
+        if (!spare) {
+            spare = getSpareUrls(request.url)
+            if (!spare) return fetch(request, fetchArgs)
+        }
+        const list = spare.list
+        const controllers = new Array(list.length)
+        // noinspection JSCheckFunctionSignatures
+        const startFetch =
+            index => fetch(
+                new Request(list[index], request),
+                Object.assign({
+                    signal: (controllers[index] = new AbortController()).signal
+                }, fetchArgs)
+            ).then(response => checkResponse(response) ? {r: response, i: index} : Promise.reject())
+        return new Promise((resolve, reject) => {
+            let flag = true
+            const startAll = () => {
+                flag = false
+                Promise.any([
+                    first,
+                    ...Array.from({
+                        length: list.length - 1
+                    }, (_, index) => index + 1).map(index => startFetch(index))
+                ]).then(res => {
+                    for (let i = 0; i !== list.length; ++i) {
+                        if (i !== res.i)
+                            controllers[i].abort()
+                    }
+                    resolve(res.r)
+                }).catch(() => reject(`请求 ${request.url} 失败`))
+            }
+            const id = setTimeout(startAll, spare.timeout)
+            const first = startFetch(0)
+                .then(res => {
+                    if (flag) {
+                        clearTimeout(id)
+                        resolve(res.r)
+                    }
+                }).catch(() => {
+                    if (flag) {
+                        clearTimeout(id)
+                        startAll()
+                    }
+                    return Promise.reject()
+                })
+        })
+    }
+).toString()

package/dist/resources/sw-template.js

@@ -63,33 +63,65 @@
         )).then(list => list.filter(it => it))
     )
 
+    /**
+     * 缓存列表
+     * @type {Map<string, {s, e}[]>}
+     */
+    const cacheMap = new Map()
+
     self.addEventListener('fetch', event => {
         let request = event.request
+        let url = new URL(request.url)
+        // [blockRequest call]
         if (request.method !== 'GET' || !request.url.startsWith('http')) return
         // [modifyRequest call]
-        const url = new URL(request.url)
-        // [blockRequest call]
+        let cacheKey = url.hostname + url.pathname + url.search
+        let cache = cacheMap.get(cacheKey)
+        if (cache) {
+            return event.respondWith(
+                new Promise((resolve, reject) => {
+                    cacheMap.get(cacheKey).push({s: resolve, e: reject})
+                })
+            )
+        }
+        cacheMap.set(cacheKey, cache = [])
+        /** 处理拉取 */
+        const handleFetch = promise =>
+            event.respondWith(promise.then(response => {
+                for (let item of cache) {
+                    item.s(response.clone())
+                }
+            }).catch(err => {
+                for (let item of cache) {
+                    item.e(err)
+                }
+            }).then(() => {
+                cacheMap.delete(cacheKey)
+                return promise
+            }))
         const cacheRule = findCache(url)
         if (cacheRule) {
             let key = `https://${url.host}${url.pathname}`
             if (key.endsWith('/index.html')) key = key.substring(0, key.length - 10)
             if (cacheRule.search) key += url.search
-            event.respondWith(caches.match(key)
-                .then(cache => cache ?? fetchFile(request, true)
-                    .then(response => {
-                        if (checkResponse(response)) {
-                            const clone = response.clone()
-                            caches.open(CACHE_NAME).then(it => it.put(key, clone))
-                            // [debug put]
-                        }
-                        return response
-                    })
+            handleFetch(
+                caches.match(key).then(
+                    cache => cache ?? fetchFile(request, true)
+                        .then(response => {
+                            if (checkResponse(response)) {
+                                const clone = response.clone()
+                                caches.open(CACHE_NAME).then(it => it.put(key, clone))
+                                // [debug put]
+                            }
+                            return response
+                        })
                 )
             )
         } else {
             const spare = getSpareUrls(request.url)
-            if (spare) event.respondWith(fetchFile(request, false, spare))
+            if (spare) handleFetch(fetchFile(request, false, spare))
             // [modifyRequest else-if]
+            else handleFetch(fetch(request))
         }
     })
 
@@ -106,8 +138,11 @@
             )
     })
 
-    /** 判断指定url击中了哪一种缓存，都没有击中则返回null */
-    function findCache(url) {
+    /**
+     * 判断指定 url 击中了哪一种缓存，都没有击中则返回 null
+     * @param url {URL}
+     */
+    const findCache = url => {
         if (url.hostname === 'localhost') return
         for (let key in cacheRules) {
             const value = cacheRules[key]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swpp-backends",
-  "version": "2.0.9",
+  "version": "2.1.1",
   "main": "dist/index.js",
   "typings": "types/index.d.ts",
   "description": "Generate a powerful ServiceWorker for your website.",