[{"data":1,"prerenderedAt":149},["ShallowReactive",2],{"blog-241105-63-zh-CN":3},{"id":4,"title":5,"excerpt":6,"content":7,"coverImage":97,"meta":106,"site":107,"status":121,"slug":122,"author":123,"category":134,"publishDate":142,"featured":143,"updatedAt":144,"createdAt":145,"contentHtml":146,"previewUrl":147,"localeSlugs":148},399,"Blazor 如何成功构建 PWA？","Blazor 支持渐进式应用开发，也就是 PWA。利用 PWA 模式，能让 web 应用拥有原生应用般的体验。现在就来聊聊怎么用 Blazor 构建一个 PWA。",{"root":8},{"children":9,"direction":18,"format":15,"indent":13,"type":96,"version":17},[10,20,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92],{"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,"6a5f28c7766b9300c8804364",{"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},"先说说啥是 PWA。",{"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 应用是通过特定技术和标准模式开发的 web 应用，兼具 web 应用和原生应用的特性。",{"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},"举例来说，web 应用更容易被发现，访问一个网站比安装应用明显更便捷快速，还能通过链接分享。而原生应用与操作系统整合得更好，能为用户带来无缝体验。安装原生应用后，即使离线也能运行，而且用户更喜欢点击主页图标来访问喜爱的应用。",{"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},"PWA 让我们有能力创建同时拥有这两种优势的应用。这可不是新观念，过去在 web 平台上，通过多种方法多次出现过类似想法。渐进式增强和响应式设计能构建对移动端友好的网站。多年前的 Firefox OS 生态系统中，离线运行和安装 web 应用就已成为可能。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 能让你的 web 程序像普通应用一样运行，有桌面图标，能离线，没有浏览器地址栏，看起来就像普通程序或 APP。",{"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},"那怎么用 Blazor 构建一个 PWA 呢？",{"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},"用 VS 创建一个 Blazor 程序，选择 Webassembly 模式，并勾选支持 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},"支持 PWA 的 Blazor 程序主要多了几样东西：",{"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},"manifest.json，这是个清单文件，程序安装到设备上时会读取其中信息，比如名称、图标、语言等。",{"children":73,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[74],{"detail":13,"format":13,"mode":14,"style":15,"text":75,"type":16,"version":17},"service-worker.js，它用于运行后台任务，与浏览器主进程隔离，不阻塞页面。我们可以用它实现一些功能，比如过滤所有 fetch/xhr 请求，决定哪些走缓存，哪些不走；还能在后台悄悄拉取数据缓存起来。项目里有两个 service-worker.js 文件，一个是开发时用的，没什么逻辑，另一个是发布时的，有一些缓存逻辑。",{"children":77,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[78],{"detail":13,"format":13,"mode":14,"style":15,"text":79,"type":16,"version":17},"如果是 PWA 程序，在浏览器地址栏右侧有个图标，点击可安装到本地，安装完会在桌面生成图标，打开后是没有浏览器地址栏的界面。这样一个 PWA 程序就可以运行了。",{"children":81,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[82],{"detail":13,"format":13,"mode":14,"style":15,"text":83,"type":16,"version":17},"离线运行很关键。如果只是没有浏览器地址栏，那 PWA 吸引力可不大。个人觉得 PWA 最大魅力就是能离线运行，没网络也能照常使用，这才像原生编写的程序。",{"children":85,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[86],{"detail":13,"format":13,"mode":14,"style":15,"text":87,"type":16,"version":17},"修改 service-worker，离线原理很简单，就是把请求的数据缓存起来，一般是缓存 Get 请求，像各种页面图片等。修改 service-worker.js，把 GET 请求全部缓存起来。当然，实际情况不会这么简单。为了能缓存页面，必须先在线运行成功一次。",{"children":89,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[90],{"detail":13,"format":13,"mode":14,"style":15,"text":91,"type":16,"version":17},"模拟离线，修改完 js 并在线正常运行一次后，能看到所有 GET 请求的资源都被缓存起来了。",{"children":93,"direction":18,"format":15,"indent":13,"type":19,"version":17,"textFormat":13,"textStyle":15},[94],{"detail":13,"format":13,"mode":14,"style":15,"text":95,"type":16,"version":17},"总结一下，用 Blazor 能快速开发 PWA 应用。借助 PWA 和 Blazor Webassembly 的特性，可以开发出类似桌面的应用程序。或许这是跨平台桌面应用开发除了 electron 之外的又一种选择。","root",{"id":98,"alt":99,"updatedAt":100,"createdAt":100,"url":101,"thumbnailURL":18,"filename":102,"mimeType":31,"filesize":103,"width":104,"height":105},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":108,"key":109,"name":110,"prodHost":111,"testHost":112,"blogPath":113,"docPath":114,"zhPrefix":115,"deployHookTest":116,"deployHookProd":117,"enabled":118,"updatedAt":119,"createdAt":120},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-63",{"id":22,"name":124,"avatar":125,"updatedAt":132,"createdAt":133},"ROIBest",{"id":126,"alt":124,"updatedAt":127,"createdAt":127,"url":128,"thumbnailURL":18,"filename":129,"mimeType":31,"filesize":130,"width":131,"height":131},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":135,"site":136,"titleZh":137,"titleEn":138,"slug":139,"order":140,"updatedAt":141,"createdAt":141},14,{"id":108,"key":109,"name":110,"prodHost":111,"testHost":112,"blogPath":113,"docPath":114,"zhPrefix":115,"deployHookTest":116,"deployHookProd":117,"enabled":118,"updatedAt":119,"createdAt":120},"PWA 洞察","PWA Insights","pwa",60,"2026-07-21T06:40:18.674Z","2024-09-24T20:04:00.000Z",false,"2026-07-22T03:39:49.455Z","2026-07-21T08:03:37.915Z","\u003Cdiv class=\"payload-richtext\">\u003Cp>Blazor 支持渐进式应用开发，也就是 PWA。利用 PWA 模式，能让 web 应用拥有原生应用般的体验。现在就来聊聊怎么用 Blazor 构建一个 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>先说说啥是 PWA。\u003C/p>\u003Cp>PWA 应用是通过特定技术和标准模式开发的 web 应用，兼具 web 应用和原生应用的特性。\u003C/p>\u003Cp>举例来说，web 应用更容易被发现，访问一个网站比安装应用明显更便捷快速，还能通过链接分享。而原生应用与操作系统整合得更好，能为用户带来无缝体验。安装原生应用后，即使离线也能运行，而且用户更喜欢点击主页图标来访问喜爱的应用。\u003C/p>\u003Cp>PWA 让我们有能力创建同时拥有这两种优势的应用。这可不是新观念，过去在 web 平台上，通过多种方法多次出现过类似想法。渐进式增强和响应式设计能构建对移动端友好的网站。多年前的 Firefox OS 生态系统中，离线运行和安装 web 应用就已成为可能。PWA 不仅如此，还提供更多特性，让 web 更出色。\u003C/p>\u003Cp>说白了，PWA 能让你的 web 程序像普通应用一样运行，有桌面图标，能离线，没有浏览器地址栏，看起来就像普通程序或 APP。\u003C/p>\u003Cp>那怎么用 Blazor 构建一个 PWA 呢？\u003C/p>\u003Cp>用 VS 创建一个 Blazor 程序，选择 Webassembly 模式，并勾选支持 PWA。\u003C/p>\u003Cp>支持 PWA 的 Blazor 程序主要多了几样东西：\u003C/p>\u003Cp>manifest.json，这是个清单文件，程序安装到设备上时会读取其中信息，比如名称、图标、语言等。\u003C/p>\u003Cp>service-worker.js，它用于运行后台任务，与浏览器主进程隔离，不阻塞页面。我们可以用它实现一些功能，比如过滤所有 fetch/xhr 请求，决定哪些走缓存，哪些不走；还能在后台悄悄拉取数据缓存起来。项目里有两个 service-worker.js 文件，一个是开发时用的，没什么逻辑，另一个是发布时的，有一些缓存逻辑。\u003C/p>\u003Cp>如果是 PWA 程序，在浏览器地址栏右侧有个图标，点击可安装到本地，安装完会在桌面生成图标，打开后是没有浏览器地址栏的界面。这样一个 PWA 程序就可以运行了。\u003C/p>\u003Cp>离线运行很关键。如果只是没有浏览器地址栏，那 PWA 吸引力可不大。个人觉得 PWA 最大魅力就是能离线运行，没网络也能照常使用，这才像原生编写的程序。\u003C/p>\u003Cp>修改 service-worker，离线原理很简单，就是把请求的数据缓存起来，一般是缓存 Get 请求，像各种页面图片等。修改 service-worker.js，把 GET 请求全部缓存起来。当然，实际情况不会这么简单。为了能缓存页面，必须先在线运行成功一次。\u003C/p>\u003Cp>模拟离线，修改完 js 并在线正常运行一次后，能看到所有 GET 请求的资源都被缓存起来了。\u003C/p>\u003Cp>总结一下，用 Blazor 能快速开发 PWA 应用。借助 PWA 和 Blazor Webassembly 的特性，可以开发出类似桌面的应用程序。或许这是跨平台桌面应用开发除了 electron 之外的又一种选择。\u003C/p>\u003C/div>","https://www.roibest.com/zh-CN/resources/blog/241105-63",{"zh-CN":122},1784706005255]