Time: 2025-04-28 Monday 06:00:00

轻松将web应用改造为ios应用

    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<!-- iOS PWA 最小必要配置 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Ai Chat">

    <!-- iOS 图标 - 使用favicon -->
    <link rel="apple-touch-icon" href="/favicon.ico">

    <!-- 添加顶部安全距离 -->
    <style>
        :root {
            --safe-area-top: env(safe-area-inset-top);
            --safe-area-bottom: env(safe-area-inset-bottom);
            --safe-area-left: env(safe-area-inset-left);
            --safe-area-right: env(safe-area-inset-right);
            --pwa-bottom-offset: -30px;
            /* 底部位置偏移量，调整为更小的值，避免遮挡 */

        body {
            padding-top: var(--safe-area-top);
        }

    </style>

sw.js

// 缓存版本号
const CACHE_NAME = 'ai-chat-v1';

// 需要缓存的文件列表
const urlsToCache = [
  '/',
  '/index.html',
  '/css/style.css',
  '/css/settings-panel.css',
  '/css/upload-file.css',
  '/js/script.js',
  '/js/settings-panel.js',
  '/js/history-manager.js',
  '/js/prompts-config.js',
  '/js/model-descriptions.js',
  '/js/api-config.js',
  '/js/auth.js',
  '/favicon.ico',
  'https://cdn.jsdelivr.net/npm/marked/marked.min.js',
  'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/highlight.min.js'
];

// 安装服务工作线程
self.addEventListener('install', event => {
  // 确保服务工作线程不会在install完成之前终止
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('缓存已打开');
        return cache.addAll(urlsToCache);
      })
      .then(() => self.skipWaiting()) // 强制激活
  );
});

// 激活服务工作线程
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        // 删除旧版本缓存
        cacheNames.map(cacheName => {
          if (cacheName !== CACHE_NAME) {
            console.log('删除旧缓存:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    }).then(() => self.clients.claim()) // 让新服务工作线程立即接管页面
  );
});

// 拦截网络请求
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 返回缓存中的资源（如果有）
        if (response) {
          return response;
        }

        // 克隆请求，因为请求是一个流，只能使用一次
        const fetchRequest = event.request.clone();

        // 发起网络请求
        return fetch(fetchRequest).then(
          response => {
            // 检查响应是否有效
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // 克隆响应，因为响应也是一个流，只能读取一次
            const responseToCache = response.clone();

            // 开启缓存并存储响应
            caches.open(CACHE_NAME)
              .then(cache => {
                // 只缓存GET请求
                if (event.request.method === 'GET') {
                  cache.put(event.request, responseToCache);
                }
              });

            return response;
          }
        ).catch(error => {
          // 网络请求失败时，尝试返回离线页面
          console.log('Fetch failed; returning offline page instead.', error);
        });
      })
  );
});