news 2026/4/15 18:44:05

前端 PWA 新方法：别再忽视 PWA 了

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
前端 PWA 新方法：别再忽视 PWA 了

前端 PWA 新方法：别再忽视 PWA 了

什么是前端 PWA 新方法？

前端 PWA 新方法是指在前端开发中，随着技术的发展，出现的新的 PWA（Progressive Web App）技术和方法。别以为 PWA 只是添加一个 manifest.json 文件，那是十年前的玩法了。

为什么需要关注前端 PWA 新方法？

  • 用户体验：提供类原生应用的用户体验
  • 离线访问：支持离线访问，提高应用可靠性
  • 安装能力：可以安装到主屏幕，提高用户粘性
  • 推送通知：支持推送通知，提高用户engagement
  • 性能：提高应用性能，减少加载时间

前端 PWA 新方法

1. manifest.json 配置

使用现代 manifest.json 配置，提供更好的安装体验。

// manifest.json { "name": "My PWA App", "short_name": "My App", "description": "A Progressive Web App", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#007bff", "icons": [ { "src": "/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png", "purpose": "any maskable" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" } ], "orientation": "portrait", "categories": ["productivity", "utilities"], "screenshots": [ { "src": "/screenshots/screenshot1.png", "sizes": "1280x720", "type": "image/png" }, { "src": "/screenshots/screenshot2.png", "sizes": "1280x720", "type": "image/png" } ], "shortcuts": [ { "name": "New Note", "short_name": "New", "description": "Create a new note", "url": "/new-note", "icons": [{ "src": "/icons/shortcut-icon.png", "sizes": "192x192" }] }, { "name": "My Notes", "short_name": "Notes", "description": "View my notes", "url": "/my-notes", "icons": [{ "src": "/icons/shortcut-icon.png", "sizes": "192x192" }] } ], "iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7" }

2. Service Worker 配置

使用现代 Service Worker 配置，提供更好的离线体验。

// service-worker.js const CACHE_NAME = 'my-pwa-cache-v1'; const ASSETS = [ '/', '/index.html', '/manifest.json', '/service-worker.js', '/css/style.css', '/js/main.js', '/icons/icon-512x512.png' ]; // 安装 Service Worker self.addEventListener('install', (event) => { event.waitUntil( caches.open(CACHE_NAME) .then((cache) => { console.log('Opened cache'); return cache.addAll(ASSETS); }) ); self.skipWaiting(); }); // 激活 Service Worker self.addEventListener('activate', (event) => { const cacheWhitelist = [CACHE_NAME]; event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); self.clients.claim(); }); // 拦截网络请求 self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) .then((response) => { if (response) { return response; } return fetch(event.request) .then((response) => { if (!response || response.status !== 200 || response.type !== 'basic') { return response; } const responseToCache = response.clone(); caches.open(CACHE_NAME) .then((cache) => { cache.put(event.request, responseToCache); }); return response; }) .catch(() => { if (event.request.mode === 'navigate') { return caches.match('/offline.html'); } }); }) ); }); // 推送通知 self.addEventListener('push', (event) => { const data = event.data.json(); const options = { body: data.body, icon: '/icons/icon-192x192.png', badge: '/icons/badge.png', vibrate: [100, 50, 100], data: { url: data.url }, actions: [ { action: 'view', title: 'View Details' }, { action: 'close', title: 'Close' } ] }; event.waitUntil( self.registration.showNotification(data.title, options) ); }); // 通知点击 self.addEventListener('notificationclick', (event) => { event.notification.close(); if (event.action === 'view') { event.waitUntil( clients.openWindow(event.notification.data.url) ); } });

3. PWA 安装提示

使用现代 PWA 安装提示，提供更好的安装体验。

// 检测是否支持 PWA 安装 let deferredPrompt; window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); deferredPrompt = e; // 显示自定义安装按钮 document.getElementById('install-btn').style.display = 'block'; }); // 安装 PWA document.getElementById('install-btn').addEventListener('click', async () => { if (!deferredPrompt) return; deferredPrompt.prompt(); const { outcome } = await deferredPrompt.userChoice; console.log(`User ${outcome === 'accepted' ? 'accepted' : 'dismissed'} the install prompt`); deferredPrompt = null; document.getElementById('install-btn').style.display = 'none'; }); // 检测 PWA 是否安装 window.addEventListener('appinstalled', (evt) => { console.log('PWA was installed'); document.getElementById('install-btn').style.display = 'none'; }); // 检测 PWA 运行环境 function isPWA() { return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone || document.referrer.includes('android-app://'); } if (isPWA()) { console.log('Running as PWA'); // 隐藏安装按钮 document.getElementById('install-btn').style.display = 'none'; }

4. PWA 离线功能

使用现代 PWA 离线功能，提供更好的离线体验。

// 检测网络状态 function updateOnlineStatus() { const status = navigator.onLine ? 'online' : 'offline'; document.getElementById('status').textContent = `You are currently ${status}`; if (!navigator.onLine) { document.getElementById('offline-message').style.display = 'block'; } else { document.getElementById('offline-message').style.display = 'none'; } } window.addEventListener('online', updateOnlineStatus); window.addEventListener('offline', updateOnlineStatus); // 初始检测 updateOnlineStatus(); // 离线数据存储 function saveDataOffline(data) { localStorage.setItem('offline-data', JSON.stringify(data)); console.log('Data saved offline'); } function loadDataOffline() { const data = localStorage.getItem('offline-data'); if (data) { console.log('Loaded data from offline storage'); return JSON.parse(data); } return null; } // 同步离线数据 async function syncOfflineData() { if (navigator.onLine) { const offlineData = loadDataOffline(); if (offlineData) { try { const response = await fetch('/api/sync', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(offlineData) }); if (response.ok) { localStorage.removeItem('offline-data'); console.log('Offline data synced'); } } catch (error) { console.error('Error syncing offline data:', error); } } } } // 监听网络恢复 window.addEventListener('online', syncOfflineData); // 定期同步 setInterval(syncOfflineData, 60000); // 每 60 秒尝试同步

5. PWA 推送通知

使用现代 PWA 推送通知，提供更好的用户engagement。

// 请求推送通知权限 async function requestNotificationPermission() { if ('Notification' in window) { const permission = await Notification.requestPermission(); if (permission === 'granted') { console.log('Notification permission granted'); await subscribeToPush(); } else { console.log('Notification permission denied'); } } } // 订阅推送通知 async function subscribeToPush() { if ('serviceWorker' in navigator && 'PushManager' in window) { const registration = await navigator.serviceWorker.ready; let subscription = await registration.pushManager.getSubscription(); if (!subscription) { subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array('YOUR_PUBLIC_VAPID_KEY') }); // 发送订阅信息到服务器 await sendSubscriptionToServer(subscription); } } } // 发送订阅信息到服务器 async function sendSubscriptionToServer(subscription) { try { const response = await fetch('/api/push-subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(subscription) }); if (response.ok) { console.log('Subscription sent to server'); } } catch (error) { console.error('Error sending subscription:', error); } } // 辅助函数：将 Base64 URL 转换为 Uint8Array function urlBase64ToUint8Array(base64String) { const padding = '='.repeat((4 - base64String.length % 4) % 4); const base64 = (base64String + padding) .replace(/-/g, '+') .replace(/_/g, '/'); const rawData = window.atob(base64); const outputArray = new Uint8Array(rawData.length); for (let i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i); } return outputArray; } // 发送推送通知 async function sendNotification() { try { const response = await fetch('/api/send-notification', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: 'New Notification', body: 'This is a test notification', url: '/' }) }); if (response.ok) { console.log('Notification sent'); } } catch (error) { console.error('Error sending notification:', error); } }

6. PWA 性能优化

使用现代 PWA 性能优化，提高应用性能。

// 预缓存关键资源 self.addEventListener('install', (event) => { event.waitUntil( caches.open('my-pwa-cache-v1') .then((cache) => { return cache.addAll([ '/', '/index.html', '/manifest.json', '/service-worker.js', '/css/style.css', '/js/main.js', '/icons/icon-512x512.png' ]); }) ); }); // 缓存策略 self.addEventListener('fetch', (event) => { const url = new URL(event.request.url); // 静态资源缓存优先 if (url.pathname.startsWith('/css/') || url.pathname.startsWith('/js/') || url.pathname.startsWith('/icons/')) { event.respondWith( caches.match(event.request) .then((response) => { return response || fetch(event.request) .then((response) => { const responseToCache = response.clone(); caches.open('my-pwa-cache-v1') .then((cache) => { cache.put(event.request, responseToCache); }); return response; }); }) ); } // API 请求网络优先 else if (url.pathname.startsWith('/api/')) { event.respondWith( fetch(event.request) .then((response) => { return response; }) .catch(() => { return caches.match('/offline.html'); }) ); } // 页面请求缓存优先，回退到网络 else { event.respondWith( caches.match(event.request) .then((response) => { return response || fetch(event.request) .then((response) => { const responseToCache = response.clone(); caches.open('my-pwa-cache-v1') .then((cache) => { cache.put(event.request, responseToCache); }); return response; }) .catch(() => { return caches.match('/offline.html'); }); }) ); } }); // 后台同步 self.addEventListener('sync', (event) => { if (event.tag === 'sync-data') { event.waitUntil(syncData()); } }); async function syncData() { // 同步数据逻辑 console.log('Background sync triggered'); } // 客户端注册后台同步 async function registerSync() { if ('serviceWorker' in navigator && 'SyncManager' in window) { const registration = await navigator.serviceWorker.ready; await registration.sync.register('sync-data'); console.log('Background sync registered'); } }

7. PWA 可访问性

使用现代 PWA 可访问性，提高应用可访问性。

// 可访问性最佳实践 // 1. 语义化 HTML // 使用语义化 HTML 元素 // 2. ARIA 标签 // 为非语义化元素添加 ARIA 标签 // 3. 键盘导航 // 确保所有交互元素可通过键盘访问 // 4. 颜色对比度 // 确保文本与背景的对比度符合 WCAG 标准 // 5. 屏幕阅读器支持 // 确保应用可被屏幕阅读器正确读取 // 6. 焦点管理 // 合理管理焦点，提高键盘导航体验 // 7. 错误处理 // 为错误提供清晰的反馈 // 8. 字体大小 // 允许用户调整字体大小 // 9. 动画控制 // 提供关闭动画的选项，减少对用户的干扰 // 10. 测试 // 使用可访问性测试工具测试应用 // 可访问性测试工具 // - Lighthouse // - axe-core // - WAVE // - Accessibility Insights // 示例：使用 axe-core 进行可访问性测试 import axe from 'axe-core'; axe.run(document, (err, results) => { if (err) { console.error('Error running axe:', err); return; } if (results.violations.length > 0) { console.log('Accessibility violations:', results.violations); } else { console.log('No accessibility violations found!'); } });

8. PWA 分析和监控

使用现代 PWA 分析和监控，了解应用使用情况。

// 分析工具集成 // Google Analytics // gtag.js window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-XXXXXXXX-X'); // Google Analytics 4 // gtag.js window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX'); // PWA 特定事件跟踪 // 安装事件 gtag('event', 'pwa_install', { 'event_category': 'PWA', 'event_label': 'User installed PWA' }); // 离线事件 gtag('event', 'pwa_offline', { 'event_category': 'PWA', 'event_label': 'User went offline' }); // 推送通知事件 gtag('event', 'pwa_notification', { 'event_category': 'PWA', 'event_label': 'User received notification' }); // 监控 Service Worker // 错误监控 serviceWorker.addEventListener('error', (error) => { console.error('Service Worker error:', error); // 发送错误到监控服务 }); // 性能监控 self.addEventListener('fetch', (event) => { const start = performance.now(); event.respondWith( fetch(event.request) .then((response) => { const end = performance.now(); const duration = end - start; console.log(`Fetch ${event.request.url} took ${duration}ms`); return response; }) ); }); // 自定义监控 function sendMetric(name, value) { fetch('/api/metrics', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name, value, timestamp: new Date().toISOString() }) }); } // 监控安装率 document.getElementById('install-btn').addEventListener('click', () => { sendMetric('pwa_install_attempt', 1); }); window.addEventListener('appinstalled', () => { sendMetric('pwa_install_success', 1); });

9. PWA 部署和更新

使用现代 PWA 部署和更新，确保应用及时更新。

// Service Worker 更新 self.addEventListener('install', (event) => { self.skipWaiting(); }); self.addEventListener('activate', (event) => { self.clients.claim(); // 清理旧缓存 const cacheWhitelist = ['my-pwa-cache-v1']; event.waitUntil( caches.keys().then((cacheNames) => { return Promise.all( cacheNames.map((cacheName) => { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); }); // 客户端检测更新 async function checkForUpdates() { if ('serviceWorker' in navigator) { const registration = await navigator.serviceWorker.ready; registration.addEventListener('updatefound', () => { const newWorker = registration.installing; newWorker.addEventListener('statechange', () => { if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { // 提示用户刷新页面 document.getElementById('update-notification').style.display = 'block'; } }); }); } } // 触发更新 document.getElementById('refresh-btn').addEventListener('click', () => { window.location.reload(); }); // 定期检查更新 setInterval(checkForUpdates, 60000); // 每 60 秒检查一次 // 部署策略 // 1. 版本控制 // 使用版本号管理 Service Worker 和缓存 // 2. 渐进式部署 // 先部署到部分用户，再逐步扩大范围 // 3. 回滚机制 // 准备回滚方案，应对部署失败 // 4. 监控 // 部署后监控应用状态 // 5. 文档 // 为部署和更新流程编写文档

10. PWA 最佳实践

// PWA 最佳实践 // 1. 响应式设计 // 确保应用在不同设备上正常显示 // 2. 性能优化 // 优化应用性能，减少加载时间 // 3. 离线功能 // 实现离线访问，提高应用可靠性 // 4. 安装体验 // 提供良好的安装体验，鼓励用户安装 // 5. 推送通知 // 合理使用推送通知，提高用户engagement // 6. 可访问性 // 确保应用可被所有用户访问 // 7. 安全性 // 确保应用安全，防止攻击 // 8. 监控和分析 // 监控应用使用情况，持续改进 // 9. 部署和更新 // 确保应用及时更新，避免用户使用旧版本 // 10. 用户体验 // 提供类原生应用的用户体验

前端 PWA 最佳实践

1. 核心功能

  • 响应式设计：确保应用在不同设备上正常显示
  • 离线访问：支持离线访问，提高应用可靠性
  • 安装能力：可以安装到主屏幕，提高用户粘性
  • 推送通知：支持推送通知，提高用户engagement
  • 性能：提高应用性能，减少加载时间

2. 技术实现

  • manifest.json：配置 PWA 元数据，提供安装信息
  • Service Worker：实现离线缓存、推送通知等功能
  • HTTPS：使用 HTTPS，确保应用安全
  • Web App Manifest：配置应用图标、名称等信息
  • Push API：实现推送通知功能
  • Background Sync：实现后台数据同步
  • IndexedDB：存储离线数据
  • Cache API：缓存静态资源

3. 性能优化

  • 资源优化：压缩、合并、缓存静态资源
  • 代码分割：按需加载代码，减少初始加载时间
  • 预缓存：预缓存关键资源，提高应用启动速度
  • 懒加载：懒加载非关键资源，减少初始加载时间
  • CDN：使用 CDN，提高资源加载速度
  • HTTP/2：使用 HTTP/2，提高资源加载效率
  • WebP：使用 WebP 格式图片，减少图片大小
  • 字体优化：优化字体加载，减少阻塞时间

4. 用户体验

  • 安装提示：提供自定义安装提示，鼓励用户安装
  • 启动画面：配置启动画面，提高应用启动体验
  • 离线页面：提供离线页面，提高离线体验
  • 错误处理：提供清晰的错误提示，提高用户体验
  • 导航体验：优化导航体验，提供类原生应用的导航
  • 触觉反馈：使用振动 API，提供触觉反馈
  • 深色模式：支持深色模式，提高用户体验
  • 无障碍：确保应用可被所有用户访问

5. 安全性

  • HTTPS：使用 HTTPS，确保应用安全
  • Content Security Policy：使用 CSP，防止 XSS 攻击
  • Subresource Integrity：使用 SRI，确保资源完整性
  • Permissions：合理请求权限，保护用户隐私
  • Data Protection：保护用户数据，防止数据泄露
  • Secure Headers：使用安全 HTTP 头，提高应用安全性

6. 监控和分析

  • Google Analytics：使用 Google Analytics，分析用户行为
  • Lighthouse：使用 Lighthouse，评估 PWA 质量
  • Web Vitals：监控核心 Web 性能指标
  • Error Monitoring：监控应用错误，及时发现问题
  • Usage Analytics：分析应用使用情况，持续改进

7. 部署和更新

  • 版本控制：使用版本号管理 Service Worker 和缓存
  • 渐进式部署：先部署到部分用户，再逐步扩大范围
  • 回滚机制：准备回滚方案，应对部署失败
  • 自动化部署：使用 CI/CD，实现自动化部署
  • 更新策略：制定合理的更新策略，确保用户使用最新版本

8. 跨平台兼容性

  • 浏览器支持：确保应用在主流浏览器中正常运行
  • 设备支持：确保应用在不同设备上正常运行
  • 操作系统支持：确保应用在不同操作系统中正常运行
  • 屏幕尺寸：确保应用在不同屏幕尺寸下正常显示
  • 网络条件：确保应用在不同网络条件下正常运行

9. 开发工具

  • Lighthouse：评估 PWA 质量
  • Workbox：简化 Service Worker 开发
  • PWABuilder：快速创建 PWA
  • Chrome DevTools：调试 PWA
  • Web App Manifest Validator：验证 manifest.json
  • Service Worker Debugger：调试 Service Worker

10. 最佳实践总结

  • 核心功能：实现响应式设计、离线访问、安装能力、推送通知等核心功能
  • 技术实现：正确实现 manifest.json、Service Worker、HTTPS 等技术
  • 性能优化：优化应用性能，减少加载时间
  • 用户体验：提供良好的用户体验，鼓励用户安装和使用
  • 安全性：确保应用安全，防止攻击
  • 监控和分析：监控应用使用情况，持续改进
  • 部署和更新：确保应用及时更新，避免用户使用旧版本
  • 跨平台兼容性：确保应用在不同平台上正常运行
  • 开发工具：使用合适的开发工具，提高开发效率
  • 持续改进：持续改进 PWA，提高应用质量

前端 PWA 案例

1. 案例一：电商 PWA

某电商网站使用 PWA 技术，实现了以下功能：

  • 离线访问：支持离线浏览商品和购物车
  • 安装能力：可以安装到主屏幕，提高用户粘性
  • 推送通知：发送订单状态和促销信息通知
  • 性能优化：优化应用性能，减少加载时间
  • 响应式设计：确保应用在不同设备上正常显示

通过 PWA 技术，该电商网站的用户留存率提高了 30%，转化率提高了 20%。

2. 案例二：新闻 PWA

某新闻网站使用 PWA 技术，实现了以下功能：

  • 离线阅读：支持离线阅读新闻内容
  • 安装能力：可以安装到主屏幕，方便用户访问
  • 推送通知：发送突发新闻和个性化新闻通知
  • 性能优化：优化应用性能，减少加载时间
  • 响应式设计：确保应用在不同设备上正常显示

通过 PWA 技术，该新闻网站的页面加载时间减少了 40%，用户停留时间增加了 50%。

3. 案例三：工具 PWA

某工具类应用使用 PWA 技术，实现了以下功能：

  • 离线使用：支持离线使用核心功能
  • 安装能力：可以安装到主屏幕，提高用户粘性
  • 推送通知：发送任务提醒和更新通知
  • 性能优化：优化应用性能，减少加载时间
  • 响应式设计：确保应用在不同设备上正常显示

通过 PWA 技术，该工具类应用的用户活跃度提高了 60%，用户满意度提高了 40%。

总结

前端 PWA 是现代前端开发的重要组成部分，它可以提高用户体验、离线访问能力、安装能力、推送通知能力和性能。别再忽视 PWA 了，manifest.json 配置、Service Worker 配置、PWA 安装提示、离线功能、推送通知、性能优化、可访问性、分析和监控、部署和更新等现代 PWA 技术已经提供了更强大、更高效的 PWA 能力。

记住，PWA 不仅仅是技术问题，还包括用户体验、性能优化、安全性、监控和分析、部署和更新等多个方面。你需要综合考虑这些因素，才能创建出高质量的 PWA 应用。

别再忽视前端 PWA 了，它是前端开发的必备技能！

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/4/15 18:43:21

照片放大模糊怎么变清晰？6个实用方法，新手零门槛上手

有时候拍出来的照片会糊掉&#xff0c;尤其是照片放大后更明显&#xff0c;可能是手抖了&#xff0c;也可能是像素不够。别着急删掉&#xff01;现在有很多AI工具能把模糊的照片变清晰&#xff0c;不管是原生模糊还是照片放大后模糊&#xff0c;都能轻松修复。下面就给大家说几…

作者头像 李华
网站建设 2026/4/15 18:40:23

如何零成本批量提取B站音频？BilibiliDown全场景应用终极指南

如何零成本批量提取B站音频&#xff1f;BilibiliDown全场景应用终极指南 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mir…

作者头像 李华
网站建设 2026/4/15 18:38:13

Godot PCK解包器：3步快速提取游戏资源的终极指南

Godot PCK解包器&#xff1a;3步快速提取游戏资源的终极指南 【免费下载链接】godot-unpacker godot .pck unpacker 项目地址: https://gitcode.com/gh_mirrors/go/godot-unpacker 你是否曾想深入了解Godot游戏的内部结构&#xff1f;是否好奇那些精美的游戏资源是如何组…

作者头像 李华
网站建设 2026/4/15 18:33:33

如何用ExplorerPatcher在5分钟内让Windows 11变回你熟悉的模样

如何用ExplorerPatcher在5分钟内让Windows 11变回你熟悉的模样 【免费下载链接】ExplorerPatcher This project aims to enhance the working environment on Windows 项目地址: https://gitcode.com/GitHub_Trending/ex/ExplorerPatcher 你是不是刚升级到Windows 11&am…

作者头像 李华
网站建设 2026/4/15 18:32:46

3步搞定：HTML网页秒变Figma设计稿的智能转换指南

3步搞定&#xff1a;HTML网页秒变Figma设计稿的智能转换指南 【免费下载链接】figma-html Convert any website to editable Figma designs 项目地址: https://gitcode.com/gh_mirrors/fi/figma-html 还在为网页设计稿和实际代码之间的鸿沟而烦恼吗&#xff1f;你是否曾…

作者头像 李华