PWA之所以这么火，还有一个原因是因为它里面含有多项核心技术，比如：Service Worker、Fetch、Caching Files、Web Push Notifications等等。
1、服务工作线程(Service Worker)
服务工作线程是浏览器在后台独立于网页运行的脚本，它打开了通向不需要网页或用户交互的功能的大门。现在，它们已包括如推送通知和后台同步等功能。
简单代码示例：
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);
