PWA 渐进式Web应用开发实战指南

渐进式Web应用（Progressive Web App，PWA）是现代Web开发的重要技术方向，它结合了Web和原生应用的优势，为用户提供接近原生应用的体验。本文将从实际开发角度，详细介绍PWA的核心技术和实现要点。

PWA的核心特征

PWA不是单一技术，而是一套设计理念和技术组合：

渐进性增强：在所有浏览器中都能基本工作，在支持PWA特性的浏览器中提供增强体验

响应式设计：适配各种设备尺寸和屏幕方向

离线功能：通过Service Worker实现离线缓存和网络优化

类原生体验：支持添加到主屏幕、全屏运行、推送通知等

安全性：必须通过HTTPS提供服务

可发现性：可被搜索引擎索引，支持深度链接

Service Worker：PWA的核心

Service Worker是PWA的技术基础，它是运行在后台的脚本，充当Web应用和网络之间的代理。

基础实现

// 注册Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('SW registered: ', registration);
      })
      .catch(registrationError => {
        console.log('SW registration failed: ', registrationError);
      });
  });
}

Service Worker生命周期

// sw.js
const CACHE_NAME = 'pwa-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/main.js',
  '/images/logo.png'
];

// 安装事件
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

// 激活事件
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

// 拦截网络请求
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 缓存命中，返回缓存资源
        if (response) {
          return response;
        }
        // 否则发起网络请求
        return fetch(event.request);
      })
  );
});

缓存策略

实际项目中需要根据资源类型选择合适的缓存策略：

// 缓存优先策略（适用于静态资源）
function cacheFirst(event) {
  return caches.match(event.request)
    .then(cachedResponse => {
      return cachedResponse || fetch(event.request);
    });
}

// 网络优先策略（适用于API数据）
function networkFirst(event) {
  return fetch(event.request)
    .then(response => {
      const responseClone = response.clone();
      caches.open(CACHE_NAME)
        .then(cache => {
          cache.put(event.request, responseClone);
        });
      return response;
    })
    .catch(() => {
      return caches.match(event.request);
    });
}

// 最快响应策略
function fastest(event) {
  return new Promise((resolve, reject) => {
    let responded = false;
    const tryResolve = (response) => {
      if (!responded) {
        responded = true;
        resolve(response);
      }
    };

    fetch(event.request).then(tryResolve);
    caches.match(event.request).then(tryResolve);
  });
}

Web App Manifest

Web App Manifest定义了PWA的元数据和外观行为：

{
  "name": "My PWA Application",
  "short_name": "MyPWA",
  "description": "A Progressive Web App example",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#2196F3",
  "background_color": "#ffffff",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

关键配置说明

display: 控制应用的显示模式
- standalone: 独立应用模式，隐藏浏览器UI
- fullscreen: 全屏模式
- minimal-ui: 最小化浏览器UI
- browser: 常规浏览器标签页
start_url: 用户从主屏幕启动应用时的URL
scope: 定义PWA的导航范围
orientation: 首选屏幕方向

推送通知

PWA支持后台推送通知，提升用户参与度：

// 请求通知权限
function requestNotificationPermission() {
  return Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      console.log('通知权限已授予');
      return true;
    }
    return false;
  });
}

// 在Service Worker中处理推送事件
self.addEventListener('push', event => {
  const options = {
    body: event.data ? event.data.text() : '新消息',
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge-72x72.png',
    vibrate: [100, 50, 100],
    data: {
      dateOfArrival: Date.now(),
      primaryKey: 1
    }
  };

  event.waitUntil(
    self.registration.showNotification('PWA通知', options)
  );
});

// 处理通知点击事件
self.addEventListener('notificationclick', event => {
  event.notification.close();

  event.waitUntil(
    clients.openWindow('/')
  );
});

离线页面处理

为离线状态提供友好的用户体验：

// 在Service Worker中处理离线页面
const OFFLINE_URL = '/offline.html';

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.add(OFFLINE_URL))
  );
});

self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request)
        .catch(() => {
          return caches.match(OFFLINE_URL);
        })
    );
  }
});

开发工具和调试

Chrome DevTools

Application面板: 查看Service Worker状态、缓存内容、manifest信息
Network面板: 检查资源加载和缓存命中情况
Lighthouse: PWA审核工具，评估PWA质量

常用调试技巧

// Service Worker调试
console.log('SW: Installing...');
self.skipWaiting(); // 强制激活新版本SW

// 缓存调试
caches.keys().then(names => {
  console.log('Cache names:', names);
});

// 检查PWA安装状态
window.addEventListener('beforeinstallprompt', event => {
  console.log('PWA安装提示可用');
  event.preventDefault();
  // 保存事件以便后续触发
  window.deferredPrompt = event;
});

性能优化建议

预缓存策略

// 预缓存关键资源
const PRECACHE_URLS = [
  '/',
  '/styles/critical.css',
  '/scripts/app.js',
  '/fonts/main.woff2'
];

// 智能缓存更新
self.addEventListener('message', event => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

资源优先级

关键资源: 首页、核心CSS、主要脚本
重要资源: 常用页面、组件、图标
次要资源: 辅助功能、装饰性图片

缓存大小控制

// 限制缓存大小
function limitCacheSize(name, size) {
  caches.open(name).then(cache => {
    cache.keys().then(keys => {
      if (keys.length > size) {
        cache.delete(keys[0]).then(() => {
          limitCacheSize(name, size);
        });
      }
    });
  });
}

实际部署注意事项

HTTPS要求

PWA必须通过HTTPS提供服务，开发环境可使用localhost。

浏览器兼容性

Service Worker: Chrome 40+, Firefox 44+, Safari 11.1+
Web App Manifest: Chrome 39+, Firefox 60+, Safari 13+
推送通知: Chrome 42+, Firefox 44+, Safari 16+

渐进式增强实现

// 功能检测
if ('serviceWorker' in navigator) {
  // 支持Service Worker
}

if ('PushManager' in window) {
  // 支持推送通知
}

if (window.matchMedia('(display-mode: standalone)').matches) {
  // 运行在PWA模式
}

总结

PWA技术让Web应用具备了接近原生应用的能力，通过Service Worker实现离线功能和性能优化，通过Web App Manifest提供原生应用般的用户体验。在实际开发中，需要根据项目需求选择合适的缓存策略，注重渐进式增强的设计理念，并充分利用现代浏览器的PWA特性。

合理实施PWA不仅能提升用户体验，还能改善应用的加载性能和可用性，是现代Web开发中值得掌握的重要技术。

PWA 渐进式Web应用开发实战指南

On this page