Rax PWA - 快速升級 Web 體驗

Rax PWA - 快速升級 Web 體驗

Rax PWA，基於 Rax 1.x 的 PWA 解決方案。輕鬆經過簡單的配置即可構建功能齊全的 PWA，爲用戶提供媲美原生 APP 體驗的 Web 應用。

隨着移動用戶的增長，在手機上優化用戶體驗變得相當重要。但目前大多 Web 應用體驗依然不佳，脆弱的網絡鏈接與注重實時的交互方式，制約了 Web 應用的發展。咱們但願經過被稱爲下一代 Web 應用的 Progressive Web Apps（如下簡稱 PWA）來改善這一現狀。PWA 不是一項具體的技術，它是應用了一系列技術進行使用體驗優化後的 Web 應用，目標爲具備與原生應用媲美的用戶體驗。

咱們爲 Rax 1.x Web 工程提供了 Rax PWA 解決方案。與其餘的 PWA 方案不一樣，除谷歌 PWA checklist 功能外，咱們認爲任何一個可以被整合成完整且輕配置的優化體驗方案均可被看作是 Rax PWA 的內容。但願經過 Rax PWA 的努力，可以爲開發者提供，提高用戶體驗同時提高開發效率的 PWA 方案，使開發者可以經過極簡的配置開啓 PWA 優化，加強 Web 應用的體驗。

PS：可經過 npm init rax <YourProjectName> 快速建立一個 Rax 1.x 應用。

優化跳轉

在由多個頁面組成的 Web 應用中，切換頁面時會從新加載並刷新全部資源：

經過單頁應用（Single Page Web Application，如下簡稱 SPA），使 Web 應用更具響應性和即時性，擁有更流暢的類 APP 體驗:

Rax 1.x 工程內置統一的 SPA 方案，無需安裝和維護 Router 組件，配置 app.json 便可生成路由和組件對應關係。

{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home/index"
    },
    {
      "path": "/page1",
      "source": "pages/Page1/index"
    }
  ]
}

對於移動端 SPA 加載性能是咱們必需要考慮的問題，一塊兒打包全部頁面的資源必然會產生很大的 JS Bundle，在網絡環境較差的狀況下，容易阻塞資源加載加長等待時間，影響頁面的可用性。

咱們在 Rax 1.x 工程中內置了基於頁面組件的代碼拆分及按需加載方案：打包時將頁面代碼分離到不一樣的 JS Bundle 中，可獲得更小的 JS Bundle，極大影響加載時間。 當用戶訪問一個路由時，動態加載對應頁面所須要的文件，動態提升 APP 的性能，控制資源大小同時保證使用體驗。

經過 SPA 方案賦予頁面更好的交互體驗，但在應用首次訪問加載過程當中，因爲 SPA 渲染強依賴 JS 控制，JS 文件未完成加載時還可能存在白屏等待的狀況，因此咱們還需關注應用首次加載時的用戶體驗。

消除白屏

可經過 Rax PWA 提供的 App Shell 方案消除白屏等待。App Shell 是指支持頁面展現的最小 HTML、CSS 和 JS 的資源集合，內容可爲頁面結構，頁面片斷，骨骼圖等。它每每是純 HTML 片斷，通常只包括內聯 CSS 和 base64 圖片，不強依賴於 JS 框架。能夠在加載、解析、執行 JS 以前就渲染出來，幾乎消除了白屏時間，大大提升用戶體驗，確保提供即時、可靠的加載交互體驗。

在 Rax 1.x 項目 app.json 文件中增長 shell 配置，經過 source 配置的文件便可快速生成 App Shell。

{
  "shell": {
    "source": "shell/index"
  },
  "hydrate": true
}

相比於谷歌提出的 App Shell 概念，Rax PWA 中的 App Shell 可以使用 JSX 進行開發，它會被提早構建並將渲染結果插入 HTML 中，使其可快速加載到用戶屏幕。在 JS 運行時，App Shell 會複用 HTML 中的節點綁定事件並激活組件。

如上圖所示，應用正文部分在加載和 JS 控制渲染以前，展現的即是 App Shell 渲染出的 header 和 footer 部分。其中 {props.children} 便是頁面的主體內容（App Shell 爲應用最頂層組件）。

App Shell 和其餘組件同樣，擁有生命週期、可以使用 hooks API 、可引用外部依賴等等，可經過 App Shell 實現不少功能，好比：

TabBar

App Shell 的內容可爲頁面最外層通用可交互結構。好比 TabBar，將其注入 HTML 中，可方便用戶快速切換頁面進行頁面預覽：

骨骼圖

如上圖所示，中間的空白空分對於用戶來講體驗很是很差，因此在渲染出數據以前，還能夠經過骨骼圖在白屏位置佔位。骨骼圖須要在最短的時間內渲染給用戶，指望瀏覽器在加載完 HTML 以後就能先顯示骨架屏，因此在 App Shell 中還能夠經過骨骼圖提高用戶體驗。

// /src/shell/index.jsx
import { createElement, Fragment, useEffect, useState } from 'rax';

function Shell(props) {
  const [showSkeleton, setShowSkeleton] = useState(true);
  useEffect(() => {
    setShowSkeleton(false);
  });
  return (
    <>
      <img style={{display:showSkeleton?'block':'none'}} src="data:image/png;base64,xxx" />
      {props.children}
    </>
  );
}

export default Shell;

效果以下：

最外層 App Shell 方案能緩解用戶等待的焦慮，消除白屏影響，並進行簡單的交互。但當用戶網速較差，頁面仍遲遲不能完成加載時，咱們還能夠幫助用戶更快渲染出頁面內容。

首屏瞬開

以下圖所示，加載或刷新頁面，頁面內容瞬間渲染，咱們將這種體驗稱爲首屏瞬開。

咱們爲 Rax 1.x 工程提供了 rax-plugin-pwa 插件，經過此插件可選擇開啓對應的 PWA 功能點，經過 快照 和 緩存控制 功能可快速展現頁面。

PS：可經過這篇文檔，瞭解 Rax 1.x 工程插件。

快照

用戶所處環境網速較差致使 JS 文件加載慢時，白屏時間增加會形成很差的體驗。若是在內容變化不大的 Web 應用中可將頁面內容填充爲用戶上一次訪問時對應的內容，極速展現頁面內容，提高首屏加載速度。

頁面會記錄當前頁面內容稱之爲快照，下次訪問相同頁面時，快速將快照填充渲染至當前空白頁面，待 JS 加載完成後再進行狀態和事件綁定，完成頁面渲染。Chrome 弱網調試環境，渲染效果以下：

在 build.json 中配置 rax-plugin-pwa 便可開啓快照功能：

{
  "plugins": [
    ["rax-plugin-pwa", { "snapshot": true }]
  ]
}

緩存控制

在 Web 應用中咱們能夠經過 Service Worker （如下簡稱 SW） 控制頁面緩存，它是 PWA 中最重要的概念之一。它獨立於瀏覽器的主線程運行，不只能夠攔截用戶的網絡請求，還能夠操做緩存，支持 Push 和後臺同步等功能。相比使用重型封裝框架 Workbox ，咱們但願提供給用戶更簡單輕量透明而且易學習的解決方案。

在 build.json 中配置 rax-plugin-pwa 設置開啓 SW 控制緩存：

{
  "plugins": [
    [ "rax-plugin-pwa", {
        "serviceWorker": {
          "preCacheUrlList": ["https://img.alicdn.com/tfs/rax.png"],   // 預緩存 url 列表
          "savedCachePatternList": ["/my-app\/.+/i"],   // 加入緩存的 URL 正則字符串列表
        }
      }
    ]
  ]
}

快速配置預緩存和緩存的 URL 正則字符串列表可快速開啓 SW ，同時支持離線訪問應用。

咱們使用了緩存優先的控制方案，優先從緩存中讀取結果，若緩存中不存在結果，則進行網絡請求，網絡請求成功後，再將結果寫入緩存。保證請求可用同時，加速資源獲取。

優化效果

對比標準 Rax 1.x 工程和開啓快照和 SW 後的頁面，加載時間和 Chrome 開發者工具中的 First Contentful Paint 時間都有了大幅度提高：

方案	網絡環境	FCP時間	Load時間
標準工程	Chrome - Slow 3G	15558.7 ms	15474.7 ms
開啓快照	Chrome - Slow 3G	2032.5 ms(87%)	16317.9 ms
開啓 SW	Chrome - Slow 3G	3096.2 ms(80%)	5147.8 ms(66%)

影響頁面交互體驗還有很是重要的一個環節-數據獲取，數據的加載體驗會直接影響頁面的使用體驗，在完成了首屏加速後，固然咱們也準備了數據加速獲取方案。

加速數據請求

可經過服務端渲染（Server-Side Rendering，如下簡稱 SSR)，加速首屏渲染和數據請求。

SSR 是指將頁面渲染邏輯前置到服務器端執行，由服務器端直接返回渲染好的頁面，而後再由瀏覽器端進行狀態和事件綁定，來達到頁面的可交互狀態。服務端控制數據請求可完全擺脫弱網環境，將數據請求網絡延遲減小到了最小程度。

SSR 擁有包含數據層面更快的首屏加載速度。使用客戶端渲染時，完成首屏渲染通常包括如下步驟：解析 HTML -> 加載 JS -> 獲取數據 -> 渲染。設備的運行狀態或網絡狀況，將直接影響到每個環節的執行時間，最終成倍地影響首屏的呈現時間。而服務端請求數據脫離了弱網環境渲染，將這種數據加載網絡延遲減小到了最小程度。

SSR 還能夠解決頁面 SEO 問題，因爲其頁面內容是相對完整的，因此能夠更好地被搜索引擎所理解。對於一些有 SEO 需求的業務，SSR 顯得尤其重要。

咱們還爲 Rax 1.x 工程提供了 rax-plugin-ssr 插件，能夠快速開始一個 SSR 應用。在 build.json 配置便可開啓 SSR 功能。

{
  "plugins": [
    [ "rax-plugin-ssr" ]
  ]
}

做爲 PWA 工程，咱們還可使用戶更快速啓動應用。

快速啓動應用

無需打開瀏覽器並輸入 URL 地址訪問 Web 應用，經過點擊保存至桌面的 PWA，用戶可快速定位並啓動應用。不只支持全屏預覽應用，還能定製 PWA 的啓動畫面的圖標和顏色等，加強 Web 應用與操做系統的集成能力，提供更好的類 Native 體驗。

經過配置 manifest 可快速生成 Web App Manifest（支持應用在手機主屏上建立圖標的技術方案）：

{
  "plugins": [
    [ "rax-plugin-pwa", {
        "manifest": {
          "name": "My Progressive Web App",
          "short_name": "MyPWA",
          "description": "My awesome Progressive Web App!",
          "background_color": "#ffffff",
          "icon": "src/public/icon.png",
          "start_url": "//market.m.taobao.com/app/mtb/rax-pwa-demo/web/index.html#/",
          "display": "standalone"
        }
      }
    ]
  ]
}

應用構建時會將應用圖標文件 - icon 自動切割爲96x9六、128x12八、180x180、256x25六、512x512 五種尺寸的正方形 Icon 圖以知足不一樣屏幕尺寸的需求，達到高保真的效果，同時兼容不一樣平臺按照瀏覽器標準生成 Web App Manifest 。

用戶在訪問開啓 manifest 的 Web 應用後，即可選擇將其添加到桌面。

持續關注移動 Web 體驗

Rax PWA 解決方案充斥着 PRPL (Push/Preload、Render、Precache、Lazy-Load）開發模式。當前 Rax PWA 仍處在進行時，咱們將繼續探索 PWA 的更多可能性，不斷在技術、業務上提高產品體驗。

當前咱們也在積極籌備優化開發者的開發體驗、提供能有更好交互體驗和高性能的組件體系、不一樣容器中的 Web 應用體驗並打通更多鏈路（好比在手淘中的 Web 頁面加速）等等，任何能夠切實優化或改進移動 Web 體驗的方案咱們都將付諸行動，爲用戶帶來更好的移動體驗。

固然咱們也將在今年雙十一中使用 Rax PWA 方案優化端外頁面性能體驗。讓咱們一塊兒努力，再一次帶來讓用戶驚歎的 Web 應用體驗吧~

詳細使用請見：https://rax.js.org/pwa