什么？你还不会PWA，那就让Trae来教吧~

前言

最近准备优化一下自己的个人网站，技术栈是使用 Vite + Vue3+ts，由于使用的服务器是在国外，国内有时候服务器会被限制带宽，所以平时都会比较访问比较慢。

所以想着能不能实现一个纯前端的离线应用，类似于将其资源缓存到本地，提高加载速度，而 PWA 应用则是目前最佳方案。

这些配置比较麻烦（Vite 配置、index、css等文件的配置），那就让Trae来帮忙吧，看看他能不能实现~

相关的配置文件说明

1. Vite 配置 (vite.config.ts)

2. HTML 配置 (index.html)，包括视口配置、iOS 设备特殊配置、功能限制以及PWA 相关链接

3.PWA 注册 (src/pwa.ts)，这个是对应的更新提示

typescript 复制代码

import { registerSW } from 'virtual:pwa-register'

const updateSW = registerSW({
    onNeedRefresh() {
        // 显示更新提示
        if (confirm('前端宝典新版本已经准备就绪，是否更新？')) {
            updateSW(true)
        }
    },
    onOfflineReady() {
        console.log('前端宝典应用已经可以离线使用')
    },
    immediate: true
})

4.样式配置 (src/assets/styles/main.scss)，全局变量的设置

scss 复制代码

:root {
    // 安全区域变量
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

#app {
    // 全屏应用布局
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    // 处理安全区域
    padding-top: var(--safe-area-inset-top);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
}

* {
    -webkit-tap-highlight-color: transparent;
}

注意事项

创建PWA图标文件，首先在public目录下创建所需的PWA图标（需要下面的四个PWA图标）

favicon.ico、apple-touch-icon.png、mask-icon.svg、icon.png (200x200)
在生产环境中必须使用 HTTPS，不然不会生效的

最后打包部署的验证方法

PWA 安装测试：

访问应用，然后查看浏览器地址栏是否出现安装图标，最后点击安装，验证是否可以作为独立应用运行
离线功能测试：

在谷歌浏览器的控制台中启用离线模式（也就是关闭网络），刷新页面，验证应用是否仍能正常访问
更新机制测试：

修改应用内容，重新部署，验证是否收到更新提示，看看内容是不是有修改
缓存验证：

打开 Chrome DevTools，检查 Application > Cache Storage，验证资源是否正确缓存

最终部署的效果

开启离线模式也可以加载页面相关的资源，很完美的实现了，Trae还是适合帮忙干脏活累活的