iOS14 下 PWA 的一些坑点记录

为什么使用 PWA？因为苹果太坑了，开发者自己开发的 iOS App 用证书都要 7 天装一次，个人是无法忍受了，所以就弃了 react-native 这个技术栈，等苹果什么时候改了的时候再考虑吧。

国内目前关于 PWA 的资料比较少，笔者在外网翻了老久，最后根据观察推断出了解决办法，希望能给大家带来一些收获，少踩一些坑

那下面废话不多说，直接进入正题。

坑点 1：iOS14 下，history.go(-1) 无效

这是在 iOS14 的时候新引入的坑，react-router 的 useHistory 里 export 出来的 goBack 在笔者升级了系统之后直接翻车，按钮没反应了。当初没有仔细研究，只是用 push 代替了功能实现就草草了事，直到最近采用 keep-alive 去改善 PWA 的跳页体验（多看技术文章还是有好处的，不然想解决问题都不知道怎么去搜索），这个问题又成了不得不解决的一个问题。

主要想解决的就是在回到上一页的时候不触发重新渲染，模拟真实 App 的效果，keep-alive 的实现原理大概就是改造 react-router，在跳页的时候渲染组件直接从 cache 里去取，避免重渲染，具体的实现就不展开了，可以看看这个库的源码 (很多类似的库实现方式都是有坑的，这个库是个人试了一下效果最好的一个，比较符合个人的需求)

来来回回试了 N+1 次，最后笔者观察到一个现象，就是当 history 的 length > 2 的时候，goBack 又会生效了，毫无疑问，这就是 safari 的锅。最后笔者通过在第一级页面人为 push 了一层，通过 hack 的方式解决了这个问题。

let isFirstLoading = true;

const PageA = () => {
  useEffect(() => {
    if (isFirstLoading) {
      push('/'); // hack
      isFirstLoading = false;
    }
  }, []);

  return <div />;
};

坑点 2：iOS14 下 PWA 的 apple-touch-icon 指定无效

这个笔者也试了老久，PWA 的图标指定在 iOS 下需要设置一个名为 apple-touch-icon 的 meta，但是笔者在升级到 iOS14 之后设置的 icon 就无效了，后面反复试了老久，发现这个 icon 必须有一些特殊的 response header，最好直接用 cdn 图床里的那种。

别的就没了，iOS 下的 PWA 还是不太完善的，希望之后不要引入新的 bug 了吧，当然锁定 iOS 版本也是可以考虑的。。