Revert "feat(service): 添加 Service Worker 支持并优化图片缓存"

This reverts commit 65b6da1bf7.

src/views/app/layout/Layout.vue

@@ -22,7 +22,7 @@ export default {
       const name = this.$route.name
       if (name === "service") {
         const ecosystem = this.$route.params.ecosystem
-        return getAlias(ecosystem)
+        return getAlias(getEcosystem(ecosystem))
       }
       return this.$route.meta.title
     }

src/views/service/js/service-worker.js

@@ -1,145 +0,0 @@
-// Service Worker 版本号，更新时需要修改此值
-const CACHE_VERSION = 'service-info-cache-v1';
-
-// 需要缓存的图片域名或路径前缀，可根据实际情况修改
-const IMAGE_CACHE_URLS = [
-  'https://img.yzcdn.cn/',
-  'https://imgcdn.happy.cn/',
-  // 其他可能的图片域名
-];
-
-// 安装事件 - 预缓存关键资源
-self.addEventListener('install', (event) => {
-  console.log('Service Worker 安装中...');
-  
-  // 强制激活新的Service Worker
-  self.skipWaiting();
-  
-  // 预缓存一些基本资源，可选
-  event.waitUntil(
-    caches.open(CACHE_VERSION)
-      .then((cache) => {
-        return cache.addAll([
-          // 可以添加需要预缓存的资源
-          // '/service-info.css',
-          // '/service-info.js'
-        ]);
-      })
-  );
-});
-
-// 激活事件 - 清理旧缓存
-self.addEventListener('activate', (event) => {
-  console.log('Service Worker 已激活');
-  
-  // 控制所有客户端页面
-  event.waitUntil(clients.claim());
-  
-  // 清除旧版本缓存
-  event.waitUntil(
-    caches.keys().then((cacheNames) => {
-      return Promise.all(
-        cacheNames.map((cacheName) => {
-          if (cacheName !== CACHE_VERSION) {
-            console.log('Service Worker: 删除旧缓存', cacheName);
-            return caches.delete(cacheName);
-          }
-        })
-      );
-    })
-  );
-});
-
-// 判断请求是否为图片
-function isImageRequest(request) {
-  // 检查请求的URL是否符合我们要缓存的图片URL模式
-  const url = new URL(request.url);
-  
-  // 检查是否为已知图片域名
-  const isKnownImageDomain = IMAGE_CACHE_URLS.some(domain => url.href.startsWith(domain));
-  
-  // 检查URL是否有图片扩展名
-  const hasImageExtension = /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(url.pathname);
-  
-  // 如果请求包含Accept头，检查是否是图片类型
-  const acceptHeader = request.headers.get('Accept');
-  const isImageAccept = acceptHeader && acceptHeader.includes('image/');
-  
-  return isKnownImageDomain || hasImageExtension || isImageAccept;
-}
-
-// 拦截请求 - 缓存图片资源
-self.addEventListener('fetch', (event) => {
-  // 获取请求
-  const request = event.request;
-  
-  // 只处理GET请求
-  if (request.method !== 'GET') return;
-  
-  // 判断是否是图片请求
-  const isImage = isImageRequest(request);
-  
-  if (isImage) {
-    // 处理图片请求：使用缓存优先策略
-    event.respondWith(
-      caches.open(CACHE_VERSION).then((cache) => {
-        return cache.match(request).then((cachedResponse) => {
-          // 返回缓存的响应，如果有
-          if (cachedResponse) {
-            console.log('Service Worker: 从缓存返回图片', request.url);
-            return cachedResponse;
-          }
-          
-          // 如果没有缓存，则发送网络请求
-          return fetch(request).then((networkResponse) => {
-            // 检查响应是否有效
-            if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
-              return networkResponse;
-            }
-            
-            // 复制响应，因为响应是流，只能使用一次
-            const responseToCache = networkResponse.clone();
-            
-            // 将响应添加到缓存
-            console.log('Service Worker: 缓存新图片', request.url);
-            cache.put(request, responseToCache);
-            
-            return networkResponse;
-          });
-        });
-      })
-    );
-  }
-});
-
-// 当网络连接恢复时尝试重新加载失败的图片
-self.addEventListener('sync', (event) => {
-  if (event.tag === 'image-sync') {
-    event.waitUntil(
-      // 这里可以实现重新加载失败的图片逻辑
-      // 例如从IndexedDB中读取失败的图片URL并重试
-      Promise.resolve()
-    );
-  }
-});
-
-// 处理来自页面的消息
-self.addEventListener('message', (event) => {
-  // 如果收到预缓存图片的消息
-  if (event.data && event.data.type === 'CACHE_IMAGES' && event.data.urls) {
-    const urls = event.data.urls;
-    
-    caches.open(CACHE_VERSION).then((cache) => {
-      console.log('Service Worker: 预缓存图片', urls);
-      urls.forEach((url) => {
-        fetch(url)
-          .then((response) => {
-            if (response.ok) {
-              cache.put(url, response);
-            }
-          })
-          .catch((error) => console.error('缓存图片失败:', url, error));
-      });
-    });
-  }
-});

src/views/service/service-t.vue

@@ -60,7 +60,6 @@ import BScroll from 'better-scroll'
 import { shopList } from '@/views/service/js/mock/shop-list'
 import { fetchServiceList } from "@/api/service-list"
 import { ecosystem } from "./js/status"
-import { getEcosystemByValue } from '@/assets/js/utils/ecosystem'
 
 export default {
     components: {
@@ -115,7 +114,7 @@ export default {
     created() {
 
         // 获取 list 内容
-        fetchServiceList({ menuCode: getEcosystemByValue(this.$route.params.ecosystem) }).then(res => {
+        fetchServiceList({ menuCode: (this.$route.params.ecosystem) }).then(res => {
             this.shopList = res.content.content[0].children
             // 在数据加载完成后，等待DOM更新后再初始化滚动
             this.$nextTick(() => {

src/views/service/views/service-info.vue

@@ -58,53 +58,9 @@ export default {
             if (newId) {
                 this.scrollToBlock();
             }
-        },
-        // 监听blocks变化，有新的图片时预缓存
-        'blocks': {
-            handler() {
-                this.cacheImagesInServiceWorker();
-            },
-            deep: true
         }
     },
     methods: {
-        // 注册Service Worker
-        registerServiceWorker() {
-            if ('serviceWorker' in navigator) {
-                navigator.serviceWorker.register('/views/service/js/service-worker.js')
-                    .then(registration => {
-                        console.log('Service Worker 注册成功:', registration.scope);
-                    })
-                    .catch(error => {
-                        console.error('Service Worker 注册失败:', error);
-                    });
-            }
-        },
-
-        // 使用Service Worker缓存当前页面的图片
-        cacheImagesInServiceWorker() {
-            // 确保有图片可供缓存
-            if (!this.blocks || !this.blocks.length) return;
-
-            // 提取所有图片URL
-            const imageUrls = this.blocks
-                .filter(block => block.pic && typeof block.pic === 'string' && block.pic.startsWith('http'))
-                .map(block => block.pic);
-
-            // 如果没有图片URL，则不需要发送消息
-            if (!imageUrls.length) return;
-
-            // 确保Service Worker已激活
-            if (navigator.serviceWorker && navigator.serviceWorker.controller) {
-                // 发送图片URL到Service Worker进行缓存
-                console.log('发送图片缓存请求，图片数量:', imageUrls.length);
-                navigator.serviceWorker.controller.postMessage({
-                    type: 'CACHE_IMAGES',
-                    urls: imageUrls
-                });
-            }
-        },
-
         // 滚动到指定块
         scrollToBlock() {
             const position = this.currentBlockId;
@@ -124,11 +80,10 @@ export default {
                             // 滚动到元素位置
                             window.scrollTo({
                                 top: element.offsetTop - 70,  // 偏移70px给顶部留出空间
-                                // behavior: 'smooth'
                             });
                             this.hasScrolled = true;
                         }
-                    }, 300); // 添加短暂延迟确保DOM已更新
+                    }, 800); // 添加短暂延迟确保DOM已更新
                 });
             }
         },
@@ -147,14 +102,6 @@ export default {
     },
     mounted() {
         this.scrollToBlock();
-
-        // 注册Service Worker
-        this.registerServiceWorker();
-
-        // 预缓存图片
-        this.$nextTick(() => {
-            this.cacheImagesInServiceWorker();
-        });
     }
 }
 </script>