领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

2025年了，你还不会pwa?（2025年会有什么变化）

nixiaole 2025-07-14 20:36:46 知识剖析 2 ℃

最近在开发一个简单的个人抽奖的网站，技术栈是使用 Vite + Vue3+ts，由于使用的单台服务器，有时候服务器会被限制带宽，所以平时都会比较访问比较慢。

所以想实现一个离线应用，而 PWA 应用则是目前最佳方案。

1. 依赖安装

项目使用了以下 PWA 相关依赖：

pnpm add -D vite-plugin-pwa workbox-window


2. 配置文件说明

2.1 Vite 配置 (vite.config.ts)

import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',  // 自动更新
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
      manifest: {
        name: '积分抽奖',
        short_name: '积分抽奖',
        description: '积分抽奖系统',
        theme_color: '#ffffff',
        start_url: '/',
        display: 'fullscreen',     // 全屏显示
        background_color: '#ffffff',
        orientation: 'portrait',    // 竖屏显示
        icons: [
          {
            src: '/icon.png',
            sizes: '200x200',
            type: 'image/png'
          }
        ]
      },
      workbox: {
        cleanupOutdatedCaches: true,  // 清理过期缓存
        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],  // 缓存文件类型
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/api\.*/i,  // API 缓存策略
            handler: 'NetworkFirst',
            options: {
              cacheName: 'api-cache',
              expiration: {
                maxEntries: 10,
                maxAgeSeconds: 60 * 60 * 24 * 7  // 7天缓存期限
              },
              cacheableResponse: {
                statuses: [0, 200]
              }
            }
          }
        ]
      },
      devOptions: {
        enabled: true,   // 开发环境启用
        type: 'module'
      }
    })
  ]
})

2.2 HTML 配置 (index.html)

<head>
  <!-- 基础配置 -->
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico">
  
  <!-- 视口配置 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <meta name="description" content="积分抽奖系统">
  <meta name="theme-color" content="#ffffff">
  
  <!-- iOS 设备特殊配置 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="积分抽奖">
  
  <!-- 功能限制 -->
  <meta name="format-detection" content="telephone=no,email=no">
  
  <!-- PWA 相关链接 -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
  <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
  <link rel="manifest" href="/manifest.json">
</head>

2.3 PWA 注册 (src/pwa.ts)

import { registerSW } from 'virtual:pwa-register'

const updateSW = registerSW({
    onNeedRefresh() {
        // 显示更新提示
        if (confirm('新版本已经准备就绪，是否更新？')) {
            updateSW(true)
        }
    },
    onOfflineReady() {
        console.log('应用已经可以离线使用')
    },
    immediate: true
})

2.4 样式配置 (src/assets/styles/main.scss)

:root {
    // 安全区域变量
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

#app {
    // 全屏应用布局
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    // 处理安全区域
    padding-top: var(--safe-area-inset-top);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
}

* {
    -webkit-tap-highlight-color: transparent;
}

3. 功能特性

  • 全屏显示，隐藏浏览器导航栏
  • 离线缓存支持
  • 自动更新检测
  • API 请求缓存策略
  • iOS 设备优化
  • 安全区域适配
  • 禁用缩放和选择
  • 禁用电话和邮箱识别

4. 验证方法

  1. PWA 安装测试：
  2. 访问应用
  3. 查看浏览器地址栏是否出现安装图标
  4. 点击安装，验证是否可以作为独立应用运行
  5. 离线功能测试：
  6. 在 Chrome DevTools 中启用离线模式
  7. 刷新页面，验证应用是否仍能正常访问
  8. 更新机制测试：
  9. 修改应用内容
  10. 重新部署
  11. 验证是否收到更新提示
  12. 缓存验证：
  13. 打开 Chrome DevTools
  14. 检查 Application > Cache Storage
  15. 验证资源是否正确缓存

5. 注意事项

  1. 确保 /public 目录下存在所需的图标文件：
  2. favicon.ico
  3. apple-touch-icon.png
  4. mask-icon.svg
  5. icon.png (200x200)
  6. 在生产环境中必须使用 HTTPS
  7. 首次访问可能需要用户授权通知权限
  8. iOS 设备上的体验可能与 Android 设备略有不同

Tags：

猜你喜欢

最近发表
标签列表