Nuxt 3 PWA 技术文档

Nuxt 3 PWA 技术文档

随着Nuxt 3采用Vite作为其核心构建工具，并且Vite自身提供了强大的PWA支持，特别是通过Vite PWA for Nuxt 3，原有的Nuxt 3 PWA模块（由@kevinmarrec维护）已不再维护。然而，为了那些对历史版本或者想要了解类似模块结构的开发者，我们仍然提供一份基于老版Nuxt 3 PWA模块的技术文档。

---

安装指南

对于新项目

如果您决定继续探索旧有模块，首先确保您的环境已经准备好Nuxt 3的基础配置。接下来，按照以下步骤安装并集成@kevinmarrec/nuxt-pwa模块：

# 使用Yarn
yarn add -D @kevinmarrec/nuxt-pwa

# 使用NPM
npm install -D @kevinmarrec/nuxt-pwa

# 使用PNPM
pnpm install -D @kevinmarrec/nuxt-pwa

集成到现有项目

编辑nuxt.config.js或nuxt.config.ts文件，在其中加入对@kevinmarrec/nuxt-pwa模块的支持：

export default defineNuxtConfig({
  modules: [
    '@kevinmarrec/nuxt-pwa', // 添加此行以启用PWA功能
  ],
});

---

项目使用说明

本模块设计为低介入度，尽量减少配置。但您可以根据需要进行调整，例如在开发环境中启用PWA特性：

export default defineNuxtConfig({
  modules: ['@kevinmarrec/nuxt-pwa'],
  pwa: {
    workbox: {
      enabled: true, // 开发模式下也启用Workbox
    },
  },
});

工具函数：usePWAIcon

该模块提供了一个Composable函数usePWAIcon来方便获取PWA图标URL，以便动态使用于应用中：

import { usePWAIcon } from '@kevinmarrec/nuxt-pwa/composables';

// 获取512像素尺寸的图标URL
const iconUrl = usePWAIcon(512);
// 若需获取maskable图标，则加上选项
const maskableIconUrl = usePWAIcon(512, { maskable: true });

---

项目API使用文档

虽然该模块努力向Nuxt 2的PWA模块接口兼容，具体配置项可能会有所不同。基本配置覆盖了PWA的核心需求，如Service Worker的定制化可以通过设置pwa.workbox.templatePath来指定自定义的worker脚本路径。

示例配置

为了展示Workbox的自定义配置，您可以这样操作：

export default defineNuxtConfig({
  modules: ['@kevinmarrec/nuxt-pwa'],
  pwa: {
    workbox: {
      templatePath: '~/path/to/custom-worker.js', // 自定义服务工作者路径
    },
  },
});

---

项目安装方式回顾

项目本身不复维护，建议转向最新推荐的解决方案。不过，上述步骤概述了旧模块的安装与配置方法。对于寻求现代PWA集成的开发者，推荐查看Vite PWA for Nuxt 3及其资产生成器@vite-pwa/assets-generator的文档来实现最新的PWA功能。

---

请注意，由于模块已不再更新，推荐使用官方支持或者社区活跃的替代方案，以保证项目长期的稳定性和兼容性。