使用 nuxt3 配置 pwa 有对应的插件,可以直接在官方网站里搜索

初始化一个 nuxt3 项目

执行 npx nuxi@latest init nuxt3-pwa-demo

你可能会遇到这个错误

Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed

官方的 issuse 中的这个解决办法是可以用的

获取下 ip 猛击进入

然后修改下 hosts 文件

185.199.108.133 raw.githubusercontent.com
185.199.109.133 raw.githubusercontent.com
185.199.110.133 raw.githubusercontent.com
185.199.111.133 raw.githubusercontent.com

mac 修改 hosts 文件需要 sudo 命令 sudo vim /etc/hosts

然后 esc 输入 :wq 保存后退出

输入 sudo killall -HUP mDNSResponder 刷新下系统 dns

执行 ping raw.githubusercontent.com 查看下是否可以访问到

这里说点额外的

https://raw.githubusercontent.com 这个网站是什么呢?

GitHub 是一个代码托管平台我们可以在上面创建仓库来存储和分享代码。raw.githubusercontent.com 则可以直接访问和查看仓库中文件的原始内容，而不是通过 GitHub 的网页界面。

上边获取的 https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json

对应的就是 github https://github.com/nuxt/starter/blob/templates/templates/v3.json

配置 pwa

根据图里的内容进行配置

执行 npx nuxi@latest module add @vite-pwa/nuxt 安装 pwa 插件,会自动添加到 nuxt.config.ts 的 modules 中

增加 pwa 配置

import process from 'node:process'

const sw = process.env.SW === 'true'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@vite-pwa/nuxt"],
  pwa: {
    strategies: sw ? 'injectManifest' : 'generateSW',
    srcDir: sw ? 'service-worker' : undefined,
    filename: sw ? 'sw.ts' : undefined,
    registerType: 'autoUpdate',
    manifest: {
      name: 'nuxt3-pwa',
      short_name: 'nuxt3-pwa',
      description: 'nuxt3-pwa',
      theme_color: '#ffffff',
      background_color: '#ffffff',
      icons: [
        {
          src: '/logo.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: '/logo.png',
          sizes: '512x512',
          type: 'image/png',
        },
      ],
    },
    workbox: {
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
    },
    injectManifest: {
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
    },
    client: {
      installPrompt: true,
      // you don't need to include this: only for testing purposes
      // if enabling periodic sync for update use 1 hour or so (periodicSyncForUpdates: 3600)
      periodicSyncForUpdates: 3600,
    },
    devOptions: {
      enabled: true,
      suppressWarnings: true,
      navigateFallback: '/',
      navigateFallbackAllowlist: [/^\/$/],
      type: 'module',
    },
  },
})