作为一种新兴的前端技术，PWA（Progressive Web App）已经得到了越来越多开发者的关注。它通过一系列技术手段来实现类似原生应用的用户体验，同时又具备 web 应用的优势。那么，如果想要在 PWA 中提供更好的用户体验，我们需要做哪些优化呢？
1. 提高网站速度
网站速度是影响用户体验的最重要因素之一，特别是在移动设备上。而 PWA 的优势就在于它可以实现离线缓存和预加载等技术，提高网站加载速度。我们可以使用 Service Worker 来获取资源并缓存。
// www.javascriptcn.com code example
// 注册 Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(registration => {
console.log('ServiceWorker registration successful');
registration.update(); // 更新 Service Worker
}).catch(error => {
console.log('ServiceWorker registration failed');
});
}
// Service Worker 脚本
const CACHE_NAME = 'my-pwa-cache';
const urlsToCache = [
'/',
'/styles.css',
'/app.js',
'/images/logo.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
console.log('Cache opened');
return cache.addAll(urlsToCache); // 缓存资源
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
console.log(`Serve ${event.request.url} from cache`);
return response; // 返回缓存的资源
}
console.log(`Fetch ${event.request.url} from network`);
return fetch(event.request); // 从网络获取资源
})
);
});2. 增加交互性
现代 web 应用需要具备良好的交互性，这也是 PWA 的一个重要优势。我们可以借助 web app manifest 和 GCM（Google Cloud Messaging）来实现 push 消息推送和桌面图标等功能。
<!-- web app manifest --> <link rel="manifest" href="/manifest.json">
// www.javascriptcn.com code example
// manifest.json
{
"name": "My PWA",
"short_name": "PWA",
"start_url": "/",
"icons": [
{
"src": "/images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}// www.javascriptcn.com code example
// GCM
const publicVapidKey = 'public_key';
const subscription = await serviceWorkerRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: publicVapidKey
});
console.log(JSON.stringify(subscription)); // {"endpoint":"https://fcm.googleapis.com/...","keys":{"auth":"...","p256dh":"..."}}
// 服务器端代码
const webPush = require('web-push');
const fs = require('fs');
const path = require('path');
webPush.setVapidDetails(
'mailto:you@yourdomain.com',
fs.readFileSync(path.join(__dirname, 'public_key.txt')), // 公钥
fs.readFileSync(path.join(__dirname, 'private_key.txt')) // 私钥
);
webPush.sendNotification(subscription, 'Hello PWA!').then(() => {
console.log('Push message sent');
});3. 优化可访问性
可访问性（Accessibility）是指 web 应用对各种用户群体都具有同等的可用性，包括老年人和残障人士等。在 PWA 中，我们可以使用 Service Worker 来离线缓存和预加载重要的元素和数据，从而帮助这类用户更好地访问和使用我们的应用。
// www.javascriptcn.com code example <!-- 在 HTML 中添加 manifest 和 viewport meta 标签 --> <html manifest="/manifest.json"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <!-- My PWA --> </body> </html>
// www.javascriptcn.com code example
// Service Worker 脚本
const CACHE_NAME = 'my-pwa-cache';
const urlsToCache = [
'/',
'/styles.css',
'/app.js',
'/images/logo.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
console.log('Cache opened');
return cache.addAll(urlsToCache); // 缓存资源
})
);
});
self.addEventListener('fetch', event => {
if (event.request.method !== 'GET') {
return;
}
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
console.log(`Serve ${event.request.url} from cache`);
return response; // 返回缓存的资源
}
console.log(`Fetch ${event.request.url} from network`);
return fetch(event.request).then(response => {
if (response.status === 404) {
return new Response('Not found');
}
return response; // 返回网络的资源
});
})
);
});4. 增加可靠性
在 PWA 中，我们可以使用 Service Worker 来提高应用的可靠性，即使在离线情况下也可以继续使用。我们需要使用 Cache API 来缓存重要的数据和操作，从而实现离线功能。
// www.javascriptcn.com code example
// Service Worker 脚本
const CACHE_NAME = 'my-pwa-cache';
const urlsToCache = [
'/',
'/styles.css',
'/app.js',
'/images/logo.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
console.log('Cache opened');
return cache.addAll(urlsToCache); // 缓存资源
})
);
});
self.addEventListener('fetch', event => {
if (event.request.method !== 'GET') {
return;
}
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
console.log(`Serve ${event.request.url} from cache`);
return response; // 返回缓存的资源
}
console.log(`Fetch ${event.request.url} from network`);
return fetch(event.request).then(response => {
if (response.status === 404) {
return new Response('Not found');
}
// 如果资源可以缓存，则缓存它
if (response.type === 'basic' || /^(|application\/json)$/.test(response.headers.get('Content-Type'))) {
const clonedResponse = response.clone();
caches.open(CACHE_NAME).then(cache => {
cache.put(event.request, clonedResponse);
});
}
return response; // 返回网络的资源
});
})
);
});综上所述，想要在 PWA 中优化用户体验，可以从速度、交互性、可访问性和可靠性四个方面入手，结合实际的场景和需求，逐步优化和改进我们的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfe91ae46428fe9ec34277