前端PWA：让你的网站变成App

优质文章学习记录

06 Apr 2026 — 5 min read

前端PWA：让你的网站变成App

毒舌时刻

前端PWA？这不是噱头吗？

"PWA有什么用，用户直接用浏览器不就好了"——结果用户体验差，无法离线访问，
"我有原生App，不需要PWA"——结果开发成本高，维护困难，
"PWA就是加个manifest和service worker，多简单"——结果功能不完整，用户体验差。

醒醒吧，PWA不是简单的技术组合，而是一种现代化的Web应用模式！

为什么你需要这个？

离线访问：即使没有网络也能访问应用
安装到主屏幕：像原生App一样方便使用
推送通知：及时向用户发送重要信息
性能提升：缓存静态资源，加快加载速度
跨平台：一次开发，多平台运行

反面教材

<!-- 反面教材：不完整的PWA配置 --> <!DOCTYPE html> <html> <head> <title>我的PWA应用</title> <!-- 缺少manifest.json --> <!-- 缺少service worker --> </head> <body> <h1>我的PWA应用</h1> <p>这是一个PWA应用</p> </body> </html>

// 反面教材：简单的service worker // service-worker.js self.addEventListener('install', event => { console.log('Service Worker 安装'); }); self.addEventListener('activate', event => { console.log('Service Worker 激活'); }); self.addEventListener('fetch', event => { console.log('Service Worker 拦截请求'); });

正确的做法

<!-- 正确的做法：完整的PWA配置 --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的PWA应用</title> <!-- 添加manifest.json --> <link rel="manifest" href="/manifest.json"> <!-- 添加主题颜色 --> <meta name="theme-color" content="#317EFB"> <!-- 添加Apple Touch Icon --> <link rel="apple-touch-icon" href="/icons/icon-192x192.png"> <!-- 添加预加载 --> <link rel="preload" href="/style.css" as="style"> <link rel="preload" href="/script.js" as="script"> <link rel="stylesheet" href="/style.css"> </head> <body> <h1>我的PWA应用</h1> <p>这是一个完整的PWA应用</p> <button>发送通知</button> <script src="/script.js"></script> <script> // 注册service worker if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js') .then(registration => { console.log('Service Worker 注册成功:', registration.scope); }) .catch(error => { console.log('Service Worker 注册失败:', error); }); }); } </script> </body> </html>

// 正确的做法：manifest.json { "name": "我的PWA应用", "short_name": "PWA应用", "description": "一个完整的PWA应用示例", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#317EFB", "icons": [ { "src": "/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png", "purpose": "any" }, { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" } ] }

// 正确的做法：完整的service worker // service-worker.js const CACHE_NAME = 'pwa-app-cache-v1'; const ASSETS_TO_CACHE = [ '/', '/index.html', '/style.css', '/script.js', '/manifest.json', '/icons/icon-72x72.png', '/icons/icon-96x96.png', '/icons/icon-128x128.png', '/icons/icon-144x144.png', '/icons/icon-152x152.png', '/icons/icon-192x192.png', '/icons/icon-384x384.png', '/icons/icon-512x512.png' ]; // 安装Service Worker self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => { console.log('Cache opened'); return cache.addAll(ASSETS_TO_CACHE); }) .then(() => 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); } }) ); }) .then(() => 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') { const responseToCache = response.clone(); caches.open(CACHE_NAME) .then(cache => { cache.put(event.request, responseToCache); }); } return response; }) .catch(error => { // 网络错误时返回离线页面 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/icon-72x72.png', data: { url: data.url } }; event.waitUntil( self.registration.showNotification(data.title, options) ); }); // 处理通知点击 self.addEventListener('notificationclick', event => { event.notification.close(); event.waitUntil( clients.openWindow(event.notification.data.url) ); });

// 正确的做法：使用推送通知 // script.js // 请求通知权限 function requestNotificationPermission() { if ('Notification' in window) { Notification.requestPermission().then(permission => { if (permission === 'granted') { console.log('通知权限已授予'); } else { console.log('通知权限被拒绝'); } }); } } // 发送通知 function sendNotification() { if ('serviceWorker' in navigator && 'PushManager' in window) { navigator.serviceWorker.ready.then(registration => { registration.showNotification('测试通知', { body: '这是一条测试通知', icon: '/icons/icon-192x192.png', badge: '/icons/icon-72x72.png', data: { url: '/' } }); }); } } // 页面加载时请求通知权限 window.addEventListener('load', () => { requestNotificationPermission(); // 绑定按钮点击事件 const notificationBtn = document.getElementById('notification-btn'); if (notificationBtn) { notificationBtn.addEventListener('click', sendNotification); } }); // 检查是否是PWA模式 function checkPwaMode() { const isPwa = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone || document.referrer.includes('android-app://'); if (isPwa) { console.log('应用以PWA模式运行'); } else { console.log('应用以浏览器模式运行'); } } checkPwaMode();

毒舌点评

看看，这才叫前端PWA！不是简单地添加manifest和service worker，而是构建一个完整的PWA应用，包括离线访问、推送通知、安装到主屏幕等功能。

记住，PWA不是替代原生App，而是一种补充。它可以让你的Web应用获得类似原生App的体验，同时保持Web的跨平台优势。

所以，别再觉得PWA是噱头了，它是现代Web开发的重要方向！

总结

manifest.json：配置应用名称、图标、显示模式等
Service Worker：实现离线缓存、推送通知等功能
离线访问：缓存静态资源，确保无网络时也能访问
安装到主屏幕：提供类似原生App的入口
推送通知：及时向用户发送重要信息
性能优化：缓存策略、预加载等
可访问性：确保PWA对所有用户都友好
跨平台：一次开发，多平台运行

PWA，让你的网站变成真正的应用！

Stable Diffusion WebUI 从安装到实战：原理、部署与问题全解

Stable Diffusion 原理、介绍及 WebUI 安装指南一、Stable Diffusion 原理及介绍 Stable Diffusion 是一种基于潜在扩散模型（Latent Diffusion Model）的文本到图像生成人工智能模型，由 Stability AI 主导开发，于 2022 年发布。其核心原理是通过“扩散过程”的逆过程实现图像生成： 1. 扩散过程：从一张清晰图像开始，逐步添加高斯噪声，最终将图像转化为完全随机的噪声 2. 逆扩散过程：模型学习从纯噪声中逐步去除噪声，结合文本提示（Prompt）的语义信息，最终生成符合描述的清晰图像该模型的优势在于： * 开源可访问性：允许研究者和开发者自由使用和修改 * 高质量生成：能生成具有细节和艺术感的图像 * 灵活性：支持文本生成图像、图像修复、风格迁移等多种任务 * 资源友好性：相比早期扩散模型，

企业级 LLM 实战：在受限环境中基于 Copilot API 构建 ReAct MCP Agent

企业级 LLM 实战：在受限环境中基于 Copilot API 构建 ReAct MCP Agent 在银行等金融 IT 环境中，LLM 应用落地往往面临着严苛的限制。最典型的一道坎是：我们只能使用公司内部提供的 LLM API（如 Copilot API），而这些 API 往往是不完整的。本文将复盘一次真实的架构演进：当我们的基础模型不支持标准的 Function Calling (bind_tools) 时，如何通过 ReAct 模式和 Model Context Protocol (MCP)，手动构建一个强大的、支持工具调用的智能 Agent。 1. 交互全景图 (Architecture Overview) 在深入代码细节之前，让我们先通过一张时序图来俯瞰整个系统的请求流转过程。 MCP

这6个AI写作工具，我试了个遍！写网文哪个最顺手？

一、为什么要折腾这些AI工具？写小说年头不短了，最怕的不是写不好，而是写不出来。对着空白文档，灵感枯竭，更新死线迫在眉睫，脑袋里却一片浆糊。这种时候，要是能有个靠谱的帮手，拉我一把，那真是雪中送炭。现在市面上各种“AI写作助手”眼花缭乱，宣传得天花乱坠。但说实话，真正懂我们写网文这套“爽点+设定+节奏”逻辑的，能有几个？光说不练假把式。我索性亲自下场，挑了国内外现在热度比较高的6个工具，实实在在地用网文的视角去试了试水，看看到底谁是真能帮上忙，谁只是花架子。二、这次我试了哪些帮手？这几个名字，你多半都耳熟： * 笔灵AI * ChatGPT * Claude (国外工具) * 文心一言 * 腾讯元宝 * DeepSeek 国内国外的都有，功能差异挺大，下面我挨个说说我的实际体验。三、我是怎么试的？评判标准得实在点。我主要从这5个方面看它们行不行： 1. 能不能写出网文那味儿？

一文讲透｜AI论文写作软件千笔ai写作 VS 文途AI，自考写作用它最省心！

随着人工智能技术的迅猛发展，AI辅助写作工具已经逐渐成为高校学生完成毕业论文的重要助手。越来越多的学生开始借助这些工具来提升写作效率、优化内容结构，甚至降低查重率。然而，在面对市场上种类繁多的AI写作软件时，许多学生却陷入了“选择困难”的困境——既担心工具的专业性不足，又担忧其效率无法满足实际需求。在这样的背景下，千笔AI凭借其强大的学术写作能力与高效的生成速度，迅速赢得了众多学生的关注和认可。它不仅能够精准适配毕业论文的格式与内容要求，还能帮助用户快速生成高质量的初稿，极大缓解了写作压力。对于正在为毕业论文苦恼的学生来说，千笔AI正是一款值得信赖的智能写作助手。一、强烈推荐：千笔AI —— 一站式学术支持“专家”，降低AI的性价比之选（推荐指数：★★★★★）千笔AI针对学生论文写作的痛点，精心打造了八大核心功能，让论文写作变得前所未有的高效和规范。 1. 免费AI辅助选题：精准定位，快速确定研究方向千笔AI的免费AI辅助选题功能，基于深度学习算法分析近5年顶刊论文和会议文献，构建学科知识图谱，帮助你快速确定一个既有价值又具创新性的选题方向。 2. 免费2000字大纲：结