PWA之所以這么火，還有一個原因是因為它里面含有多項核心技術，比如：Service Worker、Fetch、Caching Files、Web Push Notifications等等。
1、服務工作線程(Service Worker)
服務工作線程是瀏覽器在后臺獨立于網頁運行的腳本，它打開了通向不需要網頁或用戶交互的功能的大門?，F在，它們已包括如推送通知和后臺同步等功能。
簡單代碼示例：
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
2、網絡請求（Fetch）
fetch（）允許您發出類似于XMLHttpRequest（XHR）的網絡請求。 主要區別在于Fetch API使用Promises，它使用一個更簡單和更清潔的API，避免了回調和不得不記住XMLHttpRequest的復雜API的苦境。
簡單代碼示例：
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
3.緩存文件（Caching Files）
Service Worker API帶有一個Cache接口，可以讓您創建按請求鍵入的響應存儲。 雖然這個接口是面向服務人員的，但它實際上暴露在窗口中，并且可以從腳本中的任何地方訪問。 入口點是緩存。
簡單代碼示例：
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(
[
'/css/bootstrap.css',
'/css/main.css',
'/js/bootstrap.min.js',
'/js/jquery.min.js',
'/offline.html'
]
);
})
);
});
4、推送信息（Web Push Notifications）
推送是基于Service Worker，因為Service Worker在后臺操作。它允許服務器向用戶提示一些信息，并根據用戶不同的行為進行一些簡單的處理。
簡單代碼示例：
let options = {
"body": "Did you make a $1,000,000 purchase at Dr. Evil...",
"icon": "images/ccard.png",
"vibrate": [200, 100, 200, 100, 200, 100, 400],
"tag": "request",
"actions": [
{ "action": "yes", "title": "Yes", "icon": "images/yes.png" },
{ "action": "no", "title": "No", "icon": "images/no.png" }
]
}
serviceWorkerRegistration.showNotification(title, options);
