在 PWA 桌面图标中，IOS Safari 滚动会出现无法响应的问题

        PWA（Progressive Web App）是一种理念，使用多种技术来增强 web app 的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送，让网页应用呈现和原生应用相似的体验。

英文介绍：

       The web is an incredible platform. Its mix of ubiquity across devices and operating systems, its user-centered security model, and the fact that neither its specification nor its implementation is controlled by a single company makes the web a unique platform to develop software on. Combined with its inherent linkability, it's possible to search it and share what you've found with anyone, anywhere. Whenever you go to a website, it's up-to-date, and your experience with that site can be as ephemeral or as permanent as you'd like. Web applications can reach anyone, anywhere, on any device with a single codebase.

       Platform-specific applications, are known for being incredibly rich and reliable. They're ever-present, on home screens, docks, and taskbars. They work regardless of network connection. They launch in their own standalone experience. They can read and write files from the local file system, access hardware connected via USB, serial or bluetooth, and even interact with data stored on your device, like contacts and calendar events. In these applications, you can do things like take pictures, see playing songs listed on the home screen, or control song playback while in another app. Platform-specific applications feel like part of the device they run on.

       从 2018 年开始，PWA 这个词汇被提及的次数越来越多，作为号称下一代 web 应用模型的 PWA，相信在未来会成为布局的一个新主流技术之一。

       但是蛋疼的是，IOS 对 PWA 的支持力度远远低于 Android，所以 PWA 在 iPhone、iPad 上的体验也远远达不到 “Web APP” 的标准。

       最近公司给了一个新项目，要求用 PWA 完成，好巧不巧的是那个时候 VUE3 的正式版刚刚发布，脑子一热，反正 PWA 也没接触过，不如顺带去熟悉熟悉 VUE3，结果就是在开发的那段时间几乎每天加班........

       其中令人印象最深刻的就是 iPad 生成桌面图标，滑动非全屏的列表页的时候，在其它区域滑动一下，再立马切换到列表滚动区域滚动，会直接导致无法滚动的问题（Android 没这毛病），需要过个三四秒才会恢复正常。虽然这个问题不是很大，但是还是会略微影响到用户体验，产品要求必须解决这个问题，所以在疯狂的调试，问同事朋友，和逛搜索引擎下，虽说还没完全解决，但还是勉强的解决了这个蛋疼的问题。

       以下有两种解决思路，第一种就是在滑动非列表区域的时候，监听触摸事件，直接把默认事件给禁掉，这样来回切换滑动在一般情况下是可以流畅切换的，但是如果切换的特别快的时候（半秒内），还是会出现无法滚动的问题，在这里不得不感叹一下测试的强大........

window.document.getElementById('box').addEventListener('touchstart', function(event) {
    if (event.targetTouches.length === 2) {
        event.preventDefault();
    }
}, {
    passive: false
});

       第二种就是用第三方库了（如 better-scroll、jroll 等），使用这种第三方库，直接把默认的滚动时间换成手动计算触摸距离和速度等转换成 transition 或 requestAnimation 来替代浏览器原生滚动的效果，这种方式完美的解决了无法滚动的问题，但随之而来的却是另一个问题，由于是 JS 实现的替换浏览器原生滚动方式的方案，所以在流畅性方面和原生的 overflow:scroll; 的差距还是肉眼可见的，如果滑的较快的话，就会出现看起来类似掉帧的效果一样。

       总之，两种方案都在一定程度上解决了问题，使用哪种方法就看各人取舍了，或者如果发现了有更好的方法欢迎随时指出。