Blog

一句话：Nuxt 3 PWA 推荐 @vite-pwa/nuxt；旧 @kevinmarrec/nuxt-pwa 仅作历史参考。

写在前面

PWA = Web App Manifest + Service Worker，支持「添加到主屏幕」与离线缓存。Nuxt 3 基于 Vite，优先用官方生态的 @vite-pwa/nuxt。

安装（推荐）

npm install -D @vite-pwa/nuxt

// 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）：

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

延伸阅读