Chrome OS 67 已經支援 PC 端的 Progressive Web App 了,但目前還處於 Beta 階段。Mac 和 Windows 相關的開發工作也在進行中。
PC 端的 PWA 可以像普通應用一樣被「安裝」在裝置上。執行速度非常快。啟動和使用都跟普通應用一樣,沒有位址列和 Tab 頁,所以使用者體驗和普通應用一致。同時,得益於 Service Worker ,App 執行需要的相關資源都可以被快取起來,可靠性有了保證。對於使用者來說,體驗也更加舒適了。

PC 使用者很重要
移動端在 PWA 方面已經有很大發展。移動使用者雖然增長的很快, PC 端的使用量也沒有降低。移動端使用量的高峰在清早和夜晚,平板使用量的高峰在夜晚。而 PC 端的使用量在白天分佈得很均勻,大部分使用者在工作的時候會用電腦。

開始
在 Windows 和 MacOS 作業系統中體驗 PWA 需要開啟 Chrome 瀏覽器的
#enable-desktop-pwas
選項。
將 PWA 應用於 PC 端要做的事情相比將 PWA 應用於移動端並沒有很大區別,PC 端的 PWA 並不是一類全新的應用。在現有的 PWA 上完成的工作仍然可用。Service Worker 提高應用執行速度和可靠性;Web 推送和通知讓使用者能收到最新訊息。通過 add to home screen 還可以「安裝」應用。唯一的區別在於,應用不再執行在瀏覽器的標籤頁中,它改為執行在一個 App 視窗裡了。
新增至主螢幕(add to home screen)

應用一旦滿足新增到主螢幕的要求,Chrome 就會觸發 beforeinstallprompt
事件。在event handler
中,儲存這個事件並修改使用者介面,提醒使用者可以把你的應用新增到主螢幕。例如,Spotify 在使用者名稱上面加了一個「Intall App」按鈕。
查閱 Add to Home Screen 獲取更多關於處理新增至主螢幕事件、更新 UI 和展示相關提示的資訊。
App 視窗
App 視窗沒有位址列和 Tab 欄。整個視窗都用來顯示應用。同時還針對 App 的場景進行了優化,相比瀏覽器的 Tab 頁,管理視窗和進行操作都更靈活了。App 視窗使得全屏模式下完成單一任務或者多視窗模式下並行開展任務都更容易。App 視窗也使得在多個 App 間進行切換更自如。

如你所想,App 視窗有常規的包含最大化、最小化和關閉圖示的標題欄。在 Chrome OS 中,標題欄可以根據 Web App Manifest 的 theme_color 自定義主題。你的 App 介面應該被設計為鋪滿整個視窗。

在 App 視窗中,還有 App 選單(三個小點組成的按鈕)。通過這個選單,可以獲得更多有關 App 的資訊。開啟 URL、列印頁面、縮放和在瀏覽器開啟應用都更容易。
設計注意事項
相比移動端 PWA,PC 端的 PWA 在設計上有更多需要注意的點。

PC 端的應用所佔的螢幕更大,不要簡單的給 content 包裹一層 padding 或者 margin。應用於更寬的螢幕時,應該適當的增加元素之間的間隙。部分應用很適合這麼做。
在考慮留白時,思考一下使用者會怎麼使用你的 App 以及使用者會如何調整視窗大小。例如某個天氣應用,介面會顯示7天的天氣。當介面變小時,相比讓所有元素下移,顯示5天的天氣更好。當介面繼續縮小,內容可能會溢位,應用針對這種情況需要進行優化。


部分 App 的迷你模式非常有用,比如上文的天氣應用,迷你模式下僅顯示當前的天氣狀況。音樂播放器在迷你模式下可以只顯示正在播放的音樂和播放下一首的按鈕。
你可以借鑑響應式設計的概念以支援可切換模式的裝置,比如 Pixelbook 和 Surface。當切換至平板模式時,這些裝置會讓活躍的視窗全屏。同時會根據使用者手持狀態切換橫屏或者豎屏。
注意正確的應用響應式設計 —— 這非常重要。無論使用者主動調整視窗大小還是切換裝置模式,響應式設計對一個成功的 PWA 來說都至關重要。
PC 端的 App 視窗提供了大量可能性。和你的設計師一起,通過為寬屏增加留白、支援橫豎屏、支援全屏或非全屏、支援虛擬鍵盤等嘗試應用響應式設計。
What's next?
我們正在努力支援 Windows 和 Mac。無論是哪個平臺,我們都希望做到:
- 支援快捷鍵。這樣就可以為你的 App 某些功能增加快捷鍵。
- 桌面圖示徽章。這樣可以在非全屏通知的情況下讓使用者收到重要的資訊。
- 支援繫結連結 - 當使用者訪問某個已安裝 PWA 的連結時,可以開啟該 PWA。