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
-
添加 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">
-
實作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 應用，快去試試吧！
本文是由葡萄城技術開發團隊釋出，轉載請注明出處：葡萄城官網