运行时函数依赖

import {defineRuntimeDep} from 'swpp-backends'
 
 
// 该代码将在 sw. js 中创建一系列函数：
// const example = () => console. log('hello')
// function invokeExample() {
//     example()
// }
defineRuntimeDep({
    example: () => console. log('hello'),
    invokeExample: function() {
        example()
    }
})
// 如果为了避免 IDE 报错，还可以在文件任意一个位置编写类似的代码：
// let example: () => void       good
// let example = any             不推荐，因为丢失了类型，会影响 IDE 的自动补全和静态类型推断
// 或者直接在函数调用的位置使用 @ts-ignore 也可以避免报错，同样不推荐，理由同上
 
let example: () => void // 这行代码用来消除 IDE 警告

/**
  * @param request 请求信息
  * @param response 响应体
  * @param date 是否存储时间戳
  */
async (request: RequestInfo | URL, response: Response, date?: boolean) => {
    if (date) {
        // 如果需要存储时间戳就新建一个 Response 并写入新的 header
        const headers = new Headers(response.headers);
        headers.set(STORAGE_TIMESTAMP, new Date().toISOString());
        response = new Response(response.body, {
            status: response.status,
            headers
        });
    }
    const cache = await caches.open(CACHE_NAME);
    await cache.put(request, response);
};
 
// 用于消除 IDE 报错，值在其它配置项中插入到 SW
let CACHE_NAME: string
let STORAGE_TIMESTAMP: string

import {defineRuntimeDep} from 'swpp-backends'
 
defineRuntimeDep({
    markCacheInvalid: (request: RequestInfo | URL) =>
        caches.open(CACHE_NAME).then(cache => cache.delete(request)),
    isValidCache: () => true
})
 
let CACHE_NAME: string

/**
  * @param request 请求信息
  * @param banCache 是否禁用 HTTP 缓存
  * @param cors 是否启用 cors，填 false 使用 no-cors 模式
  * @param optional 请求配置
  */
(request: Request, banCache: boolean, cors: boolean, optional?: RequestInit): Promise<Response> => {
    const init: RequestInit = {
        referrerPolicy: request.referrerPolicy ?? '',
        ...optional
    }
    init.cache = banCache ? 'no-store' : 'default'
    if (cors) {
        init.mode = 'cors'
        init.credentials = 'same-origin'
    }
    return fetch(request, init)
}

// noinspection TypeScriptUnresolvedReference
 
import {defineLazyInitConfig} from 'swpp-backends'
 
// 在这段代码中 fetchFastestAndStandbyRequests、fetchFastestRequests 和 fetchStandbyRequests 三者
// 都是在 swpp 内部定义的三个函数，感兴趣的可以翻看 RuntimeDepCode.ts 源码
defineLazyInitConfig((runtime) => {
    const runtimeDep = runtime.runtimeDep
    const hasFastestRequests = runtimeDep.hasValue('getFastestRequests')
    const hasStandbyRequests = runtimeDep.hasValue('getStandbyRequests')
    if (hasFastestRequests && hasStandbyRequests) {
        return fetchFastestAndStandbyRequests
    } else if (hasFastestRequests) {
        return fetchFastestRequests
    } else if (hasStandbyRequests) {
        return fetchStandbyRequests
    } else {
        return (request: RequestInfo | URL, optional?: RequestInit): Promise<Response> => {
            // @ts-ignore
            if (!request.url) request = new Request(request)
            return fetchWrapper(request, true, true, optional)
        }
    }
})