PWA 技術落地!讓你的站點(Web)秒變APP(應用程式)

語言: CN / TW / HK

Web應用方興未艾,我們已經十分習慣習慣了在電腦上進行以自己的工作,而隨著眾多功能強大的線上網站,我們的Windows的桌面也不再擁擠著各種快捷方式;不光是PC端,在移動端我們也不再在浩如煙海的應用市場安裝各種軟體,輕量級的各種小程式取代了他們的位置,無需安裝點開即用的方式為大家的工作生活帶來了很大便利。

我們很明白這種改變對我們生活工作帶來的便利,但是偶爾在網上衝浪我們也會懷念那個滿桌面都是本地應用的時代,桌面雙擊即可執行,不用在開啟的網頁中搜尋我們需要的功能網頁,哪怕斷網了依舊可以正常使用,使用速度上它們似乎是比網頁更快。

看到這裡你可能想說,你說這麼多,跟你講的PWA有什麼關係啊?

什麼是 漸進式 Web 應用( PWA )?

                --- 漸進式 Web 應用(Progressive Web App簡稱PWA)介紹

PWA 指的是使用指定技術和標準模式來開發的 Web 應用,讓Web應用具有原生應用的特性和體驗。比如我們覺得本地應用使用便捷,響應速度更加快等。

通過PWA技術,有兩個好處。一方面應用開發還是採用Web開發的方式,我們只需要簡單的配置就可以使用,無需為各種作業系統製作安裝包,應用的入口依舊是網頁,在瀏覽器中一鍵安裝,沒有繁瑣的訪問應用商店下載過程。

另一方面應用安裝後,使用者可以通過桌面圖示快速訪問,應用所需資源在第一次安裝後離線快取在本地離線也可使用,可以實時使用系統推送,應用自動升級無需重新安裝。

例如在Chrome中支援PWA技術的站點,可以直接在位址列中點選安裝,或者瀏覽器選項中點選install安裝。

PWA 現狀

PWA 由 Google 於 2016 年提出,於 2017 年正式技術落地,並在 2018 年迎來重大突破,全球頂級的瀏覽器廠商,Google、Microsoft、Apple 已經全數宣佈支援 PWA 技術。PWA的關鍵技術是Service Worker,目前桌面和移動裝置上的所有主流瀏覽器都已支援。目前除了Safari,其他主流瀏覽器都已支援新增主螢幕、推送通知訊息。

在這裡我們簡單為大家介紹一下Service Worker。

Service Worker充當代理伺服器的位置,位於 Web 應用程式、瀏覽器和網路(如果可用)之間。這個API旨在創造更好的離線體驗,攔截網路請求並根據網路是否可用採取適當的行動,並更新駐留在伺服器上的內容,它還允許訪問推送通知和並和後臺API同步。

PWA 的使用場景和未來在何處?

根據PWA的介紹,你可能會問,這玩意兒的價值在哪裡呢?

目前的資料統計顯示移動端之下,PWA並沒有太多市場,在我們移動端上3G、4G到現在5G一個百兆的APP可以被很快的下,除了坐飛機,我們的手機基本不會有離線的時候。

而在PC端,我們開始工作,只要你還在使用Office等辦公軟體,你就會意識到WPA帶來的便捷不可估量。在全球資訊化的過程中,我們的公司也在不斷資訊化的過程。各種常用的工具軟體會變成必備的一環,從而被整合到Web應用中。比如線上Excel線上報表設計,線上word等。

這一切,都逐漸和"線上""web前端"連在一起。

想要將這些應用順利挪入Web應用中,卻不是那麼簡單的事。這些工具功能複雜,資源較重,同時對於一些需要實時反饋的工作流專案,也會經常出現忘記操作的情況。

僅拿線上Excel來說,協同編輯這一方面的難點包括不僅限於:多人衝突處理、版本資料更新、房間管理、富文字處理、複製黏貼處理等等。

下圖使用PWA技術集成了Excel表格編輯器,對於終端使用者,完全保留了Excel的操作體驗,多工工作時,使用alt(cmd)——tab快速切換應用,系統級別推送實時關注工作狀態。而這一切都可以在我們的Web應用中出現,不再需要本地應用。

介紹了PWA的相關知識點,下面我們就一起來通過例項看看PWA如何讓一個站點變成APP吧。

例項使用

準備工作,下載表格編輯器示例, https://www.grapecity.com.cn/developer/spreadjs 讓SpreadJS線上表格編輯器支援PWA只需要實現App Manifest 和 Service Worker

  1. 新增 manifest.json 檔案 新建manifest.json,並在index.html中引用
{
  "name": "SpreadJSDesigner",
  "short_name": "SJSD",
  "descriptions": "SpreadJS線上表格編輯器",
  "start_url": "./",
  "background_color": "#fff",
  "display": "minimal-ui",
  "scope": "./",
  "theme_color": "#fff",
  "icons": [
    {
      "src": "./welcome.png",
      "type": "image/png",
      "sizes": "200x200",
      "purpose": "any"
    }
  ]
}
1.	<link rel="manifest" href="./manifest.json">
  1. 實現Service Worker 新建sw.js, 通過Service Worker快取設計器所需要的spreadjs資源
var cacheName = 'v14.2.2';
var cacheFiles = [
    '/',
    './index.html',
    './lib/css/gc.spread.sheets.excel2013white.14.2.2.css',
        './lib/css/gc.spread.sheets.designer.14.2.2.css',
        './custom.css',
    './lib/scripts/gc.spread.sheets.all.14.2.2.js',
    './lib/scripts/plugins/gc.spread.sheets.charts.14.2.2.js',
    './lib/scripts/plugins/gc.spread.sheets.shapes.14.2.2.js',
    './lib/scripts/plugins/gc.spread.sheets.print.14.2.2.js',
    './lib/scripts/plugins/gc.spread.sheets.barcode.14.2.2.js',
    './lib/scripts/plugins/gc.spread.sheets.pdf.14.2.2.js',
    './lib/scripts/plugins/gc.spread.pivot.pivottables.14.2.2.js',
    './lib/scripts/interop/gc.spread.excelio.14.2.2.js',
    './lib/scripts/resources/zh/gc.spread.sheets.resources.zh.14.2.2.js',
    './lib/scripts/gc.spread.sheets.designer.resource.cn.14.2.2.js',
    './lib/scripts/gc.spread.sheets.designer.all.14.2.2.js',
];
// 監聽 install 事件,安裝完成後,進行檔案快取
self.addEventListener('install', function (e) {
    console.log('Service Worker 狀態: install');
    var cacheOpenPromise = caches.open(cacheName).then(function (cache) {
        // 把要快取的 cacheFiles 列表傳入
        return cache.addAll(cacheFiles);
    });
    e.waitUntil(cacheOpenPromise);
});
// 監聽 fetch 事件,安裝完成後,進行檔案快取
self.addEventListener('fetch', function (e) {
    console.log('Service Worker 狀態: fetch');
    var cacheMatchPromise = caches.match(e.request).then(function (cache) {
            // 如果有cache則直接返回,否則通過fetch請求
            return cache || fetch(e.request);
        }).catch(function (err) {
            console.log(err);
            return fetch(e.request);
        })
    e.respondWith(cacheMatchPromise);
});
// 監聽 activate 事件,清除快取
self.addEventListener('activate', function (e) {
    console.log('Service Worker 狀態: activate');
    var cachePromise = caches.keys().then(function (keys) {
        return Promise.all(keys.map(function (key) {
            if (key !== cacheName) {
                return caches.delete(key);
            }
        }));
    })
    e.waitUntil(cachePromise);
    return self.clients.claim();
});

index.html頁面組冊sw.js

<script>
                if ('serviceWorker' in navigator) {
                        window.addEventListener('load', function () {
                                navigator.serviceWorker.register('./sw.js')
                                .then(function (registration) {
                                        // 註冊成功
                                        console.log('ServiceWorker registration successful with scope: ', registration.scope);
                                })
                                .catch(function (err) {
                                        // 註冊失敗:
                                        console.log('ServiceWorker registration failed: ', err);
                                });
                        });
                }
        </script>

通過以上兩個步驟的操作,spreadjs線上表格編輯器頁面就支援PWA了。注意PWA需要https的支援,本地通過localhost測試不受影響。 通過localhost訪問頁面,可以在Chrome位址列看到安裝選項

安裝後,就可以通過應用程式按鈕雙擊訪問了

對於Chrome 的PWA應用,同樣可以通過快捷鍵開啟開發者工具,在Network中可以看到,資源都是通過ServiceWorker快取獲取

以上便是藉助PWA技術讓SpreadJS線上表格編輯器變成桌面編輯器的操作步驟,大家在熟練掌握並使用 PWA 架構及其相關技術後,便可以試著用它來構建更具高可用的現代化 Web 應用,快去試試吧!