如何将基于 Vite 的 React 应用程序设置为渐进式 Web 应用程序？

问题描述 投票：0回答：1

我基于Vite创建了一个新的React应用程序。用户应该能够将其安装为渐进式 Web 应用程序，我安装了软件包 vite-plugin-pwa 并将文件 vite.config.ts 修改为 

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [react(), VitePWA({ registerType: 'autoUpdate' })],
  base: "./",
})

在本地运行应用程序时，我看不到安装按钮（我使用的是 Chrome）。我还查看了构建目录，存在 PWA 文件（manifest、worker...）。当我尝试通过 

npx http-serve
运行它时，我仍然看不到安装按钮。

我错过了什么吗？

javascript reactjs progressive-web-apps vite
1个回答
0
投票

您可以使用其中 2 个模块：vite-plugin-pwa 和 vite-pwa/assets-generator， 安装；

npm i @vite-pwa/assets-generator @vite-pwa/assets-generator

接下来你需要配置你的 vite.config.js 文件，添加这个/应该看起来像这样。

在这里您可以自定义应用程序的名称和主题颜色

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    VitePWA({ 
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
      manifest: {
        name: 'Vite PWA Project',
        short_name: 'Vite PWA Project',
        theme_color: '#ffffff',
        icons: [
            {
                src: 'pwa-64x64.png',
                sizes: '64x64',
                type: 'image/png'
            },
            {
                src: 'pwa-192x192.png',
                sizes: '192x192',
                type: 'image/png'
            },
            {
                src: 'pwa-512x512.png',
                sizes: '512x512',
                type: 'image/png',
                purpose: 'any'
            },
            {
                src: 'maskable-icon-512x512.png',
                sizes: '512x512',
                type: 'image/png',
                purpose: 'maskable'
            }
        ],
      }, 
    })
  ],
})

接下来，您必须为您的 PWA 应用程序生成徽标资源，建议使用资源生成器使用 svg 格式徽标，我们可以为其使用脚本或命令，将其添加到您的脚本文件中

{
  "scripts": {
    "generate-pwa-assets": "pwa-assets-generator --preset minimal public/logo.svg"
  }
}
然后运行脚本：

npm run generate-pwa-assets

检查您的公共文件夹中是否有生成的徽标，

接下来将其添加到index.html

<head>
    <!-- other tags -->
    <link rel="icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180" />
    <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
    <meta name="theme-color" content="#ffffff">
</head>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.