Ray 已發佈 2019-10-24

Day2-PWA 初體驗 - PWA 特色

前言

這一篇將會來介紹如何開啟 PWA 的特色。

PWA 特色

在前一篇講了一大推東西,雖然也有一些範例,但是你可能會想問到底 PWA 的特色是什麼?相信在前面你應該已經有所感受到部分,所以我就列出 PWA 主要特色吧~

其中 PWA 最主要特色有三種 (第三個我是直接丟 Google 翻譯,但其他文本是翻黏性) ↓

  • Reliable (可靠)
  • Fast (快速)
  • Engaging (參與)

Reliable

Reliable 的意思是說,就算使用者處於網路連線較差的狀況下也可以達到加載網頁的能力,而這功能最主要仰賴於 Service Worker (後面在介紹)。

一般我們手機某些 APP 在網路不順暢或者開啟飛航模式時,也都可以很快速地開啟 or 運作,那麼 PWA 就是也有支援這一個強大的功能,也就是離線緩存,在網路不順暢或是沒有網路的狀況下,我們可以透過緩存來正常運行 Web。

否則正常你應該會看到一個小恐龍。

所以這也是 PWA 最大特色之一。

Fast

在畫面切換上會非常的流暢順暢,而且也會有良好的 APP 開啟啟動頁面。

Engaging

最後是 Engaging,那 Engaging 呢?其實我覺得 Engaging 最主要意思是想要傳達更接近原生 APP。

Engaging 最主要可以分為這三種

  • PWA 是屬於一種可以安裝的 APP,只需要透過瀏覽器添加到主畫面就可以達到,完全不用進入商店下載 APP。
  • PWA 可以讓使用者感受到就像 Native App 的操作。
  • PWA 最特別的地方就是可以發送離線推播進而達到使用者回流的效果。

其他

其他這部分我就直接引用 it邦鐵人賽之前前輩所撰寫的文章就很詳細了。

- Progressive
  - 漸進式,提供每一位用戶做基本的瀏覽,若支援環境、可以提供更強大的功能。
- Responsive
  - 響應式的用戶介面,可以在不同裝置下作最佳化的顯示。
- Connectivity independent
  - 不依賴網路連接,透過 service workers 可以在低頻寬甚至是離線的環境下瀏覽網站。
- App-like
  - 讓網站可以具有像 APP 般的瀏覽速度等優點,提供更佳的用戶體驗。
- Fresh
  - 藉由 service worker 自動更新網站內容。
- Safe
  - 通過 HTTPS 來提供服務,確保資料安全性。
- Discoverable
  - 能夠執行 SEO 優化,讓使用者快速找到網站,增加網站經營成效。
- Re-engageable
  - 像是推播通知等特性,吸引使用者注意、主動和使用者互動,提升用戶回流率。
- Installable
  - 可以藉由 Add To Home,如同 App,會新增一個 icon,可以直接將網站加到手機桌面上做切換使用,不需要再透過 App Store 下載安裝。
- Linkable
  - 可以將網站、透過 URL 相互傳遞分享。

以上來自 Day 03 - 30 天 Progressive Web App 學習筆記 - 什麼是 PWA?

參考文獻

你的首個 Progressive Web App

Day 03 - 30 天 Progressive Web App 學習筆記 - 什麼是 PWA?

關於筆者

暱稱:Ray

介紹:廢話不多說,讓我們來學習寫程式吧 :D 目前經營一個技術部落格:https://hsiangfeng.github.io/

文章列表 文章列表