[{"data":1,"prerenderedAt":631},["ShallowReactive",2],{"blog-progressive-web-application-guide-zh-zh-CN":3},{"id":4,"title":5,"excerpt":6,"content":7,"coverImage":594,"meta":605,"status":609,"slug":610,"author":611,"category":620,"publishDate":625,"featured":534,"updatedAt":626,"createdAt":627,"contentHtml":628,"previewUrl":629,"localeSlugs":630},85,"PWA 渐进式 Web 应用完整指南：技术、营销、出海玩法（2026）","渐进式 Web 应用（PWA）像网站一样加载、像 App 一样安装、能离线。讲透 PWA 技术原理、出海营销玩法、Twitter Lite/Pinterest 案例和归因方案。",{"root":8},{"type":9,"format":10,"indent":11,"version":12,"direction":13,"children":14},"root","",0,1,"ltr",[15,23,30,34,61,65,69,73,122,126,130,134,186,190,194,198,240,244,248,252,294,298,302,334,338,342,346,396,400,404,408,456,460,464,468,486,490,494,528,541,545,550,554,558,562,566,570,574,578,582,586,590],{"type":16,"tag":17,"format":10,"indent":11,"version":12,"direction":13,"children":18},"heading","h2",[19],{"type":20,"text":21,"format":11,"detail":11,"mode":22,"style":10,"version":12},"text","渐进式 Web 应用（PWA）是什么","normal",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":25},"paragraph",[26,28],{"type":20,"text":27,"format":12,"detail":11,"mode":22,"style":10,"version":12},"渐进式 Web 应用（Progressive Web Application，简称 PWA）",{"type":20,"text":29,"format":11,"detail":11,"mode":22,"style":10,"version":12}," 是用标准 Web 技术（HTML、CSS、JavaScript）做的 Web 应用，但表现得像原生手机 App —— 可以装到主屏、能离线运行、能发推送、用一个 URL 分发。\"渐进式\"的意思是同一份代码能优雅降级：旧浏览器里它是普通网站，新浏览器里它是 App。",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":31},[32],{"type":20,"text":33,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 卡在两个极端中间：",{"type":35,"listType":36,"start":12,"tag":37,"format":10,"indent":11,"version":12,"direction":13,"children":38},"list","bullet","ul",[39,50],{"type":40,"value":12,"format":10,"indent":11,"version":12,"direction":13,"children":41},"listitem",[42],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":43},[44,46,48],{"type":20,"text":45,"format":11,"detail":11,"mode":22,"style":10,"version":12},"普通",{"type":20,"text":47,"format":12,"detail":11,"mode":22,"style":10,"version":12},"网站",{"type":20,"text":49,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 每次都要在浏览器里重新加载，没离线，没主屏图标",{"type":40,"value":51,"format":10,"indent":11,"version":12,"direction":13,"children":52},2,[53],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":54},[55,57,59],{"type":20,"text":56,"format":11,"detail":11,"mode":22,"style":10,"version":12},"原生 ",{"type":20,"text":58,"format":12,"detail":11,"mode":22,"style":10,"version":12},"App",{"type":20,"text":60,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 通过 App Store / Google Play 以平台特定二进制分发，包体 20–150 MB，每次升级都要重新下载",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":62},[63],{"type":20,"text":64,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 拿到原生体验的绝大部分（安装、离线、推送、全屏），但走的是网站的成本和分发模型。用户第一次接触你的产品时面对的是一个 URL —— 没有应用商店门槛。",{"type":16,"tag":17,"format":10,"indent":11,"version":12,"direction":13,"children":66},[67],{"type":20,"text":68,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 必须的四块拼图",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":70},[71],{"type":20,"text":72,"format":11,"detail":11,"mode":22,"style":10,"version":12},"一个 Web App 要算作 PWA，必须把这四样接到位：",{"type":35,"listType":36,"start":12,"tag":37,"format":10,"indent":11,"version":12,"direction":13,"children":74},[75,83,104,113],{"type":40,"value":12,"format":10,"indent":11,"version":12,"direction":13,"children":76},[77],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":78},[79,81],{"type":20,"text":80,"format":12,"detail":11,"mode":22,"style":10,"version":12},"HTTPS",{"type":20,"text":82,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— Service Worker 和 install prompt 只在 HTTPS 上工作",{"type":40,"value":51,"format":10,"indent":11,"version":12,"direction":13,"children":84},[85],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":86},[87,89,91,94,96,98,100,102],{"type":20,"text":88,"format":12,"detail":11,"mode":22,"style":10,"version":12},"Web App Manifest",{"type":20,"text":90,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 一个 JSON 文件（",{"type":20,"text":92,"format":93,"detail":11,"mode":22,"style":10,"version":12},"manifest.json",16,{"type":20,"text":95,"format":11,"detail":11,"mode":22,"style":10,"version":12},"），声明应用名、图标、起始 URL、scope 范围、显示模式（",{"type":20,"text":97,"format":93,"detail":11,"mode":22,"style":10,"version":12},"standalone",{"type":20,"text":99,"format":11,"detail":11,"mode":22,"style":10,"version":12}," / ",{"type":20,"text":101,"format":93,"detail":11,"mode":22,"style":10,"version":12},"fullscreen",{"type":20,"text":103,"format":11,"detail":11,"mode":22,"style":10,"version":12},"）、主题色",{"type":40,"value":105,"format":10,"indent":11,"version":12,"direction":13,"children":106},3,[107],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":108},[109,111],{"type":20,"text":110,"format":12,"detail":11,"mode":22,"style":10,"version":12},"Service Worker",{"type":20,"text":112,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 浏览器在后台跑的脚本，拦截网络请求，让 App 离线时能返回缓存资源，前台无感更新",{"type":40,"value":114,"format":10,"indent":11,"version":12,"direction":13,"children":115},4,[116],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":117},[118,120],{"type":20,"text":119,"format":12,"detail":11,"mode":22,"style":10,"version":12},"可安装信号",{"type":20,"text":121,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 满足浏览器的安装提示条件（manifest + Service Worker + 用户互动启发式）就能弹一键\"安装\"",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":123},[124],{"type":20,"text":125,"format":11,"detail":11,"mode":22,"style":10,"version":12},"这四样到位后更多能力解锁：Push API 推送、Web Share Target 集成系统分享、文件系统访问、主屏图标徽章、Background Sync 后台同步。",{"type":16,"tag":17,"format":10,"indent":11,"version":12,"direction":13,"children":127},[128],{"type":20,"text":129,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA vs 原生 App：各自的优势",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":131},[132],{"type":20,"text":133,"format":11,"detail":11,"mode":22,"style":10,"version":12},"原生 App 在重 3D 图形、独占硬件集成（iOS NFC 支付、深度 Camera API）、App Store 分发这几块还是强。其余场景 PWA 都赢：",{"type":35,"listType":36,"start":12,"tag":37,"format":10,"indent":11,"version":12,"direction":13,"children":135},[136,144,152,160,168,177],{"type":40,"value":12,"format":10,"indent":11,"version":12,"direction":13,"children":137},[138],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":139},[140,142],{"type":20,"text":141,"format":12,"detail":11,"mode":22,"style":10,"version":12},"安装阻力",{"type":20,"text":143,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— PWA 0 点击（访问 URL 即可）vs 商店 4–6 次点击",{"type":40,"value":51,"format":10,"indent":11,"version":12,"direction":13,"children":145},[146],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":147},[148,150],{"type":20,"text":149,"format":12,"detail":11,"mode":22,"style":10,"version":12},"包体大小",{"type":20,"text":151,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 典型 PWA 1–5 MB；原生 App 30–150 MB。在安装漏斗里：10 万访客 → 12% 装 PWA → 9% 装完 90 MB APK",{"type":40,"value":105,"format":10,"indent":11,"version":12,"direction":13,"children":153},[154],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":155},[156,158],{"type":20,"text":157,"format":12,"detail":11,"mode":22,"style":10,"version":12},"更新模型",{"type":20,"text":159,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— PWA 下次启动时静默拉新版本；原生 App 必须走商店发版（iOS 审核以\"天\"计）",{"type":40,"value":114,"format":10,"indent":11,"version":12,"direction":13,"children":161},[162],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":163},[164,166],{"type":20,"text":165,"format":12,"detail":11,"mode":22,"style":10,"version":12},"分发方式",{"type":20,"text":167,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— PWA 是个 URL，WhatsApp、邮件、付费广告里直接发，加载就用。没有商店门槛、没有平台抽成",{"type":40,"value":169,"format":10,"indent":11,"version":12,"direction":13,"children":170},5,[171],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":172},[173,175],{"type":20,"text":174,"format":12,"detail":11,"mode":22,"style":10,"version":12},"跨平台",{"type":20,"text":176,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 一份代码跑 iOS Safari、Android Chrome、桌面 Chrome / Edge，并能在 Windows / ChromeOS 上当可安装 App",{"type":40,"value":178,"format":10,"indent":11,"version":12,"direction":13,"children":179},6,[180],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":181},[182,184],{"type":20,"text":183,"format":12,"detail":11,"mode":22,"style":10,"version":12},"SEO",{"type":20,"text":185,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— PWA 每个路由都被 crawl，原生 App 不被 crawl。自然流量越积越多",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":187},[188],{"type":20,"text":189,"format":11,"detail":11,"mode":22,"style":10,"version":12},"2026 年大多数面向消费者的产品 —— 电商、媒体、内容、轻工具 —— PWA 是默认选项，原生 App 是补强。",{"type":16,"tag":17,"format":10,"indent":11,"version":12,"direction":13,"children":191},[192],{"type":20,"text":193,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 的限制",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":195},[196],{"type":20,"text":197,"format":11,"detail":11,"mode":22,"style":10,"version":12},"下决心做之前要清楚的几点：",{"type":35,"listType":36,"start":12,"tag":37,"format":10,"indent":11,"version":12,"direction":13,"children":199},[200,208,216,224,232],{"type":40,"value":12,"format":10,"indent":11,"version":12,"direction":13,"children":201},[202],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":203},[204,206],{"type":20,"text":205,"format":12,"detail":11,"mode":22,"style":10,"version":12},"iOS 推送",{"type":20,"text":207,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— iOS 16.4（2023）才加上，必须\"先加到主屏\"，无痕浏览里禁用",{"type":40,"value":51,"format":10,"indent":11,"version":12,"direction":13,"children":209},[210],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":211},[212,214],{"type":20,"text":213,"format":12,"detail":11,"mode":22,"style":10,"version":12},"硬件 API",{"type":20,"text":215,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— Bluetooth、NFC、部分传感器 API 是 Android-only 或 Chrome-only",{"type":40,"value":105,"format":10,"indent":11,"version":12,"direction":13,"children":217},[218],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":219},[220,222],{"type":20,"text":221,"format":12,"detail":11,"mode":22,"style":10,"version":12},"应用商店收录",{"type":20,"text":223,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— PWA 通过 PWABuilder / Trusted Web Activity 能上 Google Play 和 Microsoft Store，但上不了 Apple App Store",{"type":40,"value":114,"format":10,"indent":11,"version":12,"direction":13,"children":225},[226],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":227},[228,230],{"type":20,"text":229,"format":12,"detail":11,"mode":22,"style":10,"version":12},"后台活动",{"type":20,"text":231,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— Service Worker 短暂唤醒可以，但不能像原生 App 那样在后台跑 30 分钟上传",{"type":40,"value":169,"format":10,"indent":11,"version":12,"direction":13,"children":233},[234],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":235},[236,238],{"type":20,"text":237,"format":12,"detail":11,"mode":22,"style":10,"version":12},"iOS 存储驱逐",{"type":20,"text":239,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— \"加到主屏\"的 PWA 在 iOS 上闲置约 7 天后被驱逐，缓存数据也会丢",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":241},[242],{"type":20,"text":243,"format":11,"detail":11,"mode":22,"style":10,"version":12},"如果产品强依赖上面任意一项，原生 App 和 PWA 都做，不是用 PWA 代替原生 App。",{"type":16,"tag":17,"format":10,"indent":11,"version":12,"direction":13,"children":245},[246],{"type":20,"text":247,"format":11,"detail":11,"mode":22,"style":10,"version":12},"哪些产品适合做 PWA",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":249},[250],{"type":20,"text":251,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 模型最适合：",{"type":35,"listType":36,"start":12,"tag":37,"format":10,"indent":11,"version":12,"direction":13,"children":253},[254,262,270,278,286],{"type":40,"value":12,"format":10,"indent":11,"version":12,"direction":13,"children":255},[256],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":257},[258,260],{"type":20,"text":259,"format":12,"detail":11,"mode":22,"style":10,"version":12},"电商、市场",{"type":20,"text":261,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 结账漏斗从即时启动 + 离线浏览受益最大",{"type":40,"value":51,"format":10,"indent":11,"version":12,"direction":13,"children":263},[264],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":265},[266,268],{"type":20,"text":267,"format":12,"detail":11,"mode":22,"style":10,"version":12},"媒体、内容",{"type":20,"text":269,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 新闻、博客、视频，用户从搜索 / 社交进来，安装能降低后续触达成本",{"type":40,"value":105,"format":10,"indent":11,"version":12,"direction":13,"children":271},[272],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":273},[274,276],{"type":20,"text":275,"format":12,"detail":11,"mode":22,"style":10,"version":12},"效率工具",{"type":20,"text":277,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 日历、笔记、看板，正合\"安装 + 离线 + 推送\"范式",{"type":40,"value":114,"format":10,"indent":11,"version":12,"direction":13,"children":279},[280],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":281},[282,284],{"type":20,"text":283,"format":12,"detail":11,"mode":22,"style":10,"version":12},"本地化服务",{"type":20,"text":285,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 外卖、打车，在流量贵、30 MB 下载到一半经常断的市场里",{"type":40,"value":169,"format":10,"indent":11,"version":12,"direction":13,"children":287},[288],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":289},[290,292],{"type":20,"text":291,"format":12,"detail":11,"mode":22,"style":10,"version":12},"海外增长和付费投放",{"type":20,"text":293,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 用低端 Android 设备多的市场、流量贵的市场、Google Play 安装归因受限或不准的市场",{"type":16,"tag":17,"format":10,"indent":11,"version":12,"direction":13,"children":295},[296],{"type":20,"text":297,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 在出海投放里的玩法",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":299},[300],{"type":20,"text":301,"format":11,"detail":11,"mode":22,"style":10,"version":12},"这块 PWA 从\"加分项\"变成\"竞争优势\"。2026 年三个主流玩法：",{"type":35,"listType":36,"start":12,"tag":37,"format":10,"indent":11,"version":12,"direction":13,"children":303},[304,316,326],{"type":40,"value":12,"format":10,"indent":11,"version":12,"direction":13,"children":305},[306],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":307},[308,310,312,314],{"type":20,"text":309,"format":12,"detail":11,"mode":22,"style":10,"version":12},"超短安装漏斗",{"type":20,"text":311,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 付费广告点击落到一个 ",{"type":20,"text":313,"format":93,"detail":11,"mode":22,"style":10,"version":12},"https://",{"type":20,"text":315,"format":11,"detail":11,"mode":22,"style":10,"version":12}," URL，产品立刻加载，关键互动后弹 install prompt。漏斗变成\"点击 → 用 → 安装\"。和原生比：\"点击 → 商店 → 下载 → 等 → 首启\"",{"type":40,"value":51,"format":10,"indent":11,"version":12,"direction":13,"children":317},[318],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":319},[320,322,324],{"type":20,"text":321,"format":12,"detail":11,"mode":22,"style":10,"version":12},"绕开 APK 上报阻力",{"type":20,"text":323,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 在 APK 分发被标记、新 Google Play 账号上包受限的市场，PWA 把整个问题绕开。",{"type":20,"text":325,"format":12,"detail":11,"mode":22,"style":10,"version":12},"URL 即产品",{"type":40,"value":105,"format":10,"indent":11,"version":12,"direction":13,"children":327},[328],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":329},[330,332],{"type":20,"text":331,"format":12,"detail":11,"mode":22,"style":10,"version":12},"CDN 友好",{"type":20,"text":333,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— PWA 部署成静态资源走 CDN（Cloudflare、CloudFront），全球扩容成本很低。东京到圣保罗首屏时间能 \u003C 1 秒",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":335},[336],{"type":20,"text":337,"format":11,"detail":11,"mode":22,"style":10,"version":12},"归因层面常见做法是 PWA 配一层 smart link：每个 campaign 一个品牌短链，把 UTM / campaign ID 透传到安装，通过 Meta Ads Conversions API / Google Ads Enhanced Conversions 回传。",{"type":16,"tag":17,"format":10,"indent":11,"version":12,"direction":13,"children":339},[340],{"type":20,"text":341,"format":11,"detail":11,"mode":22,"style":10,"version":12},"真实案例",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":343},[344],{"type":20,"text":345,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 不是 PPT 概念，主流消费品牌都有实打实数据：",{"type":35,"listType":36,"start":12,"tag":37,"format":10,"indent":11,"version":12,"direction":13,"children":347},[348,356,364,372,380,388],{"type":40,"value":12,"format":10,"indent":11,"version":12,"direction":13,"children":349},[350],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":351},[352,354],{"type":20,"text":353,"format":12,"detail":11,"mode":22,"style":10,"version":12},"Twitter Lite",{"type":20,"text":355,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 每会话页面浏览数 +65%，发推数 +75%，跳出率 -20%。包体压到 \u003C 1 MB，原生约 24 MB",{"type":40,"value":51,"format":10,"indent":11,"version":12,"direction":13,"children":357},[358],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":359},[360,362],{"type":20,"text":361,"format":12,"detail":11,"mode":22,"style":10,"version":12},"星巴克 Starbucks",{"type":20,"text":363,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 店内点单做了 PWA，3G 下加载 1.5 秒；日活 Web 用户翻倍",{"type":40,"value":105,"format":10,"indent":11,"version":12,"direction":13,"children":365},[366],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":367},[368,370],{"type":20,"text":369,"format":12,"detail":11,"mode":22,"style":10,"version":12},"Pinterest",{"type":20,"text":371,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 重写移动 Web 为 PWA，核心互动 +60%，单访客广告收入 +44%",{"type":40,"value":114,"format":10,"indent":11,"version":12,"direction":13,"children":373},[374],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":375},[376,378],{"type":20,"text":377,"format":12,"detail":11,"mode":22,"style":10,"version":12},"Tinder Online",{"type":20,"text":379,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— PWA 首启 4.7 秒，原生 App 首启 11.9 秒；右滑数和消息数双涨",{"type":40,"value":169,"format":10,"indent":11,"version":12,"direction":13,"children":381},[382],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":383},[384,386],{"type":20,"text":385,"format":12,"detail":11,"mode":22,"style":10,"version":12},"Spotify",{"type":20,"text":387,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 桌面 PWA 替代了一部分用户的 Electron 桌面客户端，功能相当",{"type":40,"value":178,"format":10,"indent":11,"version":12,"direction":13,"children":389},[390],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":391},[392,394],{"type":20,"text":393,"format":12,"detail":11,"mode":22,"style":10,"version":12},"Trivago",{"type":20,"text":395,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 接通 install prompt 后，PWA 安装量从\"几乎为零\"一年涨到 150 万",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":397},[398],{"type":20,"text":399,"format":11,"detail":11,"mode":22,"style":10,"version":12},"共同模式：核心收益来自移除安装阻力 + 首屏比原生 App 冷启动还快。",{"type":16,"tag":17,"format":10,"indent":11,"version":12,"direction":13,"children":401},[402],{"type":20,"text":403,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 怎么部署",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":405},[406],{"type":20,"text":407,"format":11,"detail":11,"mode":22,"style":10,"version":12},"最小可用 PWA 的部署步骤：",{"type":35,"listType":409,"start":12,"tag":410,"format":10,"indent":11,"version":12,"direction":13,"children":411},"number","ol",[412,420,432,440,448],{"type":40,"value":12,"format":10,"indent":11,"version":12,"direction":13,"children":413},[414],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":415},[416,418],{"type":20,"text":417,"format":12,"detail":11,"mode":22,"style":10,"version":12},"用任何 Web 框架做出 Web App",{"type":20,"text":419,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— React、Vue、Svelte、Astro 都行，纯服务端渲染 HTML 也算",{"type":40,"value":51,"format":10,"indent":11,"version":12,"direction":13,"children":421},[422],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":423},[424,426,428,430],{"type":20,"text":425,"format":12,"detail":11,"mode":22,"style":10,"version":12},"加 `manifest.json`",{"type":20,"text":427,"format":11,"detail":11,"mode":22,"style":10,"version":12}," 放根目录，HTML 里 ",{"type":20,"text":429,"format":93,"detail":11,"mode":22,"style":10,"version":12},"\u003Clink rel=\"manifest\">",{"type":20,"text":431,"format":11,"detail":11,"mode":22,"style":10,"version":12}," 引用",{"type":40,"value":105,"format":10,"indent":11,"version":12,"direction":13,"children":433},[434],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":435},[436,438],{"type":20,"text":437,"format":12,"detail":11,"mode":22,"style":10,"version":12},"注册 Service Worker",{"type":20,"text":439,"format":11,"detail":11,"mode":22,"style":10,"version":12}," 缓存 app shell 和关键路由",{"type":40,"value":114,"format":10,"indent":11,"version":12,"direction":13,"children":441},[442],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":443},[444,446],{"type":20,"text":445,"format":12,"detail":11,"mode":22,"style":10,"version":12},"HTTPS 部署",{"type":20,"text":447,"format":11,"detail":11,"mode":22,"style":10,"version":12}," + 有效 TLS —— Cloudflare 免费档够用",{"type":40,"value":169,"format":10,"indent":11,"version":12,"direction":13,"children":449},[450],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":451},[452,454],{"type":20,"text":453,"format":12,"detail":11,"mode":22,"style":10,"version":12},"测安装",{"type":20,"text":455,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— Chrome DevTools → Application → Manifest 会报缺哪些字段，能手动触发 install prompt",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":457},[458],{"type":20,"text":459,"format":11,"detail":11,"mode":22,"style":10,"version":12},"SEO 角度，每个路由要服务端渲染或预渲染足够的 HTML，Google 爬虫不会等 JS 跑很久。",{"type":16,"tag":17,"format":10,"indent":11,"version":12,"direction":13,"children":461},[462],{"type":20,"text":463,"format":11,"detail":11,"mode":22,"style":10,"version":12},"Web Push 和 Web Share Target",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":465},[466],{"type":20,"text":467,"format":11,"detail":11,"mode":22,"style":10,"version":12},"两个 PWA 能力大多数团队没用够：",{"type":35,"listType":36,"start":12,"tag":37,"format":10,"indent":11,"version":12,"direction":13,"children":469},[470,478],{"type":40,"value":12,"format":10,"indent":11,"version":12,"direction":13,"children":471},[472],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":473},[474,476],{"type":20,"text":475,"format":12,"detail":11,"mode":22,"style":10,"version":12},"Web Push",{"type":20,"text":477,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 用户安装并授权后，通过 Push API + Firebase Cloud Messaging / OneSignal / 自建 VAPID 后端发推送。在 install prompt 接受率高的市场，打开率和原生 App push 相当",{"type":40,"value":51,"format":10,"indent":11,"version":12,"direction":13,"children":479},[480],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":481},[482,484],{"type":20,"text":483,"format":12,"detail":11,"mode":22,"style":10,"version":12},"Web Share Target",{"type":20,"text":485,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 把 PWA 注册成系统分享目的地，出现在系统 share sheet 里。对内容分享类应用（\"从分享导入\"、\"从分享保存\"）、再触达回流都很有用",{"type":16,"tag":17,"format":10,"indent":11,"version":12,"direction":13,"children":487},[488],{"type":20,"text":489,"format":11,"detail":11,"mode":22,"style":10,"version":12},"怎么把 PWA 规模化",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":491},[492],{"type":20,"text":493,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 给你的是运行时。要把它做成营销渠道，外围这几块更重要：",{"type":35,"listType":409,"start":12,"tag":410,"format":10,"indent":11,"version":12,"direction":13,"children":495},[496,504,512,520],{"type":40,"value":12,"format":10,"indent":11,"version":12,"direction":13,"children":497},[498],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":499},[500,502],{"type":20,"text":501,"format":12,"detail":11,"mode":22,"style":10,"version":12},"品牌短链",{"type":20,"text":503,"format":11,"detail":11,"mode":22,"style":10,"version":12},"，把广告点击路由进 PWA，且不被 WhatsApp / Instagram 内置浏览器吃掉 install prompt",{"type":40,"value":51,"format":10,"indent":11,"version":12,"direction":13,"children":505},[506],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":507},[508,510],{"type":20,"text":509,"format":12,"detail":11,"mode":22,"style":10,"version":12},"按 campaign 的落地变体",{"type":20,"text":511,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 同一个 PWA 根据 campaign ID 展示不同首屏，素材和产品同步迭代",{"type":40,"value":105,"format":10,"indent":11,"version":12,"direction":13,"children":513},[514],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":515},[516,518],{"type":20,"text":517,"format":12,"detail":11,"mode":22,"style":10,"version":12},"回传到广告平台",{"type":20,"text":519,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— Meta Conversions API、Google Enhanced Conversions，并和原生 App 安装做去重",{"type":40,"value":114,"format":10,"indent":11,"version":12,"direction":13,"children":521},[522],{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":523},[524,526],{"type":20,"text":525,"format":12,"detail":11,"mode":22,"style":10,"version":12},"WhatsApp / SMS 再触达",{"type":20,"text":527,"format":11,"detail":11,"mode":22,"style":10,"version":12}," —— 短链能过 WhatsApp Link Preview，已装时路由到 PWA、没装时回退到 Web",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":529},[530,539],{"type":531,"fields":532,"format":10,"indent":11,"version":105,"direction":13,"children":536},"link",{"url":533,"newTab":534,"linkType":535},"https://deepclick.com/",false,"custom",[537],{"type":20,"text":538,"format":11,"detail":11,"mode":22,"style":10,"version":12},"DeepClick",{"type":20,"text":540,"format":11,"detail":11,"mode":22,"style":10,"version":12}," 做的正是为出海增长配套的这一层：智能链接路由进 PWA 落地页、回传 Meta Ads 和 Google Ads、同一个 canonical URL 上做 A/B、WhatsApp 模板友好的品牌短链。对把 PWA 当主获客载体的团队来说，这是\"PWA 跑得起来\"和\"PWA 跑得动量\"之间通常缺的那块。",{"type":16,"tag":17,"format":10,"indent":11,"version":12,"direction":13,"children":542},[543],{"type":20,"text":544,"format":11,"detail":11,"mode":22,"style":10,"version":12},"常见问题",{"type":16,"tag":546,"format":10,"indent":11,"version":12,"direction":13,"children":547},"h3",[548],{"type":20,"text":549,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 用大白话说是什么",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":551},[552],{"type":20,"text":553,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 是一个网站，加了一些能力让它可以装到手机或桌面、能离线、能发推送、用起来像 App —— 全程只要一个 URL，不走应用商店。",{"type":16,"tag":546,"format":10,"indent":11,"version":12,"direction":13,"children":555},[556],{"type":20,"text":557,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 和原生 App 有什么区别",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":559},[560],{"type":20,"text":561,"format":11,"detail":11,"mode":22,"style":10,"version":12},"原生 App 从应用商店下载，是平台特定的二进制。PWA 是一个网站，符合可安装条件（manifest、Service Worker、HTTPS）就能从浏览器直接装到主屏。PWA 体积更小、更新无感、跳过商店审核。",{"type":16,"tag":546,"format":10,"indent":11,"version":12,"direction":13,"children":563},[564],{"type":20,"text":565,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 在 iOS 上能用吗",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":567},[568],{"type":20,"text":569,"format":11,"detail":11,"mode":22,"style":10,"version":12},"能。iOS Safari 支持 PWA 安装（加到主屏），iOS 16.4 起也支持 Web Push。一些功能比 Android 受限（没有自动 install prompt UI、长期闲置会被驱逐），但功能完整的 PWA 在 iPhone 上能装、能跑。",{"type":16,"tag":546,"format":10,"indent":11,"version":12,"direction":13,"children":571},[572],{"type":20,"text":573,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 对 SEO 友好吗",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":575},[576],{"type":20,"text":577,"format":11,"detail":11,"mode":22,"style":10,"version":12},"友好 —— PWA 每个路由都是 Google 可爬的真 URL。排名好的关键是服务端渲染或预渲染，别让 Googlebot 等长链路 JS 执行。PWA 的速度和互动指标通常还能帮助排名。",{"type":16,"tag":546,"format":10,"indent":11,"version":12,"direction":13,"children":579},[580],{"type":20,"text":581,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 能上 Google Play 吗",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":583},[584],{"type":20,"text":585,"format":11,"detail":11,"mode":22,"style":10,"version":12},"能，通过 Trusted Web Activity（TWA）—— 一个让 PWA 以 Android App 形态出现在 Play Store 的壳。PWA 还是按 PWA 运行，TWA 只是分发壳。",{"type":16,"tag":546,"format":10,"indent":11,"version":12,"direction":13,"children":587},[588],{"type":20,"text":589,"format":11,"detail":11,"mode":22,"style":10,"version":12},"PWA 用什么语言和框架做",{"type":24,"format":10,"indent":11,"version":12,"direction":13,"children":591},[592],{"type":20,"text":593,"format":11,"detail":11,"mode":22,"style":10,"version":12},"任何 Web 技术栈都行。React、Vue、Svelte、Next.js、Nuxt、Astro、SvelteKit、Angular、服务端渲染 HTML 都行 —— 唯一要求是 HTTPS、manifest、Service Worker。",{"id":595,"alt":596,"updatedAt":597,"createdAt":597,"url":598,"thumbnailURL":599,"filename":600,"mimeType":601,"filesize":602,"width":603,"height":604},297,"渐进式 Web 应用 PWA 概念图：浏览器窗口转换为可安装 App，离线云与 Service Worker 元素","2026-06-09T06:49:59.542Z","https://cms-r2.deepclick.com/hero-c-9767c59fde46.png",null,"hero-c-9767c59fde46.png","image/png",1817343,1536,1024,{"title":606,"description":607,"image":608},"渐进式 Web 应用（PWA）指南：技术、营销、案例与玩法","2026 PWA 渐进式 Web 应用指南：Service Worker / Web App Manifest 技术原理、出海投放玩法、Twitter Lite / Pinterest 案例、归因方案。",{"id":595,"alt":596,"updatedAt":597,"createdAt":597,"url":598,"thumbnailURL":599,"filename":600,"mimeType":601,"filesize":602,"width":603,"height":604},"published","progressive-web-application-guide-zh",{"id":51,"name":538,"avatar":612,"updatedAt":618,"createdAt":619},{"id":613,"alt":538,"updatedAt":614,"createdAt":614,"url":615,"thumbnailURL":599,"filename":616,"mimeType":601,"filesize":617,"width":604,"height":604},25,"2026-04-22T08:09:22.606Z","https://cms-r2.deepclick.com/头像-白.png","头像-白.png",26626,"2026-04-22T08:09:35.299Z","2026-04-22T06:42:49.116Z",{"id":105,"titleZh":621,"titleEn":622,"slug":623,"order":51,"updatedAt":624,"createdAt":624},"行业信息","Industry Info","industry-info","2026-04-22T03:32:29.529Z","2026-06-09T06:51:18.299Z","2026-06-09T07:03:08.294Z","2026-06-09T06:51:30.169Z","\u003Cdiv class=\"payload-richtext\">\u003Ch2>渐进式 Web 应用（PWA）是什么\u003C/h2>\u003Cp>\u003Cstrong>渐进式 Web 应用（Progressive Web Application，简称 PWA）\u003C/strong> 是用标准 Web 技术（HTML、CSS、JavaScript）做的 Web 应用，但表现得像原生手机 App —— 可以装到主屏、能离线运行、能发推送、用一个 URL 分发。"渐进式"的意思是同一份代码能优雅降级：旧浏览器里它是普通网站，新浏览器里它是 App。\u003C/p>\u003Cp>PWA 卡在两个极端中间：\u003C/p>\u003Cul class=\"list-bullet\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cp>普通\u003Cstrong>网站\u003C/strong> —— 每次都要在浏览器里重新加载，没离线，没主屏图标\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cp>原生 \u003Cstrong>App\u003C/strong> —— 通过 App Store / Google Play 以平台特定二进制分发，包体 20–150 MB，每次升级都要重新下载\u003C/p>\u003C/li>\u003C/ul>\u003Cp>PWA 拿到原生体验的绝大部分（安装、离线、推送、全屏），但走的是网站的成本和分发模型。用户第一次接触你的产品时面对的是一个 URL —— 没有应用商店门槛。\u003C/p>\u003Ch2>PWA 必须的四块拼图\u003C/h2>\u003Cp>一个 Web App 要算作 PWA，必须把这四样接到位：\u003C/p>\u003Cul class=\"list-bullet\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cp>\u003Cstrong>HTTPS\u003C/strong> —— Service Worker 和 install prompt 只在 HTTPS 上工作\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cp>\u003Cstrong>Web App Manifest\u003C/strong> —— 一个 JSON 文件（\u003Ccode>manifest.json\u003C/code>），声明应用名、图标、起始 URL、scope 范围、显示模式（\u003Ccode>standalone\u003C/code> / \u003Ccode>fullscreen\u003C/code>）、主题色\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"3\"\n        >\u003Cp>\u003Cstrong>Service Worker\u003C/strong> —— 浏览器在后台跑的脚本，拦截网络请求，让 App 离线时能返回缓存资源，前台无感更新\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"4\"\n        >\u003Cp>\u003Cstrong>可安装信号\u003C/strong> —— 满足浏览器的安装提示条件（manifest + Service Worker + 用户互动启发式）就能弹一键"安装"\u003C/p>\u003C/li>\u003C/ul>\u003Cp>这四样到位后更多能力解锁：Push API 推送、Web Share Target 集成系统分享、文件系统访问、主屏图标徽章、Background Sync 后台同步。\u003C/p>\u003Ch2>PWA vs 原生 App：各自的优势\u003C/h2>\u003Cp>原生 App 在重 3D 图形、独占硬件集成（iOS NFC 支付、深度 Camera API）、App Store 分发这几块还是强。其余场景 PWA 都赢：\u003C/p>\u003Cul class=\"list-bullet\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cp>\u003Cstrong>安装阻力\u003C/strong> —— PWA 0 点击（访问 URL 即可）vs 商店 4–6 次点击\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cp>\u003Cstrong>包体大小\u003C/strong> —— 典型 PWA 1–5 MB；原生 App 30–150 MB。在安装漏斗里：10 万访客 → 12% 装 PWA → 9% 装完 90 MB APK\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"3\"\n        >\u003Cp>\u003Cstrong>更新模型\u003C/strong> —— PWA 下次启动时静默拉新版本；原生 App 必须走商店发版（iOS 审核以"天"计）\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"4\"\n        >\u003Cp>\u003Cstrong>分发方式\u003C/strong> —— PWA 是个 URL，WhatsApp、邮件、付费广告里直接发，加载就用。没有商店门槛、没有平台抽成\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"5\"\n        >\u003Cp>\u003Cstrong>跨平台\u003C/strong> —— 一份代码跑 iOS Safari、Android Chrome、桌面 Chrome / Edge，并能在 Windows / ChromeOS 上当可安装 App\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"6\"\n        >\u003Cp>\u003Cstrong>SEO\u003C/strong> —— PWA 每个路由都被 crawl，原生 App 不被 crawl。自然流量越积越多\u003C/p>\u003C/li>\u003C/ul>\u003Cp>2026 年大多数面向消费者的产品 —— 电商、媒体、内容、轻工具 —— PWA 是默认选项，原生 App 是补强。\u003C/p>\u003Ch2>PWA 的限制\u003C/h2>\u003Cp>下决心做之前要清楚的几点：\u003C/p>\u003Cul class=\"list-bullet\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cp>\u003Cstrong>iOS 推送\u003C/strong> —— iOS 16.4（2023）才加上，必须"先加到主屏"，无痕浏览里禁用\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cp>\u003Cstrong>硬件 API\u003C/strong> —— Bluetooth、NFC、部分传感器 API 是 Android-only 或 Chrome-only\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"3\"\n        >\u003Cp>\u003Cstrong>应用商店收录\u003C/strong> —— PWA 通过 PWABuilder / Trusted Web Activity 能上 Google Play 和 Microsoft Store，但上不了 Apple App Store\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"4\"\n        >\u003Cp>\u003Cstrong>后台活动\u003C/strong> —— Service Worker 短暂唤醒可以，但不能像原生 App 那样在后台跑 30 分钟上传\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"5\"\n        >\u003Cp>\u003Cstrong>iOS 存储驱逐\u003C/strong> —— "加到主屏"的 PWA 在 iOS 上闲置约 7 天后被驱逐，缓存数据也会丢\u003C/p>\u003C/li>\u003C/ul>\u003Cp>如果产品强依赖上面任意一项，原生 App 和 PWA 都做，不是用 PWA 代替原生 App。\u003C/p>\u003Ch2>哪些产品适合做 PWA\u003C/h2>\u003Cp>PWA 模型最适合：\u003C/p>\u003Cul class=\"list-bullet\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cp>\u003Cstrong>电商、市场\u003C/strong> —— 结账漏斗从即时启动 + 离线浏览受益最大\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cp>\u003Cstrong>媒体、内容\u003C/strong> —— 新闻、博客、视频，用户从搜索 / 社交进来，安装能降低后续触达成本\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"3\"\n        >\u003Cp>\u003Cstrong>效率工具\u003C/strong> —— 日历、笔记、看板，正合"安装 + 离线 + 推送"范式\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"4\"\n        >\u003Cp>\u003Cstrong>本地化服务\u003C/strong> —— 外卖、打车，在流量贵、30 MB 下载到一半经常断的市场里\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"5\"\n        >\u003Cp>\u003Cstrong>海外增长和付费投放\u003C/strong> —— 用低端 Android 设备多的市场、流量贵的市场、Google Play 安装归因受限或不准的市场\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>PWA 在出海投放里的玩法\u003C/h2>\u003Cp>这块 PWA 从"加分项"变成"竞争优势"。2026 年三个主流玩法：\u003C/p>\u003Cul class=\"list-bullet\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cp>\u003Cstrong>超短安装漏斗\u003C/strong> —— 付费广告点击落到一个 \u003Ccode>https://\u003C/code> URL，产品立刻加载，关键互动后弹 install prompt。漏斗变成"点击 → 用 → 安装"。和原生比："点击 → 商店 → 下载 → 等 → 首启"\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cp>\u003Cstrong>绕开 APK 上报阻力\u003C/strong> —— 在 APK 分发被标记、新 Google Play 账号上包受限的市场，PWA 把整个问题绕开。\u003Cstrong>URL 即产品\u003C/strong>\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"3\"\n        >\u003Cp>\u003Cstrong>CDN 友好\u003C/strong> —— PWA 部署成静态资源走 CDN（Cloudflare、CloudFront），全球扩容成本很低。东京到圣保罗首屏时间能 < 1 秒\u003C/p>\u003C/li>\u003C/ul>\u003Cp>归因层面常见做法是 PWA 配一层 smart link：每个 campaign 一个品牌短链，把 UTM / campaign ID 透传到安装，通过 Meta Ads Conversions API / Google Ads Enhanced Conversions 回传。\u003C/p>\u003Ch2>真实案例\u003C/h2>\u003Cp>PWA 不是 PPT 概念，主流消费品牌都有实打实数据：\u003C/p>\u003Cul class=\"list-bullet\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cp>\u003Cstrong>Twitter Lite\u003C/strong> —— 每会话页面浏览数 +65%，发推数 +75%，跳出率 -20%。包体压到 < 1 MB，原生约 24 MB\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cp>\u003Cstrong>星巴克 Starbucks\u003C/strong> —— 店内点单做了 PWA，3G 下加载 1.5 秒；日活 Web 用户翻倍\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"3\"\n        >\u003Cp>\u003Cstrong>Pinterest\u003C/strong> —— 重写移动 Web 为 PWA，核心互动 +60%，单访客广告收入 +44%\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"4\"\n        >\u003Cp>\u003Cstrong>Tinder Online\u003C/strong> —— PWA 首启 4.7 秒，原生 App 首启 11.9 秒；右滑数和消息数双涨\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"5\"\n        >\u003Cp>\u003Cstrong>Spotify\u003C/strong> —— 桌面 PWA 替代了一部分用户的 Electron 桌面客户端，功能相当\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"6\"\n        >\u003Cp>\u003Cstrong>Trivago\u003C/strong> —— 接通 install prompt 后，PWA 安装量从"几乎为零"一年涨到 150 万\u003C/p>\u003C/li>\u003C/ul>\u003Cp>共同模式：核心收益来自移除安装阻力 + 首屏比原生 App 冷启动还快。\u003C/p>\u003Ch2>PWA 怎么部署\u003C/h2>\u003Cp>最小可用 PWA 的部署步骤：\u003C/p>\u003Col class=\"list-number\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cp>\u003Cstrong>用任何 Web 框架做出 Web App\u003C/strong> —— React、Vue、Svelte、Astro 都行，纯服务端渲染 HTML 也算\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cp>\u003Cstrong>加 `manifest.json`\u003C/strong> 放根目录，HTML 里 \u003Ccode><link rel="manifest">\u003C/code> 引用\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"3\"\n        >\u003Cp>\u003Cstrong>注册 Service Worker\u003C/strong> 缓存 app shell 和关键路由\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"4\"\n        >\u003Cp>\u003Cstrong>HTTPS 部署\u003C/strong> + 有效 TLS —— Cloudflare 免费档够用\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"5\"\n        >\u003Cp>\u003Cstrong>测安装\u003C/strong> —— Chrome DevTools → Application → Manifest 会报缺哪些字段，能手动触发 install prompt\u003C/p>\u003C/li>\u003C/ol>\u003Cp>SEO 角度，每个路由要服务端渲染或预渲染足够的 HTML，Google 爬虫不会等 JS 跑很久。\u003C/p>\u003Ch2>Web Push 和 Web Share Target\u003C/h2>\u003Cp>两个 PWA 能力大多数团队没用够：\u003C/p>\u003Cul class=\"list-bullet\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cp>\u003Cstrong>Web Push\u003C/strong> —— 用户安装并授权后，通过 Push API + Firebase Cloud Messaging / OneSignal / 自建 VAPID 后端发推送。在 install prompt 接受率高的市场，打开率和原生 App push 相当\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cp>\u003Cstrong>Web Share Target\u003C/strong> —— 把 PWA 注册成系统分享目的地，出现在系统 share sheet 里。对内容分享类应用（"从分享导入"、"从分享保存"）、再触达回流都很有用\u003C/p>\u003C/li>\u003C/ul>\u003Ch2>怎么把 PWA 规模化\u003C/h2>\u003Cp>PWA 给你的是运行时。要把它做成营销渠道，外围这几块更重要：\u003C/p>\u003Col class=\"list-number\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >\u003Cp>\u003Cstrong>品牌短链\u003C/strong>，把广告点击路由进 PWA，且不被 WhatsApp / Instagram 内置浏览器吃掉 install prompt\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >\u003Cp>\u003Cstrong>按 campaign 的落地变体\u003C/strong> —— 同一个 PWA 根据 campaign ID 展示不同首屏，素材和产品同步迭代\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"3\"\n        >\u003Cp>\u003Cstrong>回传到广告平台\u003C/strong> —— Meta Conversions API、Google Enhanced Conversions，并和原生 App 安装做去重\u003C/p>\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"4\"\n        >\u003Cp>\u003Cstrong>WhatsApp / SMS 再触达\u003C/strong> —— 短链能过 WhatsApp Link Preview，已装时路由到 PWA、没装时回退到 Web\u003C/p>\u003C/li>\u003C/ol>\u003Cp>\u003Ca href=\"https://deepclick.com/\">DeepClick\u003C/a> 做的正是为出海增长配套的这一层：智能链接路由进 PWA 落地页、回传 Meta Ads 和 Google Ads、同一个 canonical URL 上做 A/B、WhatsApp 模板友好的品牌短链。对把 PWA 当主获客载体的团队来说，这是"PWA 跑得起来"和"PWA 跑得动量"之间通常缺的那块。\u003C/p>\u003Ch2>常见问题\u003C/h2>\u003Ch3>PWA 用大白话说是什么\u003C/h3>\u003Cp>PWA 是一个网站，加了一些能力让它可以装到手机或桌面、能离线、能发推送、用起来像 App —— 全程只要一个 URL，不走应用商店。\u003C/p>\u003Ch3>PWA 和原生 App 有什么区别\u003C/h3>\u003Cp>原生 App 从应用商店下载，是平台特定的二进制。PWA 是一个网站，符合可安装条件（manifest、Service Worker、HTTPS）就能从浏览器直接装到主屏。PWA 体积更小、更新无感、跳过商店审核。\u003C/p>\u003Ch3>PWA 在 iOS 上能用吗\u003C/h3>\u003Cp>能。iOS Safari 支持 PWA 安装（加到主屏），iOS 16.4 起也支持 Web Push。一些功能比 Android 受限（没有自动 install prompt UI、长期闲置会被驱逐），但功能完整的 PWA 在 iPhone 上能装、能跑。\u003C/p>\u003Ch3>PWA 对 SEO 友好吗\u003C/h3>\u003Cp>友好 —— PWA 每个路由都是 Google 可爬的真 URL。排名好的关键是服务端渲染或预渲染，别让 Googlebot 等长链路 JS 执行。PWA 的速度和互动指标通常还能帮助排名。\u003C/p>\u003Ch3>PWA 能上 Google Play 吗\u003C/h3>\u003Cp>能，通过 Trusted Web Activity（TWA）—— 一个让 PWA 以 Android App 形态出现在 Play Store 的壳。PWA 还是按 PWA 运行，TWA 只是分发壳。\u003C/p>\u003Ch3>PWA 用什么语言和框架做\u003C/h3>\u003Cp>任何 Web 技术栈都行。React、Vue、Svelte、Next.js、Nuxt、Astro、SvelteKit、Angular、服务端渲染 HTML 都行 —— 唯一要求是 HTTPS、manifest、Service Worker。\u003C/p>\u003C/div>","https://deepclick.com/zh-CN/resources/blog/progressive-web-application-guide-zh",{"zh-CN":610},1780988765842]