html怎么转pwa应用_HTML网站如何升级为渐进式Web应用-html教程-PHP中文网

pwa 必须包含 start_url、display、icons（192x192 和 512x512 png）、name、short_name 字段，且 service worker 需在 https 下注册并处理 fetch 事件。

html怎么转pwa应用_html网站如何升级为渐进式web应用

浏览器只认 manifest.json 里几个关键字段，缺一不可，否则连“添加到桌面”都不会触发。最常漏掉的是 start_url 和 display。

start_url 必须存在，且需是相对路径或同源绝对路径（如 "/" 或 "/index.html"），不能是外部链接
display 推荐设为 "standalone" 或 "minimal-ui"；设成 "browser" 就退化成普通标签页，不算真正 PWA
icons 至少提供一个 192x192 和一个 512x512 的 PNG（WebP 不支持），且 src 路径要能被 fetch 到（404 会导致 manifest 加载失败）
name 和 short_name 都得有，short_name 用于桌面图标文字，过长会被截断

注册失败不报错，但控制台会静默跳过——这是最让人困惑的地方。核心问题往往不是代码写错，而是环境或路径没对上。

必须在 HTTPS 下运行（localhost 是唯一例外，HTTP/127.0.0.1 不行）
navigator.serviceWorker.register() 的参数路径是相对于页面 URL 的，不是相对于 JS 文件位置。比如页面在 /blog/post.html，想注册根目录下的 sw.js，得写 navigator.serviceWorker.register("/sw.js")，而不是 "./sw.js"
注册后立刻刷新页面看不到效果：service worker 默认要等下次页面加载才激活，可用 skipWaiting() + clients.claim() 强制接管，但仅用于开发调试
检查是否生效：打开 DevTools → Application → Service Workers，看状态是不是 “Activated and is running”，同时勾选 “Update on reload”

很多人以为加了 service worker 就自动离线可用，其实默认什么也不缓存。你得自己决定哪些资源进 Cache API，而 HTTP 缓存（如 Cache-Control）依然起作用，但两者逻辑不同、优先级也不同。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

HTML 页面建议用 Stale-While-Revalidate 策略：先返回缓存，再后台更新，避免白屏；直接 cache-first 容易卡在旧版本
JS/CSS 资源适合 Cache First，但记得在 service worker 更新时清旧缓存（用 cache.keys() 遍历删除）
API 请求别盲目缓存：带用户态的接口（如 /api/user/profile）缓存前必须校验 auth token 或加用户 ID 到 cache key
注意 fetch() 默认不带 cookie，需要显式传 { credentials: "include" }，否则登录态请求会 401