[{"data":1,"prerenderedAt":154},["ShallowReactive",2],{"blog-241105-59-zh-CN":3},{"id":4,"title":5,"excerpt":6,"content":7,"coverImage":102,"meta":111,"site":112,"status":126,"slug":127,"author":128,"category":139,"publishDate":147,"featured":148,"updatedAt":149,"createdAt":150,"contentHtml":151,"previewUrl":152,"localeSlugs":153},395,"PWA 开发有哪些要点需了解？","苹果推出了 iPhone 应用商店之后，App 便成为我们生活中的一部分。对于实体业务而言，各行业纷纷推出自家 App。但有没有想过这样的情况呢？如果潜在客户没安装你的 App，或者因为手机存储空间不足而卸载了它。那有没有能让 App 更轻便、更易安装的技术呢？",{"root":8},{"children":9,"direction":19,"format":15,"indent":13,"type":101,"version":18},[10,21,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97],{"children":11,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[12],{"detail":13,"format":13,"mode":14,"style":15,"text":16,"type":17,"version":18},0,"normal","","苹果推出了 iPhone 应用商店之后，App 便成为我们生活中的一部分。对于实体业务而言，各行业纷纷推出自家 App。但有没有想过这样的情况呢？如果潜在客户没安装你的 App，或者因为手机存储空间不足而卸载了它。那有没有能让 App 更轻便、更易安装的技术呢？答案是肯定的。","text",1,null,"paragraph",{"type":22,"version":23,"format":15,"fields":24,"relationTo":25,"value":26,"id":36},"upload",3,{},"media",{"id":27,"alt":28,"updatedAt":29,"createdAt":29,"url":30,"thumbnailURL":19,"filename":31,"mimeType":32,"filesize":33,"width":34,"height":35},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,"6a5f28bf2f4fe100c8ebd013",{"children":38,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[39],{"detail":13,"format":13,"mode":14,"style":15,"text":40,"type":17,"version":18},"渐进式 Web 应用程序应运而生，它兼具 Web 应用功能和原生应用才有的特性。渐进式 Web 应用程序可从主屏幕图标启动，也能根据推送通知开启，加载时间极短，不仅能在线使用，还可打包为离线可用。",{"children":42,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[43],{"detail":13,"format":13,"mode":14,"style":15,"text":44,"type":17,"version":18},"关键是在手机上创建渐进式 Web 应用程序很简单，因为它们只是对网站的增强。当有人首次访问你的网站，经你授权后，PWA 的功能就会自动在手机上创建。",{"children":46,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":18,"textStyle":15},[47],{"detail":13,"format":18,"mode":14,"style":15,"text":48,"type":17,"version":18},"PWA 开发有哪些要点需了解？创建一个 PWA 应用需要安装哪些软件呢？",{"children":50,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":18,"textStyle":15},[51],{"detail":13,"format":18,"mode":14,"style":15,"text":52,"type":17,"version":18},"必须安装以下软件：",{"children":54,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[55],{"detail":13,"format":13,"mode":14,"style":15,"text":56,"type":17,"version":18},"node，8.9 版本及以上。",{"children":58,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[59],{"detail":13,"format":13,"mode":14,"style":15,"text":60,"type":17,"version":18},"Yarn。",{"children":62,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[63],{"detail":13,"format":13,"mode":14,"style":15,"text":64,"type":17,"version":18},"Git。",{"children":66,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[67],{"detail":13,"format":13,"mode":14,"style":15,"text":68,"type":17,"version":18},"PWA 的技术组件有哪些呢？",{"children":70,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[71],{"detail":13,"format":13,"mode":14,"style":15,"text":72,"type":17,"version":18},"PWA 有三个重要技术组件协同工作，包括 Manifest 清单文件、Service Worker 和在 https 下运行。",{"children":74,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":18,"textStyle":15},[75],{"detail":13,"format":18,"mode":14,"style":15,"text":76,"type":17,"version":18},"Manifest 清单文件",{"children":78,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[79],{"detail":13,"format":13,"mode":14,"style":15,"text":80,"type":17,"version":18},"清单文件是一个 JSON 配置文档，包含 PWA 的基础信息，如应用图标、Web 应用程序名称及背景颜色。若浏览器检测到网站有 PWA 清单文件，Chrome 会自动出现 \"添加到主屏幕\" 按钮。用户点击同意后，图标将添加到主屏幕，同时安装 PWA。",{"children":82,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[83],{"detail":13,"format":13,"mode":14,"style":15,"text":84,"type":17,"version":18},"Service Worker",{"children":86,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[87],{"detail":13,"format":13,"mode":14,"style":15,"text":88,"type":17,"version":18},"Service Worker（SW）是一段 JavaScript，充当浏览器与网络服务器之间的代理。它能在基于浏览器的 web 应用中实现离线缓存、消息推送、静默更新等 native 应用常见功能，为 web 应用提供更优更丰富的使用体验。",{"children":90,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":18,"textStyle":15},[91],{"detail":13,"format":18,"mode":14,"style":15,"text":92,"type":17,"version":18},"HTTPS",{"children":94,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[95],{"detail":13,"format":13,"mode":14,"style":15,"text":96,"type":17,"version":18},"加载非 HTTPS 站点时，地址栏会明确标记为 \"Not Secure（不安全）\"。在 Google 的推动下，HTTPS 在安全性和搜索引擎友好方面优势显著。目前 Top 100 的网站中已有 81 家默认使用 HTTPS。升级 HTTPS 可分为购买证书、安装证书、设置跳转三个步骤。",{"children":98,"direction":19,"format":15,"indent":13,"type":20,"version":18,"textFormat":13,"textStyle":15},[99],{"detail":13,"format":13,"mode":14,"style":15,"text":100,"type":17,"version":18},"以上就是开发 PWA（渐进式 Web 应用程序）之前需要了解的大致内容。更详细的代码模块，很多人都有分享，可以参考着做一遍。","root",{"id":103,"alt":104,"updatedAt":105,"createdAt":105,"url":106,"thumbnailURL":19,"filename":107,"mimeType":32,"filesize":108,"width":109,"height":110},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":19,"description":19,"image":19},{"id":113,"key":114,"name":115,"prodHost":116,"testHost":117,"blogPath":118,"docPath":119,"zhPrefix":120,"deployHookTest":121,"deployHookProd":122,"enabled":123,"updatedAt":124,"createdAt":125},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-59",{"id":23,"name":129,"avatar":130,"updatedAt":137,"createdAt":138},"ROIBest",{"id":131,"alt":129,"updatedAt":132,"createdAt":132,"url":133,"thumbnailURL":19,"filename":134,"mimeType":32,"filesize":135,"width":136,"height":136},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":140,"site":141,"titleZh":142,"titleEn":143,"slug":144,"order":145,"updatedAt":146,"createdAt":146},14,{"id":113,"key":114,"name":115,"prodHost":116,"testHost":117,"blogPath":118,"docPath":119,"zhPrefix":120,"deployHookTest":121,"deployHookProd":122,"enabled":123,"updatedAt":124,"createdAt":125},"PWA 洞察","PWA Insights","pwa",60,"2026-07-21T06:40:18.674Z","2024-09-24T20:06:52.000Z",false,"2026-07-22T03:39:49.455Z","2026-07-21T08:03:33.154Z","\u003Cdiv class=\"payload-richtext\">\u003Cp>苹果推出了 iPhone 应用商店之后，App 便成为我们生活中的一部分。对于实体业务而言，各行业纷纷推出自家 App。但有没有想过这样的情况呢？如果潜在客户没安装你的 App，或者因为手机存储空间不足而卸载了它。那有没有能让 App 更轻便、更易安装的技术呢？答案是肯定的。\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 应用程序可从主屏幕图标启动，也能根据推送通知开启，加载时间极短，不仅能在线使用，还可打包为离线可用。\u003C/p>\u003Cp>关键是在手机上创建渐进式 Web 应用程序很简单，因为它们只是对网站的增强。当有人首次访问你的网站，经你授权后，PWA 的功能就会自动在手机上创建。\u003C/p>\u003Cp>\u003Cstrong>PWA 开发有哪些要点需了解？创建一个 PWA 应用需要安装哪些软件呢？\u003C/strong>\u003C/p>\u003Cp>\u003Cstrong>必须安装以下软件：\u003C/strong>\u003C/p>\u003Cp>node，8.9 版本及以上。\u003C/p>\u003Cp>Yarn。\u003C/p>\u003Cp>Git。\u003C/p>\u003Cp>PWA 的技术组件有哪些呢？\u003C/p>\u003Cp>PWA 有三个重要技术组件协同工作，包括 Manifest 清单文件、Service Worker 和在 https 下运行。\u003C/p>\u003Cp>\u003Cstrong>Manifest 清单文件\u003C/strong>\u003C/p>\u003Cp>清单文件是一个 JSON 配置文档，包含 PWA 的基础信息，如应用图标、Web 应用程序名称及背景颜色。若浏览器检测到网站有 PWA 清单文件，Chrome 会自动出现 "添加到主屏幕" 按钮。用户点击同意后，图标将添加到主屏幕，同时安装 PWA。\u003C/p>\u003Cp>Service Worker\u003C/p>\u003Cp>Service Worker（SW）是一段 JavaScript，充当浏览器与网络服务器之间的代理。它能在基于浏览器的 web 应用中实现离线缓存、消息推送、静默更新等 native 应用常见功能，为 web 应用提供更优更丰富的使用体验。\u003C/p>\u003Cp>\u003Cstrong>HTTPS\u003C/strong>\u003C/p>\u003Cp>加载非 HTTPS 站点时，地址栏会明确标记为 "Not Secure（不安全）"。在 Google 的推动下，HTTPS 在安全性和搜索引擎友好方面优势显著。目前 Top 100 的网站中已有 81 家默认使用 HTTPS。升级 HTTPS 可分为购买证书、安装证书、设置跳转三个步骤。\u003C/p>\u003Cp>以上就是开发 PWA（渐进式 Web 应用程序）之前需要了解的大致内容。更详细的代码模块，很多人都有分享，可以参考着做一遍。\u003C/p>\u003C/div>","https://www.roibest.com/zh-CN/resources/blog/241105-59",{"zh-CN":127},1784706006025]