Google I/O 2018 : 應用於 PC 端的 PWA

DataMonologue發表於2018-05-10

Chrome OS 67 已經支援 PC 端的 Progressive Web App 了,但目前還處於 Beta 階段。Mac 和 Windows 相關的開發工作也在進行中。

PC 端的 PWA 可以像普通應用一樣被「安裝」在裝置上。執行速度非常快。啟動和使用都跟普通應用一樣,沒有位址列和 Tab 頁,所以使用者體驗和普通應用一致。同時,得益於 Service Worker ,App 執行需要的相關資源都可以被快取起來,可靠性有了保證。對於使用者來說,體驗也更加舒適了。

Google I/O 2018 : 應用於 PC 端的 PWA

PC 使用者很重要

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

Google I/O 2018 : 應用於 PC 端的 PWA

開始

在 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)

Google I/O 2018 : 應用於 PC 端的 PWAAdd to Home Screen 獲取更多關於處理新增至主螢幕事件、更新 UI 和展示相關提示的資訊。

App 視窗

App 視窗沒有位址列和 Tab 欄。整個視窗都用來顯示應用。同時還針對 App 的場景進行了優化,相比瀏覽器的 Tab 頁,管理視窗和進行操作都更靈活了。App 視窗使得全屏模式下完成單一任務或者多視窗模式下並行開展任務都更容易。App 視窗也使得在多個 App 間進行切換更自如。

Google I/O 2018 : 應用於 PC 端的 PWA

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

Google I/O 2018 : 應用於 PC 端的 PWA

相關文章