前端PWA进阶：从概念到实践

一、引言：别再把PWA当网页应用

"PWA不就是个网页吗？有什么用？"——我相信这是很多前端开发者常说的话。

但事实是：

• PWA可以提供接近原生应用的体验
• PWA可以离线使用
• PWA可以发送推送通知
• PWA可以添加到主屏幕

PWA不是简单的网页应用，而是一种新的应用形态。今天，我这个专治PWA垃圾的手艺人，就来教你如何构建优秀的PWA应用。

二、PWA的新趋势：从概念到实践

2.1 现代PWA的演进

PWA经历了从概念到实践的演进过程：

• 第一代：基础PWA（manifest.json + Service Worker）
• 第二代：高级PWA（离线功能 + 推送通知）
• 第三代：超级PWA（可安装性 + 原生集成）

2.2 PWA的核心价值

好的PWA可以带来：

• 离线使用：即使在无网络环境下也能使用
• 推送通知：与用户保持互动
• 可安装性：添加到主屏幕，提供原生应用体验
• 性能优化：更快的加载速度和响应时间
• 跨平台：一次开发，多平台使用

三、实战技巧：从概念到实践

3.1 manifest.json配置

// 反面教材：配置不完整的manifest.json
{
  "name": "My App",
  "short_name": "App",
  "start_url": "/"
}

// 正面教材：配置完整的manifest.json
{
  "name": "My Progressive Web App",
  "short_name": "My PWA",
  "description": "A progressive web app that provides a native-like experience",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "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"
    }
  ],
  "orientation": "portrait",
  "categories": ["productivity", "utilities"],
  "screenshots": [
    {
      "src": "screenshots/screenshot1.png",
      "sizes": "1280x720",
      "type": "image/png"
    },
    {
      "src": "screenshots/screenshot2.png",
      "sizes": "1280x720",
      "type": "image/png"
    }
  ],
  "shortcuts": [
    {
      "name": "New Note",
      "short_name": "New",
      "description": "Create a new note",
      "url": "/new-note",
      "icons": [{ "src": "icons/shortcut-icon.png", "sizes": "192x192" }]
    },
    {
      "name": "My Notes",
      "short_name": "Notes",
      "description": "View my notes",
      "url": "/notes",
      "icons": [{ "src": "icons/shortcut-icon.png", "sizes": "192x192" }]
    }
  ]
}

3.2 Service Worker配置

// 反面教材：功能简单的Service Worker
// sw.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/style.css',
        '/script.js'
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

// 正面教材：功能完整的Service Worker
// sw.js
const CACHE_NAME = 'my-pwa-cache-v1';
const ASSETS_TO_CACHE = [
  '/',
  '/index.html',
  '/style.css',
  '/script.js',
  '/icons/icon-192x192.png',
  '/icons/icon-512x512.png'
];

// 安装事件：缓存静态资源
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => {
        console.log('Opened cache');
        return cache.addAll(ASSETS_TO_CACHE);
      })
      .then(() => self.skipWaiting())
  );
});

// 激活事件：清理旧缓存
self.addEventListener('activate', (event) => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
    .then(() => self.clients.claim())
  );
});

//  fetch事件：缓存优先策略
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        // 如果在缓存中找到响应，直接返回
        if (response) {
          return response;
        }

        // 否则发起网络请求
        return fetch(event.request)
          .then((response) => {
            // 检查响应是否有效
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // 克隆响应，因为响应流只能使用一次
            const responseToCache = response.clone();

            // 将响应添加到缓存
            caches.open(CACHE_NAME)
              .then((cache) => {
                cache.put(event.request, responseToCache);
              });

            return response;
          })
          .catch(() => {
            // 网络请求失败时的回退策略
            if (event.request.mode === 'navigate') {
              return caches.match('/');
            }
          });
      })
  );
});

// 推送事件：处理推送通知
self.addEventListener('push', (event) => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge.png',
    data: {
      url: data.url
    }
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

// 通知点击事件：处理用户点击通知
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

3.3 PWA安装提示

// 反面教材：没有自定义安装提示
// 依赖浏览器默认提示

// 正面教材：自定义PWA安装提示
// app.js
let deferredPrompt;

// 监听beforeinstallprompt事件
window.addEventListener('beforeinstallprompt', (e) => {
  // 阻止Chrome 67及更早版本自动显示安装提示
  e.preventDefault();
  // 保存事件，以便稍后触发
  deferredPrompt = e;
  // 显示自定义安装按钮
  document.getElementById('install-button').style.display = 'block';
});

// 点击安装按钮时触发安装
document.getElementById('install-button').addEventListener('click', async () => {
  if (!deferredPrompt) {
    return;
  }
  // 显示安装提示
  deferredPrompt.prompt();
  // 等待用户响应
  const { outcome } = await deferredPrompt.userChoice;
  console.log(`User response to installation: ${outcome}`);
  // 清除保存的事件
  deferredPrompt = null;
  // 隐藏安装按钮
  document.getElementById('install-button').style.display = 'none';
});

// 监听appinstalled事件
window.addEventListener('appinstalled', (evt) => {
  console.log('App installed successfully');
  // 隐藏安装按钮
  document.getElementById('install-button').style.display = 'none';
});

3.4 PWA离线功能

// 反面教材：没有离线功能
// 依赖网络连接

// 正面教材：实现离线功能
// app.js
// 检查网络状态
function updateNetworkStatus() {
  const status = navigator.onLine ? 'online' : 'offline';
  document.getElementById('network-status').textContent = `Network status: ${status}`;
  
  if (!navigator.onLine) {
    document.getElementById('offline-message').style.display = 'block';
  } else {
    document.getElementById('offline-message').style.display = 'none';
  }
}

// 监听网络状态变化
window.addEventListener('online', updateNetworkStatus);
window.addEventListener('offline', updateNetworkStatus);

// 初始化网络状态
updateNetworkStatus();

// 离线数据存储
function saveDataOffline(data) {
  try {
    localStorage.setItem('offline-data', JSON.stringify(data));
    console.log('Data saved offline');
  } catch (error) {
    console.error('Error saving data offline:', error);
  }
}

function loadDataOffline() {
  try {
    const data = localStorage.getItem('offline-data');
    return data ? JSON.parse(data) : null;
  } catch (error) {
    console.error('Error loading data offline:', error);
    return null;
  }
}

// 同步离线数据
async function syncOfflineData() {
  if (navigator.onLine) {
    const offlineData = loadDataOffline();
    if (offlineData) {
      try {
        await fetch('/api/sync', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(offlineData)
        });
        localStorage.removeItem('offline-data');
        console.log('Offline data synced');
      } catch (error) {
        console.error('Error syncing offline data:', error);
      }
    }
  }
}

// 监听网络恢复时同步数据
window.addEventListener('online', syncOfflineData);

3.5 PWA推送通知

// 反面教材：没有推送通知
// 无法与用户保持互动

// 正面教材：实现推送通知
// app.js
// 请求通知权限
async function requestNotificationPermission() {
  const permission = await Notification.requestPermission();
  if (permission === 'granted') {
    console.log('Notification permission granted');
    // 订阅推送服务
    await subscribeToPush();
  } else {
    console.log('Notification permission denied');
  }
}

// 订阅推送服务
async function subscribeToPush() {
  if ('serviceWorker' in navigator && 'PushManager' in window) {
    try {
      const registration = await navigator.serviceWorker.ready;
      const subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY')
      });
      
      // 将订阅信息发送到服务器
      await fetch('/api/subscribe', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(subscription)
      });
      
      console.log('Push subscription successful');
    } catch (error) {
      console.error('Error subscribing to push:', error);
    }
  }
}

// 辅助函数：将base64字符串转换为Uint8Array
function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');
  
  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);
  
  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  
  return outputArray;
}

// 发送测试通知
async function sendTestNotification() {
  await fetch('/api/send-notification', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: 'Test Notification',
      body: 'This is a test notification from your PWA',
      url: '/'
    })
  });
}

四、PWA的最佳实践

4.1 性能优化

1. 资源优化：

   • 压缩CSS、JavaScript和HTML
   • 优化图片，使用WebP格式
   • 减少字体文件大小
   • 使用代码分割

2. 加载优化：

   • 实现预加载
   • 使用Service Worker缓存静态资源
   • 优化首屏加载
   • 使用骨架屏

3. 缓存策略：

   • 静态资源：缓存优先
   • API请求：网络优先，缓存回退
   • 动态内容：网络优先

4.2 可安装性

1. manifest.json配置：

   • 提供完整的图标集
   • 设置合适的显示模式
   • 配置主题颜色和背景颜色
   • 添加快捷方式

2. 安装提示：

   • 自定义安装按钮
   • 合理时机触发安装提示
   • 处理安装事件

3. 用户体验：

   • 提供安装引导
   • 说明PWA的优势
   • 处理安装失败的情况

4.3 离线功能

1. 数据存储：

   • 使用localStorage存储小数据
   • 使用IndexedDB存储大数据
   • 实现数据同步机制

2. 离线UI：

   • 显示离线状态
   • 提供离线功能提示
   • 设计离线友好的界面

3. 错误处理：

   • 处理网络错误
   • 提供离线回退方案
   • 提示用户网络状态

4.4 推送通知

1. 权限管理：

   • 合理时机请求通知权限
   • 说明通知的用途
   • 尊重用户的选择

2. 通知设计：

   • 简洁明了的标题和内容
   • 使用合适的图标和徽章
   • 提供有用的操作

3. 频率控制：

   • 避免过于频繁的通知
   • 提供通知设置
   • 尊重用户的隐私

五、案例分析：从网页到PWA的蜕变

5.1 问题分析

某电商网站存在以下问题：

1. 加载速度慢：页面加载时间超过3秒
2. 离线不可用：无网络时无法访问
3. 用户粘性低：用户活跃度低，转化率低
4. 无法推送通知：无法与用户保持互动
5. 安装体验差：无法添加到主屏幕

5.2 解决方案

1. 实现PWA：

   • 创建manifest.json配置文件
   • 实现Service Worker缓存
   • 添加离线功能
   • 实现推送通知

2. 性能优化：

   • 压缩静态资源
   • 优化图片
   • 实现代码分割
   • 优化首屏加载

3. 用户体验优化：

   • 设计响应式界面
   • 提供安装引导
   • 实现离线友好的UI
   • 设计合理的推送通知

5.3 效果评估

指标	优化前	优化后	改进率
页面加载时间	3秒	0.8秒	73.3%
离线可用性	不可用	可用	100%
用户活跃度	低	高	80%
转化率	2%	4.5%	125%
安装率	0%	25%	25%

六、常见误区

6.1 PWA的误解

• PWA就是网页：PWA是一种新的应用形态，提供接近原生应用的体验
• PWA只能在移动设备上使用：PWA可以在任何支持现代浏览器的设备上使用
• PWA不需要后端支持：PWA需要后端支持推送通知和数据同步
• PWA可以完全替代原生应用：PWA在某些功能上仍有局限性

6.2 常见PWA错误

• manifest.json配置不完整：缺少必要的字段和图标
• Service Worker实现不当：缓存策略不合理，导致性能问题
• 离线功能实现不完善：无法在无网络环境下正常使用
• 推送通知滥用：过于频繁的通知导致用户反感
• 安装提示时机不当：在不合适的时机触发安装提示

七、总结

PWA不是简单的网页应用，而是一种新的应用形态。通过合理的配置和实现，你可以构建接近原生应用体验的PWA，提供离线使用、推送通知、可安装性等功能。

记住：

• 完整配置manifest.json：提供所有必要的字段和图标
• 实现功能完整的Service Worker：合理的缓存策略和离线功能
• 优化性能：确保PWA加载迅速，响应及时
• 关注用户体验：提供友好的安装提示和离线UI
• 持续改进：根据用户反馈不断优化PWA

别再把PWA当网页应用，现在就开始构建优秀的PWA应用吧！

---

关于作者：钛态（cannonmonster01），前端PWA专家，专治各种PWA垃圾和配置错误。

标签：前端PWA、Service Worker、manifest.json、离线功能、推送通知