hz/ebiz-sunful-eco-h5-weixin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
This reverts commit 65b6da1bf7.
This commit is contained in:
huangze
2025-07-04 10:11:39 +08:00
parent 65b6da1bf7
commit 91894897fe
4 changed files with 3 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/app/layout/Layout.vue
View File

@@ -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
}

145
src/views/service/js/service-worker.js
View File

@@ -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));
});
});
}
});

3
src/views/service/service-t.vue
View File

@@ -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(() => {

55
src/views/service/views/service-info.vue
View File

@@ -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>