什么是 PWA？
PWA 即 Progressive Web Apps，中文名叫渐进式 Web 应用。它是一种新型的 Web 应用程序开发方式，是将传统网站转化为离线可用、功能强大、像原生应用一样使用的 Web 应用程序。
具体来说，PWA 应用具有以下特点：
- 可离线使用；
- 快速响应，实现了类原生应用的加载速度；
- 具有推送功能，可以向用户主动推送信息；
- 具有类似原生应用的交互体验；
- 安装简单，无需从应用商店下载安装。
PWA 的优势
相比于传统网站，PWA 具有以下优势：
1. 可以离线使用
传统网站需要通过网络才能使用，而 PWA 可以在用户离线时仍然使用，因为它可以将资源缓存到浏览器中，所以即使用户没有网络连接，也可以使用一些基本的功能。
2. 加载速度快
PWA 应用利用了 Service Worker 等技术，可以在首次访问网站时将一些静态资源缓存到浏览器中，在下一次访问时直接从缓存中读取，从而极大地提高了加载速度。
3. 兼容性好
PWA 应用可以在所有现代浏览器上运行，因为它不依赖于某个具体的平台，而是通过运行在浏览器中的 JavaScript 代码来实现。
4. 可以推送消息
PWA 应用可以像原生应用一样向用户推送消息，这样可以让用户更好地与应用进行交互。
5. 用户体验好
PWA 应用的 UI 和原生应用相似，可以提供更好的用户体验，从而吸引更多用户。
如何实现 PWA 应用的 Progressive Loading？
要实现 PWA 应用的 Progressive Loading，需要使用 Service Worker 技术，下面让我们详细介绍一下。
Service Worker 是什么？
Service Worker 是一个在后台运行的 JavaScript 脚本，它可以拦截网络请求，从而实现缓存、离线使用和推送通知等功能。它是 PWA 应用的核心技术之一。
如何创建 Service Worker？
创建 Service Worker 很简单，只需要创建一个 JavaScript 文件，然后在这个文件中注册 Service Worker 即可。下面是一个例子：
// www.javascriptcn.com code example
// 注册 Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').then(registration => {
console.log('Service Worker 注册成功：', registration.scope);
}).catch(error => {
console.log('Service Worker 注册失败：', error);
});
});
}如何使用 Service Worker 进行缓存？
Service Worker 提供了两种缓存方式：Cache API 和 IndexedDB。其中，Cache API 是用来缓存请求和响应的，IndexedDB 是用来缓存数据的。
下面我们以 Cache API 为例来介绍如何使用 Service Worker 进行缓存。
缓存资源
我们可以在 Service Worker 的 install 事件中利用 Cache API 缓存资源，下面是一个例子：
// www.javascriptcn.com code example
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache').then(cache => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/main.js',
'/images/logo.png'
]);
})
);
});上面的代码中，我们在 install 事件中打开了一个名为 my-cache 的新 Cache 对象，然后将一些静态资源添加到缓存中。当我们打开 Cache Storage 界面时就可以看到这些资源的缓存状态。
读取缓存
如果我们想让已经缓存的资源在离线时也能够使用，可以在 fetch 事件中先尝试读取缓存，如果缓存中没有该资源，再向服务器发起请求。
下面是一个例子：
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});上面的代码中，我们首先尝试从缓存中读取请求的资源，如果缓存中有，则直接返回缓存中的资源，否则从服务器获取资源。
刷新缓存
当我们更新了缓存的资源时，需要刷新缓存。我们可以在 Service Worker 的 activate 事件中删除旧的缓存，并将新的缓存添加到缓存中。
下面是一个例子：
// www.javascriptcn.com code example
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keyList => {
return Promise.all(keyList.map(key => {
if (key !== 'my-cache') {
return caches.delete(key);
}
}));
})
);
});上面的代码中，我们遍历了所有的缓存，如果缓存的 key 不是 my-cache，则将该缓存从缓存中删除。
如何使用 Service Worker 进行离线加载？
如果我们要实现离线使用功能，可以在 Service Worker 中添加离线读取的逻辑。下面是一个例子：
// www.javascriptcn.com code example
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
return response;
} else {
return fetch(event.request).then(res => {
return caches.open('my-cache').then(cache => {
cache.put(event.request, res.clone());
return res;
});
}).catch(error => {
return new Response('<h1>Oops! You are offline.</h1>', {
headers: {'Content-Type': 'text/html'}
});
});
}
})
);
});上面的代码中，我们首先尝试从缓存中读取请求的资源，如果缓存中有，则直接返回缓存中的资源，否则使用 fetch 从服务器获取资源。如果服务器返回的资源正常，则将该资源添加到缓存中，否则返回一个带有错误信息的 Response 对象。
如何使用 Service Worker 进行推送通知？
如果我们要实现推送通知功能，需要使用 Push API 和 Notification API。
注册推送服务
在 Web 应用中，我们可以使用浏览器的推送服务来推送通知。可以通过以下代码注册推送服务：
navigator.serviceWorker.register('/sw.js').then(registration => {
const subscribeOptions = {userVisibleOnly: true, applicationServerKey: '...'};
return registration.pushManager.subscribe(subscribeOptions);
}).then(pushSubscription => {
console.log('Push 订阅成功：', pushSubscription);
}).catch(error => {
console.log('Push 订阅失败：', error);
});其中，userVisibleOnly 表示该推送通知只有在用户当前正在使用应用时才推送，不会在后台推送。applicationServerKey 是一个公钥，用于标识该 Web 应用与推送服务之间的信任关系，需要向推送服务提供商获取。
推送通知
当我们获得了推送服务的订阅后，就可以使用以下代码推送通知：
// www.javascriptcn.com code example
const notificationOptions = {
body: 'This is a push notification.',
icon: '/images/icon.png'
};
pushSubscription.sendNotification('This is a title.', notificationOptions).then(() => {
console.log('Push 发送成功！');
}).catch(error => {
console.log('Push 发送失败：', error);
});上面的代码中，我们向订阅服务发送了一条通知。其中，body 表示通知的正文内容，icon 表示通知的图标，可以是一个 URL 或者是 Service Worker 中已缓存的文件名。
接收推送通知
当我们成功推送了一条通知后，用户会在浏览器中接收到该通知，并且可以点击通知跳转到应用中。
当用户点击通知时，Service Worker 就会收到 push 事件，并在 event.data 中获得通知的内容。下面是一个例子：
// www.javascriptcn.com code example
self.addEventListener('push', event => {
let data = {};
if (event.data) {
data = event.data.json();
}
const notificationOptions = {
body: data.message || 'This is a push notification.',
icon: '/images/icon.png'
};
event.waitUntil(
self.registration.showNotification(data.title || 'Notification', notificationOptions)
);
});上面的代码中，我们首先从 event.data 中获取到通知的内容，并构造出通知的 options。然后调用 self.registration.showNotification 方法显示该通知。
实战示例
下面是一个使用 PWA 实现渐进式加载的例子：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>PWA 渐进式加载示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="/styles.css">
<script type="module" src="/main.js"></script>
</head>
<body>
<img src="/images/logo.png" alt="Logo">
<h1>Hello, PWA!</h1>
<p>This is a PWA example for progressive loading.</p>
</body>
</html>上面的代码中，我们首先在 head 中引入了一个 manifest.json 文件，用于指定 PWA 的一些属性，比如图标、名称、主题颜色等。
然后引入了样式表和 JavaScript 脚本。
可以使用以下命令创建 manifest.json 文件：
// www.javascriptcn.com code example
{
"name": "PWA 渐进式加载示例",
"short_name": "PWA 渐进式加载",
"icons": [
{
"src": "/images/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/images/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/images/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/images/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/images/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/images/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#006699"
}其中，icons 字段用于指定应用的图标，start_url 字段用于指定应用的首页。
可以使用以下命令创建 Service Worker 文件 sw.js：
// www.javascriptcn.com code example
const CACHE_NAME = 'my-cache';
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
return cache.addAll([
'/',
'/styles.css',
'/main.js',
'/images/logo.png'
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
return response;
} else {
return fetch(event.request).then(res => {
return caches.open(CACHE_NAME).then(cache => {
cache.put(event.request, res.clone());
return res;
});
}).catch(error => {
return new Response('<h1>Oops! You are offline.</h1>', {
headers: {'Content-Type': 'text/html'}
});
});
}
})
);
});
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keyList => {
return Promise.all(keyList.map(key => {
if (key !== CACHE_NAME) {
return caches.delete(key);
}
}));
})
);
});其中，CACHE_NAME 用于定义缓存的名称。
可以使用以下命令创建主要的 JavaScript 文件 main.js：
console.log('Hello, PWA!');现在我们已经完成了一个简单的 PWA 应用，可以通过以下命令将该应用部署到 Web 服务器上：
至此，我们已经成功实现了一个简单的 PWA 应用的 Progressive Loading。通过使用 Service Worker 技术，我们可以缓存静态资源并提高应用的加载速度，我们还可以实现离线使用、推送通知等功能，值得深入研究。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca617fe46428fe9e278b55