[{"data":1,"prerenderedAt":125},["ShallowReactive",2],{"blog-241105-62-zh-CN":3},{"id":4,"title":5,"excerpt":6,"content":7,"coverImage":73,"meta":82,"site":83,"status":97,"slug":98,"author":99,"category":110,"publishDate":118,"featured":119,"updatedAt":120,"createdAt":121,"contentHtml":122,"previewUrl":123,"localeSlugs":124},398,"前端要懂 PWA 吗？哪些公司在用？","最近技术群热烈讨论 PWA，自己虽对其技术原理略知一二，但作为前端，真的有必要掌握 PWA 吗？",{"root":8},{"children":9,"direction":18,"format":15,"indent":13,"type":72,"version":17},[10,20,36,40,44,48,52,56,60,64,68],{"children":11,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[12],{"detail":13,"format":13,"mode":14,"style":15,"text":6,"type":16,"version":17},0,"normal","","text",1,null,"paragraph",{"type":21,"version":22,"format":15,"fields":23,"relationTo":24,"value":25,"id":35},"upload",3,{},"media",{"id":26,"alt":27,"updatedAt":28,"createdAt":28,"url":29,"thumbnailURL":18,"filename":30,"mimeType":31,"filesize":32,"width":33,"height":34},373,"ROIBest 的 PWA 技术能否真正替代 Google 应用商店？它又有哪些独特优势？","2026-07-21T06:53:32.802Z","https://cms-r2.deepclick.com/default-cover-typed-1d27280cf690.png","default-cover-typed-1d27280cf690.png","image/png",34452,1200,675,"6a5f28c62a416600c8ef7404",{"children":37,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[38],{"detail":13,"format":13,"mode":14,"style":15,"text":39,"type":16,"version":17},"先看传统 web 应用。如今 web 应用在移动时代远未达桌面设备上的流行程度。对比原生应用，差距明显。原因主要有几点：移动设备网络受限，加载时间不可忽视；web 应用依赖浏览器入口；体验与原生存在差距。若能解决这些问题，web app 的提升空间可想而知。",{"children":41,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[42],{"detail":13,"format":13,"mode":14,"style":15,"text":43,"type":16,"version":17},"那 PWA 究竟是什么呢？",{"children":45,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[46],{"detail":13,"format":13,"mode":14,"style":15,"text":47,"type":16,"version":17},"PWA 全称 Progressive Web Apps（渐进式 Web 应用程序），旨在利用现有 web 技术为用户带来更优体验。基本要求有可靠，即即便网络不稳也能瞬间加载呈现；快速响应，具备平滑动画回应操作；粘性强，如原生应用般可添加到桌面。PWA 强调渐进式，开发者可通过 PWA Checklist 查看现有特征。",{"children":49,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[50],{"detail":13,"format":13,"mode":14,"style":15,"text":51,"type":16,"version":17},"除基本要求外，还包括渐进式适用所有浏览器、连接无关性可离线访问、类似应用有原生交互和导航、持续更新始终最新、安全由 HTTPS 提供服务、可索引被搜索引擎识别、粘性强可推送通知促用户回流、可安装免去应用商店下载麻烦、可链接方便分享等特性。需强调，PWA 并非全新技术，而是多种 web 技术的集合。",{"children":53,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[54],{"detail":13,"format":13,"mode":14,"style":15,"text":55,"type":16,"version":17},"再看 PWA 技术组成。",{"children":57,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[58],{"detail":13,"format":13,"mode":14,"style":15,"text":59,"type":16,"version":17},"PWA 由 App Manifest、Service Worker、Notifications API、Push API 等技术构成。其中 Service Worker 是关键，可让 app 满足基本要求，其他技术则锦上添花。",{"children":61,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[62],{"detail":13,"format":13,"mode":14,"style":15,"text":63,"type":16,"version":17},"最后看看哪些大公司在用 PWA。",{"children":65,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[66],{"detail":13,"format":13,"mode":14,"style":15,"text":67,"type":16,"version":17},"星巴克 2017 年推出 PWA，用户无网络也能浏览菜单定制订单，日活跃用户翻倍，订单多样性增加 23%。Uber 的 PWA 让用户在低端设备和网络不稳时也能叫车，无需下载原生应用。《日经新闻》改用 PWA 后，有机流量增 2.3 倍，订阅量增 58%，日活跃用户增 49%。星巴克的 PWA 提供提前下单和奖励计划，可离线添加商品到购物车。Telegram 推出 PWA 后，用户增长率增 175%，留存率增 50%，用户基数每年增 40%，每次会话数增 50%。",{"children":69,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[70],{"detail":13,"format":13,"mode":14,"style":15,"text":71,"type":16,"version":17},"总之，PWA 本质上是 Web App，借助新技术也有了 Native App 的特性。","root",{"id":74,"alt":75,"updatedAt":76,"createdAt":76,"url":77,"thumbnailURL":18,"filename":78,"mimeType":31,"filesize":79,"width":80,"height":81},910,"ROIBest Blog default cover","2026-07-22T03:39:13.297Z","https://cms-r2.deepclick.com/default-cover-c6e0dbec9535.png","default-cover-c6e0dbec9535.png",1265633,1568,981,{"title":18,"description":18,"image":18},{"id":84,"key":85,"name":86,"prodHost":87,"testHost":88,"blogPath":89,"docPath":90,"zhPrefix":91,"deployHookTest":92,"deployHookProd":93,"enabled":94,"updatedAt":95,"createdAt":96},2,"roibest","RoiBest","https://www.roibest.com","https://www-stg-roibest.qiliangjia.one","/resources/blog/{slug}","/docs/{slug}","/zh-CN","https://api.cloudflare.com/client/v4/pages/webhooks/deploy_hooks/28cd5297-3c9e-4c80-8431-ddc8b2556e6e","https://api.cloudflare.com/client/v4/pages/webhooks/deploy_hooks/78763ef2-3db8-43d9-a2a5-0ae6ffe24c3f",true,"2026-07-21T11:31:15.739Z","2026-07-14T09:56:11.826Z","published","241105-62",{"id":22,"name":100,"avatar":101,"updatedAt":108,"createdAt":109},"ROIBest",{"id":102,"alt":100,"updatedAt":103,"createdAt":103,"url":104,"thumbnailURL":18,"filename":105,"mimeType":31,"filesize":106,"width":107,"height":107},908,"2026-07-22T02:47:15.086Z","https://cms-r2.deepclick.com/favicon-ae68c4bc4d9d.png","favicon-ae68c4bc4d9d.png",2320,48,"2026-07-22T02:47:22.252Z","2026-07-22T02:30:48.651Z",{"id":111,"site":112,"titleZh":113,"titleEn":114,"slug":115,"order":116,"updatedAt":117,"createdAt":117},14,{"id":84,"key":85,"name":86,"prodHost":87,"testHost":88,"blogPath":89,"docPath":90,"zhPrefix":91,"deployHookTest":92,"deployHookProd":93,"enabled":94,"updatedAt":95,"createdAt":96},"PWA 洞察","PWA Insights","pwa",60,"2026-07-21T06:40:18.674Z","2024-09-24T20:04:52.000Z",false,"2026-07-22T03:39:49.455Z","2026-07-21T08:03:37.015Z","\u003Cdiv class=\"payload-richtext\">\u003Cp>最近技术群热烈讨论 PWA，自己虽对其技术原理略知一二，但作为前端，真的有必要掌握 PWA 吗？\u003C/p>\n        \u003Cimg\n          alt=\"ROIBest 的 PWA 技术能否真正替代 Google 应用商店？它又有哪些独特优势？\"\n          height=\"675\"\n          src=\"https://cms-r2.deepclick.com/default-cover-typed-1d27280cf690.png?w=1200&q=85\"\n          width=\"1200\"\n        />\n      \u003Cp>先看传统 web 应用。如今 web 应用在移动时代远未达桌面设备上的流行程度。对比原生应用，差距明显。原因主要有几点：移动设备网络受限，加载时间不可忽视；web 应用依赖浏览器入口；体验与原生存在差距。若能解决这些问题，web app 的提升空间可想而知。\u003C/p>\u003Cp>那 PWA 究竟是什么呢？\u003C/p>\u003Cp>PWA 全称 Progressive Web Apps（渐进式 Web 应用程序），旨在利用现有 web 技术为用户带来更优体验。基本要求有可靠，即即便网络不稳也能瞬间加载呈现；快速响应，具备平滑动画回应操作；粘性强，如原生应用般可添加到桌面。PWA 强调渐进式，开发者可通过 PWA Checklist 查看现有特征。\u003C/p>\u003Cp>除基本要求外，还包括渐进式适用所有浏览器、连接无关性可离线访问、类似应用有原生交互和导航、持续更新始终最新、安全由 HTTPS 提供服务、可索引被搜索引擎识别、粘性强可推送通知促用户回流、可安装免去应用商店下载麻烦、可链接方便分享等特性。需强调，PWA 并非全新技术，而是多种 web 技术的集合。\u003C/p>\u003Cp>再看 PWA 技术组成。\u003C/p>\u003Cp>PWA 由 App Manifest、Service Worker、Notifications API、Push API 等技术构成。其中 Service Worker 是关键，可让 app 满足基本要求，其他技术则锦上添花。\u003C/p>\u003Cp>最后看看哪些大公司在用 PWA。\u003C/p>\u003Cp>星巴克 2017 年推出 PWA，用户无网络也能浏览菜单定制订单，日活跃用户翻倍，订单多样性增加 23%。Uber 的 PWA 让用户在低端设备和网络不稳时也能叫车，无需下载原生应用。《日经新闻》改用 PWA 后，有机流量增 2.3 倍，订阅量增 58%，日活跃用户增 49%。星巴克的 PWA 提供提前下单和奖励计划，可离线添加商品到购物车。Telegram 推出 PWA 后，用户增长率增 175%，留存率增 50%，用户基数每年增 40%，每次会话数增 50%。\u003C/p>\u003Cp>总之，PWA 本质上是 Web App，借助新技术也有了 Native App 的特性。\u003C/p>\u003C/div>","https://www.roibest.com/zh-CN/resources/blog/241105-62",{"zh-CN":98},1784706005267]