四月八日

const fs = require("fs");
const zlib = require("zlib");

// 创建解压流
const inflate = zlib.createInflate();
const readStream = fs.createReadStream(
  "./c6dd0164fe0eb4fde767f9e731a6c8ade0b69f"
);
const writeStream = fs.createWriteStream("bbb.txt");

// 处理数据流
readStream.pipe(inflate).pipe(writeStream);

var containerElement = document.createElement("div");
containerElement.innerHTML = appContent;
var appElement = containerElement.firstChild;
if (strictStyleIsolation) {
  if (supportShadowDOM) {
    var innerHTML = appElement.innerHTML;
    appElement.innerHTML = "";
    var shadow;
    if (appElement.attachShadow) {
      shadow = appElement.attachShadow({
        mode: "open",
      });
    } else {
      shadow = appElement.createShadowRoot();
    }
    shadow.innerHTML = innerHTML;
  }
}

// 给子应用的最外层元素设置一个私有属性，用于添加选择器
// css.QiankunCSSRewriteAttr 默认私有化属性  data-qiankun
// appInstanceId 子应用的 name 属性
appElement.setAttribute(css.QiankunCSSRewriteAttr, appInstanceId);

// 创建私有化的选择器 prefix =>div[data-qiankun="setting"]
var prefix = ""
  .concat(tag, "[")
  .concat(QiankunCSSRewriteAttr, '="')
  .concat(appName, '"]');

// 获取并便利所有的 style 标签
var styleNodes = appElement.querySelectorAll("style") || [];
_forEach(styleNodes, function (stylesheetElement) {
  // 创建新的style标签，并将当前style中的样式复制到新标签中
  var styleNode = document.createElement("style");
  styleNode.appendChild(
    document.createTextNode(stylesheetElement.textContent || "")
  );

  // 获取 CSSStyleSheet 对象，并将 cssRules 转为数组, 遍历并重写规则
  var sheet = styleNode.sheet;
  var rules = arrayify(sheet.cssRules);
  var css = "";
  rules.forEach(function (rule) {
    switch (rule.type) {
      case RuleType.STYLE:
        /**
          1 对于 html body :root 几个根元素
            会直接用 prefix 替换掉，防止对基座应用样式污染

          2 html + body 格式的演示qiankun认为是非标准的样式不做处理

          3 html > body html body 性质的选择器会将 html 替换为空字符串

          4 检查 a,html or *:not(:root) 根元素前插入了其他字符的选择器
            同样需要替换为 a,[prefix] *:not([prefix]) 的形式
          
          5 其他选择器会在选择器前添加前缀 
            [prefix] .text {}
          
          最后拼接字符串
         */

        css += ruleStyle(rule, prefix);
        break;
      case RuleType.MEDIA:
      case RuleType.SUPPORTS:
        /**
           媒体查询 @media screen and (max-width: 300px) {}
           能力检测 @supports (display: grid) {}

           会递归调用重写方法，将中间的选择器重写
         
         */
        css += ruleStyle(rule, prefix);
        break;
    }
  });
});

function iter(win, cb) {
  for (const k in win) {
    if (win.hasOwnProperty(k) || k === "clearInterval") {
      cb(k);
    }
  }
}

class SnapshotSandBox {
  deleteProps = new Set();
  modifyPropsMap = {};
  proxy = window;
  snapshot = {};

  active() {
    this.snapshot = {};
    // 激活时记录当前的window快照，不关心 window 上是否有其他应用的属性。
    // 只关心本次激活和卸载时属性的变化， 就是子应用的属性变化。
    iter(window, (k) => {
      this.snapshot[k] = window[k];
    });

    // 之前卸载时检测出修改或添加的属性，本次激活时要添加回来
    // 虽然添加和修改的属性都是在 window 上，但是应用卸载后可能被其他应用删除或重写
    // 这里使用记录值恢复之前的状态

    Object.keys(this.modifyPropsMap).forEach((k) => {
      window[k] = this.modifyPropsMap[k];
    });

    // 删除卸载时记录的删除值
    // 同样因为其他同框架的子应用可能会添加相同属性

    this.deleteProps.forEach((k) => {
      delete window[k];
    });

    this.sandboxRunning = true;
  }

  inactive() {
    this.deleteProps.clear();
    this.modifyPropsMap = {};

    // 和刚激活应用时的快照对比，检查新增或修改的属性
    iter(window, (k) => {
      if (window[k] !== this.snapshot[k]) {
        this.modifyPropsMap[k] = window[k];
      }
    });

    // 快照中有，但是当前 window 上没有，那么属性被删除

    iter(this.snapshot, (k) => {
      if (!window.hasOwnProperty(k)) {
        this.deleteProps.add(k);
        // 恢复环境， 应用中删除的属性，退出应用是需要还原
        window[k] = this.snapshot[k];
      }
    });
    this.sandboxRunning = false;
  }
}

const createFakeWindow = (globalContext, speed) => {
  const fakeWindow = {};
  const propertiesWithGetter = new Map();
  // 获取 window 静态属性
  Object.getOwnPropertyNames(globalContext)
    .filter((p) => {
      // 属性描述符
      // configurable 为假表示不能 修改，不能删除

      const dec = Object.getOwnPropertyDescriptor(globalContext, p);
      return dec?.configurable;
    })
    .forEach((p) => {
      const descriptor = Object.getOwnPropertyDescriptor(globalContext, p);
      if (descriptor) {
        const hasGetter = Object.prototype.hasOwnProperty.call(
          descriptor,
          "get"
        );

        // FAQ window 引用属性，为什么需要要修改属性描述符
        if (
          p === "self" ||
          p === "window" ||
          p === "parent" ||
          p === "top" ||
          (speed && p === "document")
        ) {
          descriptor.configurable = true;

          // 属性访问器和， writable 属性描述符不能同时指定
          if (!hasGetter) {
            descriptor.writable = true;
          }
        }

        // 记录所有所有访问器得属性
        if (hasGetter) propertiesWithGetter.set(p, true);

        // FAQ 所有 configurable 为假得属性，就一定是环境级别属性属性么
        Object.defineProperties(fakeWindow, p, Object.freeze(descriptor));
      }
    });
  // Object.keys(window).forEach(k=>{
  //     if( has)
  //     const propDescriptor =   Object.getOwnPropertyDescriptor(window,k);
  //     c
  // })
};

let activeSandboxCount = 0;

class ProxySandBox {
  sandboxRunning = true;
  activeSandboxCount = 0;
  document = document;
  constructor(name, globalContext = window, opts) {
    this.name = name;
    this.globalContext = globalContext;
    this.type = "proxy";
    const { updatedValueSet } = this;
    const { speedy } = opts || {};
    const { fakeWindow, propertiesWithGetter } = createFakeWindow(
      globalContext,
      !!speedy
    );

    const proxy = new Proxy(fakeWindow, {
      get(target, p) {
        // this.registerRunningApp()

        // 处理对一些特殊属性值得处理

        //Symbol.unscopables 提供了一种机制，允许对象指定哪些属性在 with 语句中不应该被暴露为局部变量。如果一个属性在对象的 Symbol.unscopables 列表中，它将不会出现在 with 语句的作用域中。
        //   const obj = {
        //     a: 1,
        //     b: 2,
        //     [Symbol.unscopables]: {
        //         b: true // 使 'b' 在 with 语句中不可见
        //     }
        // };

        if (p === Symbol.unscopables) return unscopables;
        if (p === "window" || p === "self" || p === "globalThis") {
          return proxy;
        }

        // 如果获取得上级 window, 允许逃逸
        if (p === "top" || p === "parent") {
          if (globalContext === globalContext.parent) {
            return proxy;
          }
          return globalContext[p];
        }

        if (p === "hasOwnProperty") {
          // proxy.hasOwnProperty.call({a},'a')
          return function hasOwnProperty(key) {
            if (this !== proxy && this !== null && typeof this === "object") {
              return Object.prototype.hasOwnProperty.call(this, key);
            }

            // proxy.hasOwnProperty("a")
            return (
              fakeWindow.hasOwnProperty(key) ||
              globalContext.hasOwnProperty(key)
            );
          };
        }

        if (p === "document") {
          return this.document;
        }

        if (p === "eval") {
          return eval;
        }
        // customProp {configurable:false} => {configurable:true}
        const actualTarget = propertiesWithGetter.has(p)
          ? globalContext
          : p in target
          ? target
          : globalContext;
        const value = actualTarget[p];

        // 校验了是不是frozen的属性， 如果是需要直接返回
        // propertyDescriptor.configurable === false
        // && (propertyDescriptor.writable === false || (propertyDescriptor.get && !propertyDescriptor.set)),
        if (isPropertyFrozen(actualTarget, p)) {
          return value;
        }
        // 非原生全局属性直接返回 addEventListener
        // isNativeGlobalProp 枚举了 所有的全局属性
        // useNativeWindowForBindingsProps 记录所有执行时需要绑定原生window方法 [fetch,true]
        if (!isNativeGlobalProp(p) && !useNativeWindowForBindingsProps.has(p)) {
          return value;
        }

        // 如果不处理 fetch.bind(this) 实际时绑定的proxyWindow 导致报错
        const boundTarget = useNativeWindowForBindingsProps.get(p)
          ? nativeGlobal
          : globalContext;

        // 仅绑定 isCallable && !isBoundedFunction && !isConstructable 的函数对象，如 window.console、window.atob 这类，不然微应用中调用时会抛出 Illegal invocation 异常
        // 目前没有完美的检测方式，这里通过 prototype 中是否还有可枚举的拓展方法的方式来判断
        // @warning 这里不要随意替换成别的判断方式，因为可能触发一些 edge case（比如在 lodash.isFunction 在 iframe 上下文中可能由于调用了 top window 对象触发的安全异常）
        const rebindTarget2Fn = (target, fn) => {
          const isCallable = (fn) =>
            typeof fn === "function" && fn instanceof Function;
          // bind 函数的名称会以 bound开头  "bound fn"
          const isBoundedFunction = (fn) =>
            fn.name.indexOf("bound ") === 0 && !fn.hasOwnProperty("prototype");

          const isConstructable = () => {
            const hasPrototypeMethods =
              fn.prototype &&
              // class有constructor属性
              fn.prototype.constructor === fn &&
              // 构造器需要有原型链
              Object.getOwnPropertyNames(fn.prototype).length > 1;
            if (hasPrototypeMethods) return true;
            // 假设以下视为构造函数
            // 1. 有 prototype 并且 prototype 上有定义一系列非 constructor 属性
            // 2. 函数名大写开头
            // 3. class 函数

            let constructable = hasPrototypeMethods;
            if (!constructable) {
              const fnString = fn.toString();
              const constructableFunctionRegex = /^function\b\s[A-Z].*/;
              const classRegex = /^class\b/;
              constructable =
                constructableFunctionRegex.test(fnString) ||
                classRegex.test(fnString);
            }

            return constructable;
          };

          if (
            isCallable(fn) &&
            !isBoundedFunction(fn) &&
            !isConstructable(fn)
          ) {
            const boundValue = Function.prototype.bind.call(fn, target);

            // 拷贝原有方法的静态属性
            Object.getOwnPropertyNames(fn).forEach((key) => {
              // boundValue might be a proxy, we need to check the key whether exist in it
              if (!boundValue.hasOwnProperty(key)) {
                Object.defineProperty(
                  boundValue,
                  key,
                  Object.getOwnPropertyDescriptor(fn, key)
                );
              }
            });

            // 如果原方法 prototype 属性设置了不可枚举，会导致原型链丢失
            // 赋值的时候不能使用 = 或 Object.assign, 因为赋值操作会向上查询原型链
            // 如果描述符被设 writable =false 或没有 set 属性访问器，会抛出错误
            // Cannot assign to read only property 'prototype' of function
            if (
              fn.hasOwnProperty("prototype") &&
              !boundValue.hasOwnProperty("prototype")
            ) {
              Object.defineProperty(boundValue, "prototype", {
                value: fn.prototype,
                enumerable: false,
                writable: true,
              });
            }

            // 有一些库会使用 /native code/.test(fn.toString()) 检测是不是原生的方法
            // 如果不特殊处理，所有toString 返回的都是 [object fakeWindow] 或 [object Window]]
            if (typeof fn.toString === "function") {
              const valueHasInstanceToString =
                fn.hasOwnProperty("toString") &&
                !boundValue.hasOwnProperty("toString");
              const boundValueHasPrototypeToString =
                boundValue.toString === Function.prototype.toString;

              if (valueHasInstanceToString || boundValueHasPrototypeToString) {
                // valueHasInstanceToString? 有自定义的 toString 使用原方法
                //                         : 使用原生的 toString
                const originToStringDescriptor =
                  Object.getOwnPropertyDescriptor(
                    valueHasInstanceToString ? fn : Function.prototype,
                    "toString"
                  );

                Object.defineProperty(
                  boundValue,
                  "toString",
                  Object.assign(
                    {},
                    originToStringDescriptor,
                    originToStringDescriptor?.get
                      ? null
                      : { value: () => fn.toString() }
                  )
                );
              }
            }
          }
        };
        return rebindTarget2Fn(boundTarget, value);
      },
    });
  }

  active() {
    if (!this.activeSandboxCount) activeSandboxCount += 1;
    this.sandboxRunning = true;
  }
  inActive() {
    this.sandboxRunning = false;
  }
  patchDocument(doc) {
    this.document = doc;
  }
}

{
  output: {
    // 输出格式改为 systemjs
    libraryTarget: "system",
  },
   devServer: {
      // 任意路径下都返回 spa 应用入口文件
      historyApiFallback: true，
      // 允许对子应用的跨域调用
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
    },
    // 会增加一个入口文件，动态指定 __webpack_public_path__
    // 避免子应用中异步加载的资源请求了主应用的路径
    new SystemJSPublicPathPlugin(
        //...
    ),
    // 处理开发模式下独立启动子应用显示页面
    !isProduction &&
    new StandaloneSingleSpaPlugin({
        //...
    }),
};

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: Root,
  domElementGetter: () => document.querySelector("#aa"),
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
});

const opts = {
  /** 接收到的参数*/
};
const SingleSpaContext = opts.React.createContext();

opts.SingleSpaRoot = createSingleSpaRoot(opts);

// 将传入的新组件包装成新的 Root 组件

function createSingleSpaRoot() {
  // 为了支持 React 15 所以 single-spa 并没有使用 useEffect
  // 并且使用 函数 模拟 ES6 class 实现
  function SingleSpaRoot() {}
  SingleSpaRoot.prototype = Object.create(opts.React.Component.prototype);

  // 绑定自定义钩子函数
  SingleSpaRoot.prototype.componentDidMount = function () {
    setTimeout(this.props.mountFinished);
  };

  // 绑定自定义钩子函数
  SingleSpaRoot.prototype.render = function () {
    return this.props.children;
  };

  opts.SingleSpaRoot = createSingleSpaRoot(opts);

  const lifecycles = {
    bootstrap: bootstrap.bind(null, opts),
    mount: mount.bind(null, opts),
    unmount: unmount.bind(null, opts),
  };

  // 暴露接口方法
  return lifecycles;
}

function mount(opts, props) {
  const whenMounted = function () {
    resolve(this);
  };

  const elementToRender = getElementToRender(opts, props, whenMounted);

  // 包装 rootComponent  传入额外的 props
  function getElementToRender(opts, props, mountFinished) {
    const elementToRender = opts.React.createElement(opts.rootComponent, props);

    // 绑定 context
    // ...

    // 绑定 errorBoundary
    // ...

    elementToRender = opts.React.createElement(
      opts.SingleSpaRoot,
      {
        ...props,
        mountFinished,
        updateFinished() {
          //...
        },
        unmountFinished() {
          //...
        },
      },
      elementToRender
    );

    return elementToRender;
  }
  const domElement = opts.domElementGetter();

  if (opts.ReactDOMClient?.createRoot) {
    opts.renderType = "createRoot";
  } else {
    opts.renderType = "render";
  }
  const renderResult = reactDomRender({
    elementToRender,
    domElement: opts.domElementGetter(),
    reactDom: opts.ReactDOMClient || opts.ReactDOM,
    renderType: opts.renderType,
  });

  // 挂载组件
  function reactDomRender({
    reactDom,
    renderType,
    elementToRender,
    domElement,
  }) {
    const renderFn = reactDom[renderType];

    switch (renderType) {
      case "createRoot":
      case "unstable_createRoot":
      case "createBlockingRoot":
      case "unstable_createBlockingRoot": {
        const root = renderFn(domElement);
        root.render(elementToRender);
        return root;
      }
      case "hydrateRoot": {
        const root = renderFn(domElement, elementToRender);
        return root;
      }
      case "hydrate":
      default: {
        renderFn(elementToRender, domElement);
        // The renderRoot function should return a react root, but ReactDOM.hydrate() and ReactDOM.render()
        // do not return a react root. So instead, we return null which indicates that there is no react root
        // that can be used for updates or unmounting
        return null;
      }
    }
  }

  opts.domElements[props.name] = domElement;
  opts.renderResults[props.name] = renderResult;
}

function unmount(opts, props) {
  return new Promise((resolve) => {
    opts.unmountResolves[props.name] = resolve;

    const root = opts.renderResults[props.name];

    if (root && root.unmount) {
      // React >= 18
      const unmountResult = root.unmount();
    } else {
      // React < 18
      (opts.ReactDOMClient || opts.ReactDOM).unmountComponentAtNode(
        opts.domElements[props.name]
      );
    }
    delete opts.domElements[props.name];
    delete opts.renderResults[props.name];
  });
}

function update(opts, props) {
  return new Promise((resolve) => {
    if (!opts.updateResolves[props.name]) {
      opts.updateResolves[props.name] = [];
    }

    opts.updateResolves[props.name].push(resolve);

    const elementToRender = getElementToRender(opts, props, null);
    const renderRoot = opts.renderResults[props.name];
    if (renderRoot && renderRoot.render) {
      // React 18 with ReactDOM.createRoot()
      renderRoot.render(elementToRender);
    } else {
      // React 16 / 17 with ReactDOM.render()
      const domElement = chooseDomElementGetter(opts, props)();
      // This is the old way to update a react application - just call render() again
      getReactDom(opts).render(elementToRender, domElement);
    }
  });
}

const apps = [];

const NOT_LOADED = "NOT_LOADED";
const LOADING_SOURCE_CODE = "LOADING_SOURCE_CODE";
const NOT_BOOTSTRAPPED = "NOT_BOOTSTRAPPED";
const BOOTSTRAPPING = "BOOTSTRAPPING";
const NOT_MOUNTED = "NOT_MOUNTED";
const MOUNTING = "MOUNTING";
const MOUNTED = "MOUNTED";
const LOAD_ERROR = "LOAD_ERROR";
const SKIP_BECAUSE_BROKEN = "SKIP_BECAUSE_BROKEN";

// 主应用启动状态
let isStart = false;

function registerApplication(appNameOrConfig) {
  // app 必须是返回 promise 的函数
  // customProps 必须是对象
  appNameOrConfig.customProps = appNameOrConfig.customProps || {};
  // activeWhen 是一个路径匹配函数的数组

  appNameOrConfig.activeWhen = Array.isArray(appNameOrConfig.activeWhen)
    ? appNameOrConfig.activeWhen
    : [appNameOrConfig.activeWhen];
  appNameOrConfig.activeWhen = appNameOrConfig.activeWhen.map((path) =>
    typeof path === "function" ? path : pathToActiveWhen(path)
  );

  apps.push({
    loadErrorTime: null,
    status: NOT_LOADED,
    ...appNameOrConfig,
  });

  reroute();
}

function start() {
  isStart = true;
  patchHistoryApi(opts);
  reroute();
}

let urlRerouteOnly;
let originalReplaceState;
function createPopStateEvent(state, originalMethodName) {
  // https://github.com/single-spa/single-spa/issues/224 and https://github.com/single-spa/single-spa-angular/issues/49
  // We need a popstate event even though the browser doesn't do one by default when you call replaceState, so that
  // all the applications can reroute. We explicitly identify this extraneous event by setting singleSpa=true and
  // singleSpaTrigger=<pushState|replaceState> on the event instance.
  let evt;
  try {
    evt = new PopStateEvent("popstate", { state });
  } catch (err) {
    // IE 11 compatibility https://github.com/single-spa/single-spa/issues/299
    // https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-html5e/bd560f47-b349-4d2c-baa8-f1560fb489dd
    evt = document.createEvent("PopStateEvent");
    evt.initPopStateEvent("popstate", false, false, state);
  }
  evt.singleSpa = true;
  evt.singleSpaTrigger = originalMethodName;
  return evt;
}

function patchedUpdateState(updateState, methodName) {
  return function () {
    const urlBefore = window.location.href;
    const result = updateState.apply(this, arguments);
    const urlAfter = window.location.href;

    if (urlBefore !== urlAfter) {
      // 手动触发 popstate 事件，让不同的子应用可以响应路由的变化。
      window.dispatchEvent(
        createPopStateEvent(window.history.state, methodName)
      );
    }
    return result;
  };
}

function patchHistoryApi() {
  urlRerouteOnly = true;
  originalReplaceState = window.history.replaceState;
  function urlReroute() {
    reroute([], arguments);
  }
  window.addEventListener("hashchange", urlReroute);
  //调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。popstate 事件只会在浏览器某些行为下触发
  //比如点击后退按钮（或者在 JavaScript 中调用 history.back()  go()方法）。即，在同一文档的两个历史记录条目之间导航会触发该事件。
  window.addEventListener("popstate", urlReroute);

  const originalAddEventListener = window.addEventListener;
  const originalRemoveEventListener = window.removeEventListener;

  // history 改变的时候需要主动触发事件
  window.history.pushState = patchedUpdateState(
    window.history.pushState,
    "pushState"
  );
  window.history.replaceState = patchedUpdateState(
    originalReplaceState,
    "replaceState"
  );
}

function reroute(
  pendingPromises = [],
  eventArguments,
  silentNavigation = false
) {
  const { appsToUnload, appsToUnmount, appsToLoad, appsToMount } =
    getAppChanges();

  let appsThatChanged,
    cancelPromises = [];

  if (start) {
    appsThatChanged = appsToUnload.concat(
      appsToLoad,
      appsToUnmount,
      appsToMount
    );
    return performAppChanges();
  }
  if (!start) {
    appsThatChanged = appsToLoad;
    return loadApps();
  }

  function loadApps() {
    return Promise.resolve().then(() => {
      const loadPromises = appsToLoad.map((app) => {
        if (app.loadPromise) return app.loadPromise;
        if (app.status !== NOT_LOADED && app.status !== LOAD_ERROR) {
          return app;
        }

        app.status = LOADING_SOURCE_CODE;

        return (app.loadPromise = Promise.resolve()
          .then((val) => {
            // val 获取到子项目暴露的接口
            return (loadPromise = app.app(app));
          })
          .then((val) => {
            app.status = NOT_BOOTSTRAPPED;
            app.bootstrap = val.bootstrap;
            app.mount = val.mount;
            app.unmount = val.unmount;
            app.unload = val.unload;
            delete app.loadPromise;
          }));
      });
      let succeeded;

      return Promise.all(loadPromises);
    });
  }

  function performAppChanges() {
    return Promise.resolve().then(() => {
      return Promise.all(cancelPromises).then(() => {
        appsToUnmount.map((app) =>
          app.unmount({ name: app.name }).then(() => (app.status = NOT_MOUNTED))
        );

        loadApps().then((res) => {
          const loadThenMountPromises = appsToLoad.map((app) => {
            console.log(app);
            app.status = BOOTSTRAPPING;

            return Promise.resolve(app.loadPromise)
              .then((res) => {
                return app.bootstrap();
              })
              .then(() => {
                return Promise.resolve().then(() => {
                  app.status = MOUNTING;
                  return app
                    .mount({
                      name: app.name,
                    })
                    .then(() => {
                      app.status = MOUNTED;
                    });
                });
              });
          });
        });

        appsToMount.map((app) => {
          app.mount({ name: app.name }).then(() => (app.status = MOUNTED));
        });
      });
    });
  }
}

function getAppChanges() {
  const appsToUnload = [],
    appsToUnmount = [],
    appsToLoad = [],
    appsToMount = [];

  let appsThatChanged,
    cancelPromises = [];
  // We re-attempt to download applications in LOAD_ERROR after a timeout of 200 milliseconds
  const currentTime = new Date().getTime();

  console.log(apps);
  apps.forEach((app) => {
    const appShouldBeActive =
      app.status !== SKIP_BECAUSE_BROKEN && app.activeWhen[0](window.location);

    switch (app.status) {
      case LOAD_ERROR:
        if (appShouldBeActive && currentTime - app.loadErrorTime >= 200) {
          appsToLoad.push(app);
        }
        break;
      case NOT_LOADED:
      case LOADING_SOURCE_CODE:
        if (appShouldBeActive) {
          appsToLoad.push(app);
        }
        break;
      case NOT_BOOTSTRAPPED:
      case NOT_MOUNTED:
        if (!appShouldBeActive) {
          appsToUnload.push(app);
        } else if (appShouldBeActive) {
          appsToMount.push(app);
        }
        break;
      case MOUNTED:
        if (!appShouldBeActive) {
          appsToUnmount.push(app);
        }
        break;
      // all other statuses are ignored
    }
  });

  return { appsToUnload, appsToUnmount, appsToLoad, appsToMount };
}

const url = new URL(location.href);
if ("serviceWorker" in navigator) {
  addEventListener("load", () => {
    navigator.serviceWorker
      .register("./sw.js", { scope: "/" })
      .then((registration) => {
        var serviceWorker;
        if (registration.installing) {
          serviceWorker = registration.installing;
          // 这里可以处理正在安装状态
        } else if (registration.waiting) {
          serviceWorker = registration.waiting;
          // 这里可以处理等待状态
        } else if (registration.active) {
          serviceWorker = registration.active;
          emitCacheList(serviceWorker);
        }

        if (serviceWorker) {
          serviceWorker.addEventListener("statechange", function (e) {
            if (e.target.state === "activated") {
              // Service Worker 已经激活，可以发送消息
              emitCacheList(serviceWorker);
            }
          });
        }
      })
      .catch((err) => {
        console.warn("desktop_sw register fail.");
      });
  });
}

this.addEventListener("install", function (event) {
  console.log("install");
});

this.addEventListener("activate", function (event) {
  console.log("activate");
});

navigator.serviceWorker
  .register("/sw.js", {
    scope: "/",
  })
  .then((registration: any) => {
    registration.update();
  });

// 使用 workbox
wb.register().then((registration: any) => {
  registration.update();
});