主 题
一句话：Nuxt 3 PWA 推荐 @vite-pwa/nuxt；旧
@kevinmarrec/nuxt-pwa仅作历史参考。
写在前面
PWA = Web App Manifest + Service Worker，支持「添加到主屏幕」与离线缓存。Nuxt 3 基于 Vite，优先用官方生态的 @vite-pwa/nuxt。
安装（推荐）
bash
npm install -D @vite-pwa/nuxt
typescript
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vite-pwa/nuxt'],
pwa: {
registerType: 'autoUpdate',
manifest: {
name: 'Blog Home',
short_name: 'Blog',
theme_color: '#0a0e17',
icons: [{ src: '/icon-192.png', sizes: '192x192', type: 'image/png' }],
},
},
});在 public/ 放置 icon-192.png、icon-512.png。
历史方案与 sharp 报错
旧文使用 @kevinmarrec/nuxt-pwa，安装时可能遇：
sharp: Command failed / Building fresh packages可配置镜像（.npmrc）：
ini
sharp_binary_host=https://npmmirror.com/mirrors/sharp
sharp_libvips_binary_host=https://npmmirror.com/mirrors/sharp-libvips注意
- SSR 站点：缓存策略勿整站
cache-first，HTML 仍应网络优先 - 本博客主站以 SSR + API 为主，PWA 为可选增强，非必需
- 生产需 HTTPS 才能注册 Service Worker
全部评论(0)