上篇文章我們對漸進式Web運用（PWA）做了一些基礎的引見。
在這一節中，我們將引見PWA的道理是什麼，它是怎樣最先事情的。
第一步：運用HTTPS
漸進式Web運用順序須要運用HTTPS銜接。雖然運用HTTPS會讓您服務器的開支變多，但運用HTTPS能夠讓您的網站變得更平安，HTTPS網站在Google上的排名也會更靠前。
因為Chrome閱讀器會默許將localhost以及127.x.x.x地點視為測試地點，所以在本示例中您並不須要開啟HTTPS。別的，出於調試目標，您能夠在啟動Chrome閱讀器的時刻運用以下參數來封閉其對網站HTTPS的搜檢：
- user-data-dir
- unsafety-treat-insecure-origin-as-secure
第二步：豎立一個運用順序清單（Manifest）
運用順序清單供應了和當前漸進式Web運用的相干信息，如：
- 運用順序名
- 形貌
- 一切圖片（包括主屏幕圖標，啟動屏幕頁面和用的圖片或許網頁上用的圖片）
本質上講，順序清單是頁面上用到的圖標和主題等資本的元數據。
順序清單是一個位於您運用根目次的JSON文件。該JSON文件返回時必需增加Content-Type: application/manifest+json 或許 Content-Type: application/jsonHTTP頭信息。順序清單的文件名不限，在本文的示例代碼中為manifest.json：
{
"name" : "PWA Website",
"short_name" : "PWA",
"description" : "An example PWA website",
"start_url" : "/",
"display" : "standalone",
"orientation" : "any",
"background_color" : "#ACE",
"theme_color" : "#ACE",
"icons": [
{
"src" : "/images/logo/logo072.png",
"sizes" : "72x72",
"type" : "image/png"
},
{
"src" : "/images/logo/logo152.png",
"sizes" : "152x152",
"type" : "image/png"
},
{
"src" : "/images/logo/logo192.png",
"sizes" : "192x192",
"type" : "image/png"
},
{
"src" : "/images/logo/logo256.png",
"sizes" : "256x256",
"type" : "image/png"
},
{
"src" : "/images/logo/logo512.png",
"sizes" : "512x512",
"type" : "image/png"
}
]
}順序清單文件豎立完以後，你須要在每一個頁面上援用該文件：
<link rel="manifest" href="/manifest.json">以下屬性在順序清單中常常運用，引見申明以下：
- name: 用戶看到的運用稱號
- short_name: 運用短稱號。當顯現運用稱號的處所不夠時，將運用該稱號。
- description: 運用形貌。
- start_url: 運用肇端途徑，相對途徑，默許為/。
- scope: URL局限。比方：假如您將“/app/”設置為URL局限時，這個運用就會一直在這個目次中。
- background_color: 迎接頁面的背景色彩和閱讀器的背景色彩（可選）
- theme_color: 運用的主題色彩，平常都邑和背景色彩一樣。這個設置決議了運用怎樣顯現。
- orientation: 優先扭轉方向，可選的值有：any, natural, landscape, landscape-primary, landscape– – secondary, portrait, portrait-primary, and portrait-secondary
- display: 顯現體式格局——fullscreen（無Chrome），standalone（和原生運用一樣），minimal-ui（最小的一套UI控件集）或許browser（最陳舊的運用閱讀器標籤顯現）
- icons: 一個包括一切圖片的數組。該數組中每一個元素包括了圖片的URL，大小和範例。
第三步：豎立一個 Service Worker
Service Worker 是一個可編程的服務器代辦，它能夠阻攔或許相應收集要求。Service Worker 是位於運用順序根目次的一個個的JavaScript文件。
您須要在頁面對應的JavaScript文件中註冊該ServiceWorker：
if ('serviceWorker' in navigator) {
// register service worker
navigator.serviceWorker.register('/service-worker.js');
}假如您不須要離線的相干功用，您能夠只豎立一個 /service-worker.js文件，如許用戶就能夠直接裝置您的Web運用了！
Service Worker這個觀點能夠比較難明，它實際上是一個事情在其他線程中的規範的Worker，它不能夠接見頁面上的DOM元素，沒有頁面上的API，然則能夠阻攔一切頁面上的收集要求，包括頁面導航，要求資本，Ajax要求。
上面就是運用全站HTTPS的主要原因了。假定您沒有在您的網站中運用HTTPS，一個第三方的劇本就能夠從其他的域名注入他本身的ServiceWorker，然後改動一切的要求——這無疑是異常風險的。
Service Worker 會相應三個事宜：install，activate和fetch。
Install事宜
該事宜將在運用裝置完成后觸發。我們平常在這裏運用Cache API緩存一些必要的文件。
起首，我們須要供應以下設置
- 緩存稱號（CACHE）以及版本（version）。運用能夠有多個緩存存儲，然則在運用時只會運用个中一個緩存存儲。每當緩存存儲有變化時，新的版本號將會指定到緩存存儲中。新的緩存存儲將會作為當前的緩存存儲，之前的緩存存儲將會被取消。
- 一個離線的頁面地點（offlineURL）：當用戶接見了之前沒有接見過的地點時，該頁面將會顯現。
- 一個包括了一切必需文件的數組，包括保證頁面一般功用的CSS和JavaScript。在本示例中，我還增加了主頁和logo。當有差別的URL指向同一個資本時，你也能夠將這些URL離別寫到這個數組中。offlineURL將會加入到這個數組中。
我們也能夠將一些非必要的緩存文件（installFilesDesirable）。這些文件在裝置過程中將會被下載，但假如下載失利，不會觸發裝置失利。
// 設置文件 const version = '1.0.0', CACHE = version + '::PWAsite', offlineURL = '/offline/', installFilesEssential = [ '/', '/manifest.json', '/css/styles.css', '/js/main.js', '/js/offlinepage.js', '/images/logo/logo152.png' ].concat(offlineURL), installFilesDesirable = [ '/favicon.ico', '/images/logo/logo016.png', '/images/hero/power-pv.jpg', '/images/hero/power-lo.jpg', '/images/hero/power-hi.jpg' ];
installStaticFiles() 要領運用基於Promise的體式格局運用Cache API將文件存儲到緩存中。
// 裝置靜態資本
function installStaticFiles() {
return caches.open(CACHE)
.then(cache => {
// 緩存可選文件
cache.addAll(installFilesDesirable);
// 緩存必需文件
return cache.addAll(installFilesEssential);
});
}末了，我們增加一個install的事宜監聽器。waitUntil要領保證了service worker不會裝置直到其相干的代碼被實行。這裏它會實行installStaticFiles()要領，然後self.skipWaiting()要領來激活service worker：
// 運用裝置
self.addEventListener('install', event => {
console.log('service worker: install');
// 緩存主要文件
event.waitUntil(
installStaticFiles()
.then(() => self.skipWaiting())
);
});Activate 事宜
這個事宜會在service worker被激活時發作。你能夠不須要這個事宜，然則在示例代碼中，我們在該事宜發作時將老的緩存悉數清算掉了：
// clear old caches
function clearOldCaches() {
return caches.keys()
.then(keylist => {
return Promise.all(
keylist
.filter(key => key !== CACHE)
.map(key => caches.delete(key))
);
});
}
// application activated
self.addEventListener('activate', event => {
console.log('service worker: activate');
// delete old caches
event.waitUntil(
clearOldCaches()
.then(() => self.clients.claim())
);
});注重self.clients.claim()實行時將會把當前service worker作為被激活的worker。
Fetch 事宜 該事宜將會在收集最先要求時提議。該事宜處置懲罰函數中，我們能夠運用respondWith()要領來挾制HTTP的GET要求然後返回：
- 從緩存中取到的資本文件
- 假如第一步失利，資本文件將會從收集中運用Fetch API來獵取（和service
worker中的fetch事宜無關）。獵取到的資本將會加入到緩存中。 假如第一步和第二步均失利，將會從緩存中返回準確的資本文件。
// application fetch network data self.addEventListener('fetch', event => { // abandon non-GET requests if (event.request.method !== 'GET') return; let url = event.request.url; event.respondWith( caches.open(CACHE) .then(cache => { return cache.match(event.request) .then(response => { if (response) { // return cached file console.log('cache fetch: ' + url); return response; } // make network request return fetch(event.request) .then(newreq => { console.log('network fetch: ' + url); if (newreq.ok) cache.put(event.request, newreq.clone()); return newreq; }) // app is offline .catch(() => offlineAsset(url)); }); }) ); });
offlineAsset(url)要領中運用了一些helper要領來返回準確的數據：
// 是不是為圖片地點?
let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f);
function isImage(url) {
return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false);
}
// return 返回離線資本
function offlineAsset(url) {
if (isImage(url)) {
// 返回圖片
return new Response(
'<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>',
{ headers: {
'Content-Type': 'image/svg+xml',
'Cache-Control': 'no-store'
}}
);
}
else {
// return page
return caches.match(offlineURL);
}
}offlineAsset()要領搜檢要求是不是為一個圖片，然後返回一個帶有“offline”筆墨的SVG文件。其他要求將會返回 offlineURL 頁面。
Chrome開闢者東西中的ServiceWorker部份供應了關於當前頁面worker的信息。个中會顯現worker中發作的毛病，還能夠強迫革新，也能夠讓閱讀器進入離線形式。
Cache Storage 部份例舉了當前一切已緩存的資本。你能夠在緩存須要更新的時刻點擊refresh按鈕。
第四步：豎立可用的離線頁面
離線頁面能夠是靜態的HTML，平常用於提示用戶當前要求的頁面臨時沒法運用。但是，我們能夠供應一些能夠閱讀的頁面鏈接。
Cache API能夠在main.js中運用。但是，該API運用Promise，在不支持Promise的閱讀器中會失利，一切的JavaScript實行會因而受到影響。為了防止這類狀況，在接見/js/offlinepage.js的時刻我們增加了一段代碼來搜檢當前是不是在離線環境中：
/js/offlinepage.js 中以版本號為稱號保留了近來的緩存，獵取一切URL，刪除不是頁面的URL，將這些URL排序然後將一切緩存的URL展現在頁面上：
// cache name
const
CACHE = '::PWAsite',
offlineURL = '/offline/',
list = document.getElementById('cachedpagelist');
// fetch all caches
window.caches.keys()
.then(cacheList => {
// find caches by and order by most recent
cacheList = cacheList
.filter(cName => cName.includes(CACHE))
.sort((a, b) => a - b);
// open first cache
caches.open(cacheList[0])
.then(cache => {
// fetch cached pages
cache.keys()
.then(reqList => {
let frag = document.createDocumentFragment();
reqList
.map(req => req.url)
.filter(req => (req.endsWith('/') || req.endsWith('.html')) && !req.endsWith(offlineURL))
.sort()
.forEach(req => {
let
li = document.createElement('li'),
a = li.appendChild(document.createElement('a'));
a.setAttribute('href', req);
a.textContent = a.pathname;
frag.appendChild(li);
});
if (list) list.appendChild(frag);
});
})
});
開闢者東西
Chrome閱讀器供應了一系列的東西來協助您來調試Service Worker，日記也會直接顯現在掌握台上。
您最好運用匿名形式來舉行開闢事情，如許能夠消除緩存對開闢的滋擾。
末了，Chrome的Lighthouse擴大也能夠為您的漸進式Web運用供應一些革新信息。
漸進式Web運用的要點
漸進式Web運用是一種新的手藝，所以運用的時刻肯定要警惕。也就是說，漸進式Web運用能夠讓您的網站在幾個小時內獲得改良，並且在不支持漸進式Web運用的閱讀器上也不會影響網站的顯現。
然則我們須要斟酌以下幾點：
URL隱蔽
當您的運用就是一個單URL的運用順序時（比方遊戲），我建議您隱蔽地點欄。除此之外的狀況我並不建議您隱蔽地點欄。在Manifest中，display: minimal-ui 或許 display: browser關於大多數狀況來講充足用了。
緩存過大
你不能將您網站中的一切內容緩存下來。關於小一些的網站來講緩存一切內容並非一個題目，然則假如一個網站包括了上千個頁面呢？很明顯不是一切人對網站中的一切內容都感興趣。存儲是有限定的，假如您將一切接見過的頁面都緩存下來的話，緩存大小會增長額很快。
你能夠如許制訂你的緩存戰略：
- 只緩存主要的頁面，比方主頁，聯繫人頁面和近來閱讀文章的頁面。
- 不要緩存任何圖片，視頻和大文件
- 定時清算舊的緩存
- 供應一個“離線閱讀”按鈕，如許用戶就能夠挑選須要緩存哪些內容了。
緩存革新
示例代碼中在提議要求之前會先查詢緩存。當用戶處於離線狀況時，這很好，然則假如用戶處於在線狀況，那他只會閱讀到比較老舊的頁面。
種種資本比方圖片和視頻不會轉變，所以平常都把這些靜態資本設置為歷久緩存。這些資本能夠直接緩存一年（31,536,000秒）。在HTTP Header中，就是：
Cache-Control: max-age=31536000頁面，CSS和劇本文件能夠變化的更頻仍一些，所以你能夠設置一個比較小的緩存超時時候（24小時），並確保在用戶收集銜接恢復時再次從服務器要求：
Cache-Control: must-revalidate, max-age=86400你也能夠在每次網站宣布時，經由過程更名的體式格局強迫閱讀器從新要求資本。
小結
至此，相信你假如根據本文一步一步操縱下來，你也能夠很快把本身的Web運用轉為PWA。在轉為了PWA后，假如有運用滿足 PWA 模子的前端控件的需求，你能夠嘗嘗純前端表格控件SpreadJS，適用於 .NET、Java 和挪動端等平台的表格控件肯定不會令你掃興的。
