桌面漸進式 Web 應用程序:重大突破

已發表: 2019-09-10

目錄

當談到漸進式 Web 應用程序 (PWA) 時,首先想到的是移動應用程序,因為情況一直如此。

 推薦閱讀:什麼是 Progressive Web App

然而,隨著時間的推移,Chrome 等主流瀏覽器憑藉其 PWA 計劃進入桌面市場,進一步擴展了 PWA 看似無限的潛力。

從 Chrome 70 開始,用戶現在可以在 Windows 和 Linux 上安裝 Desktop Progressive Web Apps。 安裝後,它們會從“開始”菜單啟動,並像所有其他已安裝的應用程序一樣運行,沒有地址欄或選項卡。

在 Instagram 上查看此帖子

Progressive Web App (PWA) 與原生應用程序幾乎沒有區別,它是 Web 的未來,它具有類似應用程序的功能,其中之一就是能夠安裝(將 PWA 添加到主屏幕),這可能會徹底改變 Web 體驗。 ? 立即使用 SimiCart 構建 PWA。 . . #pwa #simipwa #app #nativeapp #websitedesign #web #google #chromedevsum​​mit #chromedevsum​​mit2019

SimiCart (@simicart.official) 分享的帖子

它並不止於此。 混合 PWA 微軟商店的基礎正在逐步佈局:在微軟商店中,漸進式 Web 應用程序現在與原生 Windows 應用程序相當,從而將其覆蓋範圍擴大到近 7 億的整個 Windows 10 安裝基礎每月活躍用戶。

了解桌面 PWA 及其為何如此重要

Desktop Progressive Web App擁有 Progressive Web Apps所有優點,正穩步成為桌面應用程序開發趨勢。

 推薦閱讀:12 個漸進式 Web 應用示例,為您提供靈感

對於 Desktop PWA 的簡要了解,您可以將 Desktop PWA 想像成一個在線文檔Google 文檔,它通過使用 Web 組件來運行。 另一方面,本機桌面應用程序就像Microsoft Word :它們很好,有一點點大小,並且設計為運行流暢。 Desktop PWA 現在很的原因是,Desktop PWA 幾乎可以完成原生桌面應用程序的工作,具有更具吸引力的體驗,並且幾乎不佔用硬盤空間。

總之,桌面 PWA 是:

  • 快速——PWA 提供即時、響應迅速且整體令人愉悅的體驗
  • 安裝——PWA 可以像任何其他本機應用程序一樣安裝,並顯示在您的桌面或主屏幕上,而不需要瀏覽器。 PWA 的安裝總是即時的,而且包體積很小。
  • 引人入勝——PWA 採用了高質量 UX 和 UI 的最佳指南,同時無論網絡狀態或設備能力如何,它都能正常工作。

桌面 PWA 最突出的例子是Twitter Lite 。 儘管將重點放在移動用戶上,但 Twitter 在其桌面用戶交互方面取得了顯著增長。

每個會話的頁面增加 65%

發送的推文增加 75%

跳出率降低 20%

標誌著 PWA 運動初始階段的第一槍肯定是由 Twitter 打響的。 緊隨其後的是 Spotify 和 Pinterest 等有影響力的品牌,它們的產品質量也毫不遜色:

桌面 Spotify 和 Pinterest PWA

萬一你錯過了,我們在這裡對 Spotify PWA 進行了徹底的審查。 Spotify PWA 脫穎而出,帶來了徹底改變用戶體驗的改造,使其更加個性化並適應用戶的需求——就像音樂播放器應該具備的那樣。

Spotify PWA 的自適應背景顏色

Pinterest 在核心業務指標方面也經歷了一些積極的改進。

與舊的移動網絡體驗相比,花費的時間增加了40% ,用戶產生的廣告收入增加了44% ,核心參與度增加了60%

他們新的移動網絡體驗是對之前網站整體架構的升級。

他們不僅分解並削減了數百 KB 的 JavaScript,將核心包的大小從 650KB 減少到 150KB,而且還改進了關鍵性能指標。 第一次有意義的繪畫從 4.2 秒減少到 1.8 秒,交互時間從 23 秒減少到 5.6 秒。

對於對 Pinterest PWA 的特定案例研究感興趣的讀者,我們強烈推薦這篇文章:A Pinterest Progressive Web App Performance Case Study。

Pinterest PWA 統計數據
資料來源: PWAstats

如何在桌面上安裝漸進式 Web 應用程序

安裝桌面漸進式 Web 應用程序的過程非常簡單明了。 您最重要的一步只是找到您的應用程序的正確 PWA 地址。

在我們今天的教程中,我們將使用Twitter作為桌面 PWA 的示例:

第 1 步:使用Google Chrome 70 及以上版本,前往 https://mobile.twitter.com/home

第 2 步:檢查地址欄右端是否有(+)按鈕

Twitter PWA 安裝應用彈出窗口

或者如果下拉菜單中有“安裝 Twitter ”選項

Twitter PWA 安裝選項

第 3 步:單擊安裝,該過程將立即結束。

第 4 步:從桌面啟動新安裝的 PWA。

桌面推特圖標
桌面 Twitter 圖標

如何在桌面上卸載 Progressive Web Apps

對於不關心的用戶,刪除桌面 PWA 圖標是卸載 PWA 的一種可接受的方式。 但是,對於正在尋找更可靠的 PWA 卸載方式的用戶,建議執行以下步驟:

第 1 步:打開您的桌面 PWA(在本例中為Twitter

第 2 步:在下拉菜單中選擇“卸載 Twitter ...”

Twitter PWA 卸載選項

第 3 步:選中或取消選中建議的選項,然後最後單擊“刪除

Twitter PWA 卸載彈窗

就是這樣! 只需幾個簡單的步驟,您的 Twitter PWA 現已完成從您的計算機中刪除。

結束語

不可否認,桌面 PWA 是 Web 應用交互和功能的下一個革命性步驟。 為了領先於競爭對手,公司必須立即接受 PWA 運動,並對 Web/應用程序開發的變化趨勢保持警惕。

對於尋求全方位完美Magento Progressive Web App解決方案的在線商家,我們在 SimiCart 為您和您的商店提供完整的軟件包。

使用 SIMICART 構建 PWA