PWA

INFO

PWA 只对首页有全屏效果，所以需要 SPA 单页面应用体验会好一些。

安装依赖

npm install vite-plugin-pwa --save-dev

配置

以vitepress为例子

vite.config.js

import { defineConfig } from 'vitepress';
import { VitePWA } from 'vite-plugin-pwa';
const base = '/';

export default defineConfig({
  head: [
    // Favicon
    ['link', { rel: 'icon', href: base + 'favicon.ico?v=2' }],
    // 需要引入
    ['link', { rel: 'manifest', href: base + 'manifest.webmanifest' }],
    // PWA 主题色（Android）
    ['meta', { name: 'theme-color', content: '#ffffff' }],
    ['meta', { name: 'apple-mobile-web-app-title', content: 'Jxz Blog' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'default' }],
    // iOS 桌面图标
    [
      'link',
      {
        rel: 'shortcut icon',
        href: 'https://gitee.com/you-yan-ping/pic-go-png/raw/master/blog/apple-touch-icon.png',
      },
    ],
    [
      'link',
      {
        rel: 'shortcut icon',
        type: 'image/png',
        href: 'https://gitee.com/you-yan-ping/pic-go-png/raw/master/blog/favicon-96x96.png',
      },
    ],
    [
      'link',
      {
        rel: 'apple-touch-icon',
        sizes: '180x180',
        href: 'https://gitee.com/you-yan-ping/pic-go-png/raw/master/blog/apple-touch-icon.png',
      },
    ],
  ],
  },
  vite: {
    plugins: [
      VitePluginSidebar(),
      VitePWA({
        devOptions: {
          enabled: true,
        },
        registerType: 'autoUpdate', // 自动更新 service worker
        manifest: {
          name: 'Jxz Blog',
          short_name: 'Jxz Blog',
          theme_color: '#ffffff',
          background_color: '#ffffff',
          display: 'standalone',
          start_url: base,
        },
      }),
    ],
    server: {
      host: true,
      strictPort: false, // 端口被占用时是否退出
    },
  },
});

测试

桌面端

使用谷歌浏览器下载当前应用或者safari浏览器保存应用至dock

移动端

手机浏览器保存当前书签，进入应用就是全屏的，也支持离线资源等