PWA 技術落地！讓你的站點（Web）秒變APP（應用程式）

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吧。

例項使用

準備工作，下載表格編輯器示例， http://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">

2. 實現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 應用，快去試試吧！