go-proxy-bingai中的渐进式Web应用：离线功能全解析-优快云博客

go-proxy-bingai中的渐进式Web应用：离线功能全解析

【免费下载链接】go-proxy-bingai 用 Vue3 和 Go 搭建的微软 New Bing 演示站点，拥有一致的 UI 体验，支持 ChatGPT 提示词，国内可用。项目地址: https://gitcode.com/gh_mirrors/go/go-proxy-bingai

渐进式Web应用（Progressive Web App，PWA）是一种结合了Web和原生应用优势的技术方案。在go-proxy-bingai项目中，PWA技术的应用让用户即使在网络不稳定或完全离线的情况下，也能获得基本的应用使用体验。本文将深入解析该项目离线功能的实现机制，包括Service Worker配置、资源缓存策略和本地数据存储方案。

Service Worker核心实现

Service Worker是PWA离线功能的核心，它作为一个独立的线程运行在浏览器后台，能够拦截网络请求、管理缓存资源并支持后台同步。在go-proxy-bingai中，Service Worker的实现位于frontend/src/sw.ts文件，主要包含以下关键功能：

资源预缓存配置

项目使用Workbox库简化Service Worker的开发，通过precacheAndRoute方法实现关键资源的预缓存：

// [frontend/src/sw.ts](https://link.gitcode.com/i/44311f9f055fb9306c5ebd1bd146a0fc#L17)
precacheAndRoute(self.__WB_MANIFEST);

这行代码会根据构建工具生成的资源清单，自动缓存应用所需的HTML、CSS、JavaScript等静态资源。self.__WB_MANIFEST变量由Vite插件在构建过程中自动注入，包含所有需要预缓存的资源路径和哈希值。

缓存策略实现

项目针对不同类型的资源采用了差异化的缓存策略：

导航请求缓存：使用NavigationRoute确保单页应用的路由正确响应

// [frontend/src/sw.ts](https://link.gitcode.com/i/44311f9f055fb9306c5ebd1bd146a0fc#L23)
registerRoute(new NavigationRoute(createHandlerBoundToURL('./index.html')));

静态资源缓存：对CSS、JavaScript等资源使用StaleWhileRevalidate策略

// [frontend/src/sw.ts](https://link.gitcode.com/i/44311f9f055fb9306c5ebd1bd146a0fc#L25-L33)
registerRoute(
  ({ request }) => ['style', 'manifest', 'script', 'worker'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: `${CACHE_NAME_PREFIX}-assets`,
    plugins: [new CacheableResponsePlugin({ statuses: [200] })],
  })
);

图片资源缓存：对图片资源使用CacheFirst策略并设置过期时间

// [frontend/src/sw.ts](https://link.gitcode.com/i/44311f9f055fb9306c5ebd1bd146a0fc#L35-L50)
registerRoute(
  ({ request, url }) => {
    if (url.pathname.includes('hm.gif') || url.pathname.includes('/fd/ls/')) return false;
    return request.destination === 'image';
  },
  new CacheFirst({
    cacheName: `${CACHE_NAME_PREFIX}-images`,
    plugins: [
      new CacheableResponsePlugin({ statuses: [200] }),
      new ExpirationPlugin({ maxEntries: 100, maxAgeSeconds: 60 * 60 * 24 * 30 }),
    ],
  })
);

应用清单配置

应用清单（Web App Manifest）是PWA的另一个核心文件，它提供了应用的元数据，如名称、图标、显示方式等，使应用能够像原生应用一样被添加到设备主屏幕。在go-proxy-bingai中，应用清单位于web/manifest.webmanifest：

{
  "name": "BingAI",
  "short_name": "BingAI",
  "start_url": "/web/",
  "display": "standalone",
  "background_color": "#ffffff",
  "lang": "en",
  "scope": "/web/",
  "theme_color": "#ffffff",
  "icons": [
    {"src": "./img/pwa/logo-192.png", "sizes": "192x192", "type": "image/png"},
    {"src": "./img/pwa/logo-512.png", "sizes": "512x512", "type": "image/png"},
    {"src": "./img/pwa/logo-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable"}
  ]
}

该配置指定了应用在不同场景下的显示方式，包括：

设置display: "standalone"使应用以独立窗口模式运行，没有浏览器地址栏
定义了不同尺寸的图标以适应各种设备
设置了主题色和背景色，确保应用在安装和启动过程中视觉体验一致

离线数据存储方案

除了资源缓存外，go-proxy-bingai还实现了用户数据的本地存储，确保关键信息在离线状态下也能访问。主要通过以下两种方式实现：

Cookie存储

项目中的frontend/src/utils/cookies.ts模块提供了Cookie操作的封装：

// [frontend/src/utils/cookies.ts](https://link.gitcode.com/i/c67f96d0ddab3246950872365d98e18c#L1-L17)
export function get(name: string) {
  const v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
  return v ? v[2] : null;
}

export function set(name: string, value: string, minutes = 0, path = '/', domain = '') {
  let cookie = name + '=' + value + ';path=' + path;
  if (domain) cookie += ';domain=' + domain;
  if (minutes > 0) {
    const d = new Date();
    d.setTime(d.getTime() + minutes * 60 * 1000);
    cookie += ';expires=' + d.toUTCString();
  }
  document.cookie = cookie;
}

Cookie主要用于存储用户偏好设置和认证信息，这些数据会在每次请求时自动发送到服务器，同时也能在离线状态下被客户端JavaScript访问。

本地缓存的提示词数据

项目将常用的提示词数据预缓存到本地，用户在离线状态下仍可访问这些资源。提示词数据存储在web/data/prompts/目录下，包含多种语言版本：

prompts-zh.json：中文提示词
prompts-zh-TW.json：繁体中文提示词
prompts.csv：CSV格式的提示词数据

这些文件在应用构建过程中会被预缓存，用户在离线状态下访问提示词库时，Service Worker会从缓存中返回这些文件，确保功能可用性。

离线功能使用场景

离线访问历史对话

当用户处于离线状态时，go-proxy-bingai能够通过Service Worker缓存的资源和本地存储的数据，展示之前的对话历史。这一功能对于需要随时查阅对话记录的用户尤为重要，例如在地铁、电梯等网络信号不稳定的环境中。

离线使用提示词库

项目预缓存的提示词库使用户在离线状态下仍能浏览和使用各种预设提示词。用户可以通过compose.html页面访问这些提示词，即使没有网络连接也能获取灵感和帮助。

核心UI离线可用

通过Service Worker的资源缓存机制，应用的核心UI组件在离线状态下依然可以正常加载和显示。这包括导航栏、侧边栏和主要交互元素，确保用户能够浏览应用的基本结构和功能布局。

离线功能实现流程图

mermaid

总结与扩展建议

go-proxy-bingai通过Service Worker、Web App Manifest和本地存储技术的结合，实现了可靠的离线功能，提升了用户体验和应用可用性。主要优势包括：

资源缓存策略：针对不同类型资源采用差异化缓存策略，平衡了性能和新鲜度
关键数据本地存储：使用Cookie和预缓存文件存储关键用户数据和提示词
完善的离线反馈：在离线状态下提供清晰的用户反馈，避免混淆

未来可以考虑以下扩展方向：

实现后台同步功能，在网络恢复后自动同步离线状态下的用户操作
增加IndexedDB存储，提供更强大的本地数据管理能力
优化缓存资源更新策略，减少用户流量消耗

通过这些离线功能的实现，go-proxy-bingai不仅提供了类似原生应用的使用体验，还确保了在网络不稳定环境下的可用性，这对于中国用户尤其重要。开发者可以通过docker-compose.yml快速部署和体验这些功能，也可以参考main.go和frontend/src/main.ts中的代码，进一步了解应用的整体架构。

更多项目文档和使用教程，请参考README.md和docs/目录下的相关文件。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考