Webpack与PWA的结合实现

Webpack作为现代前端构建工具的核心，其插件系统和代码分割能力为PWA的离线缓存、资源预加载等特性提供了天然支持。通过合理配置Webpack的Workbox插件与Manifest生成器，能够将PWA的关键技术无缝集成到构建流程中。

Webpack基础配置改造

首先需要在项目中安装PWA相关依赖，通过Webpack的workbox-webpack-plugin实现Service Worker的自动生成。基础配置示例如下：

// webpack.config.js
const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = {
  plugins: [
    new WorkboxPlugin.InjectManifest({
      swSrc: './src/sw-template.js', // 自定义Service Worker模板
      swDest: 'service-worker.js',
      exclude: [/\.map$/, /_redirects/]
    })
  ]
}

对应的Service Worker模板需要定义缓存策略：

// src/sw-template.js
workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

workbox.routing.registerRoute(
  /\.(?:png|jpg|jpeg|svg)$/,
  new workbox.strategies.CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60
      })
    ]
  })
);

动态缓存策略实现

对于API请求等动态内容，需要采用StaleWhileRevalidate策略保证数据时效性：

workbox.routing.registerRoute(
  ({url}) => url.pathname.startsWith('/api/'),
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200]
      })
    ]
  })
);

通过Webpack的DefinePlugin可以注入环境变量，实现开发环境禁用Service Worker：

new webpack.DefinePlugin({
  'process.env.ENABLE_SW': JSON.stringify(process.env.NODE_ENV === 'production')
})

应用清单(Manifest)集成

使用webpack-pwa-manifest插件自动生成manifest.json：

const WebpackPwaManifest = require('webpack-pwa-manifest');

new WebpackPwaManifest({
  name: 'Progressive Web App',
  short_name: 'PWA',
  description: 'Webpack驱动的PWA应用',
  background_color: '#ffffff',
  crossorigin: 'use-credentials',
  icons: [
    {
      src: path.resolve('src/assets/icon.png'),
      sizes: [96, 128, 192, 256, 384, 512]
    }
  ]
})

资源预加载优化

利用Webpack的魔法注释实现关键路由预加载：

import(/* webpackPrefetch: true */ './CriticalRoute');

配合Workbox的预缓存策略，在构建阶段生成资源哈希：

new WorkboxPlugin.InjectManifest({
  additionalManifestEntries: [
    {url: '/fallback.html', revision: '123456'}
  ]
})

离线回退处理

创建离线回退页面并通过运行时缓存策略处理：

workbox.routing.setDefaultHandler(
  new workbox.strategies.NetworkOnly()
);

workbox.routing.setCatchHandler(({event}) => {
  switch (event.request.destination) {
    case 'document':
      return caches.match('/offline.html');
    default:
      return Response.error();
  }
});

构建产物分析

通过webpack-bundle-analyzer检查PWA资源分布：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'pwa-report.html'
    })
  ]
}

版本更新策略

在注册Service Worker时加入版本控制逻辑：

// app.js
if ('serviceWorker' in navigator) {
  const VERSION = process.env.APP_VERSION;
  
  navigator.serviceWorker.register('/sw.js').then(reg => {
    reg.addEventListener('updatefound', () => {
      const newWorker = reg.installing;
      newWorker.postMessage({type: 'VERSION_UPDATE', version: VERSION});
    });
  });
}

对应的Service Worker处理逻辑：

self.addEventListener('message', (event) => {
  if (event.data.type === 'VERSION_UPDATE') {
    self.skipWaiting();
    clients.claim().then(() => {
      clients.matchAll().then(clients => {
        clients.forEach(client => client.postMessage('RELOAD_PAGE'));
      });
    });
  }
});

性能监控集成

通过Webpack的入口注入性能采集代码：

entry: {
  main: [
    './src/perf-monitoring.js',
    './src/index.js'
  ]
}

性能监控示例实现：

// perf-monitoring.js
const reportMetrics = (metric) => {
  if (navigator.connection) {
    metric.connectionType = navigator.connection.effectiveType;
  }
  navigator.serviceWorker.controller.postMessage({
    type: 'PERF_METRIC',
    payload: metric
  });
};

new PerformanceObserver((list) => {
  list.getEntries().forEach(reportMetrics);
}).observe({entryTypes: ['navigation', 'resource']});