? ? ? ? PWA（Progressive Web App）是一種理念，使用多種技術(shù)來增強(qiáng) web app 的功能，可以讓網(wǎng)站的體驗(yàn)變得更好，能夠模擬一些原生功能，比如通知推送，讓網(wǎng)頁應(yīng)用呈現(xiàn)和原生應(yīng)用相似的體驗(yàn)。

英文介紹：

? ? ? ?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 這個(gè)詞匯被提及的次數(shù)越來越多，作為號(hào)稱下一代 web 應(yīng)用模型的 PWA，相信在未來會(huì)成為布局的一個(gè)新主流技術(shù)之一。

? ? ? ?但是蛋疼的是，IOS 對(duì) PWA 的支持力度遠(yuǎn)遠(yuǎn)低于 Android，所以 PWA 在 iPhone、iPad 上的體驗(yàn)也遠(yuǎn)遠(yuǎn)達(dá)不到 “Web APP” 的標(biāo)準(zhǔn)。

? ? ? ?最近公司給了一個(gè)新項(xiàng)目，要求用 PWA 完成，好巧不巧的是那個(gè)時(shí)候 VUE3 的正式版剛剛發(fā)布，腦子一熱，反正 PWA 也沒接觸過，不如順帶去熟悉熟悉 VUE3，結(jié)果就是在開發(fā)的那段時(shí)間幾乎每天加班........

? ? ? ?其中令人印象最深刻的就是 iPad 生成桌面圖標(biāo)，滑動(dòng)非全屏的列表頁的時(shí)候，在其它區(qū)域滑動(dòng)一下，再立馬切換到列表滾動(dòng)區(qū)域滾動(dòng)，會(huì)直接導(dǎo)致無法滾動(dòng)的問題（Android 沒這毛?。?，需要過個(gè)三四秒才會(huì)恢復(fù)正常。雖然這個(gè)問題不是很大，但是還是會(huì)略微影響到用戶體驗(yàn)，產(chǎn)品要求必須解決這個(gè)問題，所以在瘋狂的調(diào)試，問同事朋友，和逛搜索引擎下，雖說還沒完全解決，但還是勉強(qiáng)的解決了這個(gè)蛋疼的問題。

? ? ? ?以下有兩種解決思路，第一種就是在滑動(dòng)非列表區(qū)域的時(shí)候，監(jiān)聽觸摸事件，直接把默認(rèn)事件給禁掉，這樣來回切換滑動(dòng)在一般情況下是可以流暢切換的，但是如果切換的特別快的時(shí)候（半秒內(nèi)），還是會(huì)出現(xiàn)無法滾動(dòng)的問題，在這里不得不感嘆一下測(cè)試的強(qiáng)大........

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

? ? ? ?第二種就是用第三方庫了（如 better-scroll、jroll 等），使用這種第三方庫，直接把默認(rèn)的滾動(dòng)時(shí)間換成手動(dòng)計(jì)算觸摸距離和速度等轉(zhuǎn)換成 transition 或 requestAnimation 來替代瀏覽器原生滾動(dòng)的效果，這種方式完美的解決了無法滾動(dòng)的問題，但隨之而來的卻是另一個(gè)問題，由于是 JS 實(shí)現(xiàn)的替換瀏覽器原生滾動(dòng)方式的方案，所以在流暢性方面和原生的 overflow:scroll; 的差距還是肉眼可見的，如果滑的較快的話，就會(huì)出現(xiàn)看起來類似掉幀的效果一樣。

? ? ? ?總之，兩種方案都在一定程度上解決了問題，使用哪種方法就看各人取舍了，或者如果發(fā)現(xiàn)了有更好的方法歡迎隨時(shí)指出。