白屏以及離線不可用笆呆，是Web App最大的體驗問題请琳。據(jù)說，PWA是解決這兩大問題的曙光赠幕。
那么俄精，就很有必要來了解試用一下這玩意兒。
OK, 程序員的好習慣之一是使用Github榕堰，搜索"pwa demo"
按照md來進行安裝和部署之后竖慧，按照要求來試玩（因為下載不到chrome canary版本嫌套，暫用普通的Chrome來測試）：
Step 1: Go offline.(切離線環(huán)境)
Step 2: Register BG Sync from above register button.(點擊頁面上注冊按鈕)
Step 3: Enter a git username and click add.(輸入github用戶名)
Step 4: Go online and sync will be triggered when user is gets connectivity and card will be updated.(切上線環(huán)境以后刷新)
試用以后并不能work.
因此簡單修改步驟:
Step 1: 線上環(huán)境首先搜索一個github用戶名。
Step 2: 獲得結(jié)果以后切離線環(huán)境圾旨。
Step 3: 點擊注冊按鈕踱讨。
Step 4: 離線環(huán)境下搜索同一個用戶名，正常來說無法訪問砍的，但是同樣可以獲得正確結(jié)果痹筛。
為何如此神奇呢？
上圖是HTTP Response頭部信息廓鞠，看起來這個serviceWorker是重點
先看一段定義
一個 service worker 是一段運行在瀏覽器后臺進程里的腳本帚稠，它獨立于當前頁面，提供了那些不需要與web頁面交互的功能在網(wǎng)頁背后悄悄執(zhí)行的能力床佳。在將來滋早，基于它可以實現(xiàn)消息推送，靜默更新以及地理圍欄等服務(wù)砌们，但是目前它首先要具備的功能是攔截和處理網(wǎng)絡(luò)請求馆衔，包括可編程的響應(yīng)緩存管理。
接著看代碼：
//Adding `fetch` event listener
self.addEventListener('fetch', (event) => {
console.info('Event: Fetch');
var request = event.request;
//Tell the browser to wait for newtwork request and respond with below
event.respondWith(
//If request is already in cache, return it
caches.match(request).then((response) => {
if (response) {
return response;
}
//if request is not cached, add it to cache
return fetch(request).then((response) => {
var responseToCache = response.clone();
caches.open(cacheName).then((cache) => {
cache.put(request, responseToCache).catch((err) => {
console.warn(request.url + ': ' + err.message);
});
});
return response;
});
})
);
});
可以看到怨绣，全局變量有一個監(jiān)聽器角溃，監(jiān)聽fetch事件，而這邊的fetch就是獲取API的工作篮撑，從上面(If request is already in cache, return it)可以看出如果命中了緩存中的request减细，就直接使用緩存，response同理赢笨。
從下面的代碼中可以看到未蝌，如果處于offline狀態(tài)，請求參數(shù)會先存在localStorage中茧妒，然后sync事件會激活萧吠，從而再去發(fā)送請求
.catch(function (error) {
//If user is offline and sent a request, store it in localStorage
//Once user comes online, trigger bg sync fetch from application tab to make the failed request
localStorage.setItem('request', name);
spinnerElement.classList.remove('show'); //hide spinner
console.error(error);
});
self.addEventListener('sync', (event) => {
console.info('Event: Sync');
//Check registered sync name or emulated sync from devTools
if (event.tag === 'github' || event.tag === 'test-tag-from-devtools') {
event.waitUntil(
//To check all opened tabs and send postMessage to those tabs
self.clients.matchAll().then((all) => {
return all.map((client) => {
return client.postMessage('online'); //To make fetch request, check app.js - line no: 122
})
})
.catch((error) => {
console.error(error);
})
);
}
});
這樣來看，必須了解一下serviceWorker的工作原理與使用方法了桐筏，閱讀文章大有收獲https://www.w3ctech.com/topic/866
根據(jù)以上文章可以在自己的Github Page中應(yīng)用Service Worker纸型，大家可以看看我的Blog，現(xiàn)已開啟服務(wù)https://ganchengyuan1990.github.io/blog/梅忌。
值得注意的是狰腌，目前只有HTTPS協(xié)議下可以使用Service Worker，而Github Page服務(wù)器上使用的就是HTTPS協(xié)議牧氮，所以最合適用來試驗琼腔。另外，如果所有第三方資源(包括圖片)最好也使用HTTPS協(xié)議踱葛，否則就會有報錯丹莲，無法正常顯示光坝。辦法之一就是把圖片資源都放在Github Page服務(wù)器上。
總體來說甥材，PWA效果不錯教馆，在安卓手機中安裝了CHROME以后還可以把頁面添加到主屏幕，就像是一個APP一樣擂达！并且CHROME會幫你加一個首屏動畫，效果拔群胶滋！
但是它的問題也很明顯板鬓，兼容性問題，畢竟那么多IPHONE用戶你不能不管吧究恤。
大家可以關(guān)注一下我的博客https://ganchengyuan1990.github.io/blog/俭令，可以在文章下面留言。
