- 综合排序
- 最热优先
- 最新优先
- 来自专栏零域Blog
PWA 方案相关技术分享
在开发过程中，发现 PWA 方案的主要核心技术在于 Service Worker，我下面将从 PWA 方案的简介、PWA 方案的相关技术等2个方向简单介绍一下我对于本次开发的收获。 在介绍完这些技术后，我将在最后的篇幅里介绍一个简单 PWA 方案的详细实现。 什么是 PWA？ PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 相关技术 PWA 方案的关键技术：Service Worker。 参考文献： 服务工作线程：简介 Web 技术文档 Web API 接口 ServiceWorker 借助Service Worker和cacheStorage缓存及离线开发 网站渐进式增强体验(PWA)
1.1K20编辑于 2022-03-25 - 来自专栏MixLab科技+设计实验室
PWA技术及其用户体验设计
今天主要介绍下web前端客户端的实现，主要使用了PWA技术。 - 什么是PWA？ ? 就是mixlab那个logo PWA是一系列技术的集合，里面最核心的是一个叫“app shell”的概念。 - 什么是App shell？ - Service Worker Service Worker API可以完成2种任务，一种是缓存App shell所需的数据，另一种是如果你有比较耗时的计算，你可以把它们从主线程中抽离出来，在Service 因此，在设计技术架构的时候，需要考虑到2种方式的优缺点。 除了配置serviceWorker.js之外，我们还需要配置manifest.json文件。 这是体验设计上需要注意的地方，我们应该认识到并不是每个用户都是技术出身，都对PWA的概念了解得很清楚。因而，用户体验设计需要为用户提供指导，以便他们可以了解什么是PWA（或者离线模式）。
1.2K20发布于 2020-04-10 - 来自专栏lhyt前端之路
pwa+webpack，初探与踩坑0.前言1.webpack2.pwa3.基于webpack的pwa
0.前言 我们都知道pwa是一个新技术.，依靠缓存，离线了还能正常跑，而且秒开。我把以前原生写的小游戏迁移到react，再迁移到webpack+react，最后再升级到pwa。 //bunld.js会注入里面 inject: true }), new OfflinePlugin() //这是pwa +webpack的效果，那我们eslint、test就不写了 2.pwa 我们就拿百度到的那些例子说吧，一个正常的pwa，由index.html、一个css、一个manifest.json、一个sw.js 我们要启动一个pwa，这是必备的。 其实，是不是看起来有点像谷歌浏览器的扩展？有没有试过自己写谷歌浏览器插件，比如屏蔽广告的、个人工具的、某些网站收藏夹等等插件。毕竟一家人，所以看起来也有点像。 3.基于webpack的pwa 文档见官网 我们不用配置就可以跑起来，但是配置里面有些地方需要注意的而且不能乱改，自行看文档。
87920发布于 2018-10-31 - 来自专栏P轴
PWA
# 简介 Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ，是提升WebApp的体验的一种新方法，能给用户原生应用的体验。 PWA 本质上是 Web App ，借助一些新技术也具备了Native App的一些特性，兼具 Web App和Native App的优点。 https://web.dev/learn/pwa/ # 效果 edge浏览器打开网站地址栏会多出来一个图标 打开后类似一个APP，表面上看不出来是一个网页 打开速度变快 断网后也可以访问 #
65330编辑于 2022-11-18 - 来自专栏coding for love
5-2 PWA 的打包配置
简介 PWA 是 Progressive Web App 的缩写，即渐进式 Web 应用，目的是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。 2. PWA 如何保证网页在离线时仍然能正常展示呢？ 小结 本节只是简单介绍了如何利用 webpack 配置 PWA，引入了这样一个概念，更详细的 PWA 应用和配置，等有需要的时候可以详细了解。 参考 GitChat · 前端 | Webpack 工程的 PWA 实战 Workbox 3.0 – Web 站点轻松做到离线可访问 webpack 中使用 workbox 实现 PWA 2019 前端必会黑科技之PWA
1.5K10发布于 2020-05-04 - 来自专栏webTower
PWA 入门
PWA 渐进式 web 应用 (Progressive web apps) 简称为 PWA。它可以给用户原生应用的体验。 PWA 还支持离线缓存，当用户没有网络时也能利用缓存展示页面信息。 PWA 是由许多新的技术组合而成的。 这些技术一般包括： manifest 一个 json 配置文件，用于定义 PWA 应用程序清单； service-worker 让 PWA 离线工作，可以说是 PWA 的核心技术； promise 和 这些技术里，service-worker 是核心，但也是最复杂的一个 API，下面就一一介绍一下这些 API。 cache API 可以参考 MDN 文档：Cache[2] 说了那么多，不做实践永远看不出来效果，只会对 API 感到迷惑。
2.3K21发布于 2020-05-13 - 来自专栏让技术飞起来
PWA应用的核心技术有哪些
在国内由于小程序的风生水起，PWA 应用在国内的状况一直都不是很好，PWA 和小程序有很多的相似性，但是 PWA 是由谷歌发起的技术，小程序是微信发起的技术，所以小程序在国内得到了大力的扶持，很快就在国内技术界开花结果 这里想讨论下在去创建自己的第一个 PWA 应用前，什么是 PWA 应用，有哪些核心的技术？ 图片PWA 的技术核心PWA 的技术核心可以分为四个部分：桌面图标 Web App Manifest ：将网站添加到桌面，让 PWA 应用的访问使用更类似 native 的体验。 <link rel=”manifest” href=”/manifest.json”>2、离线访问 Service WorkerService Worker 是一段 JavaScript，主要用于浏览器和网络之间的代理 当然相信经过持续的技术发展，还会有更多的技术创新生长在 PWA、小程序之上，我们的开发及用户的使用还会得到持续的改进。PWA 和小程序都是推动现代应用开发模式发展的重要里程碑，推动了移动应用的创新。
93530编辑于 2023-10-25 - 来自专栏腾讯IVWEB团队的专栏
web - pwa
本文作者：ivweb villainthr 该库是应对当前 Google 提出的 PWA 概念而写的，以链式 API 来完成 PWA 相关的操作。 安装 npm install web-pwa // 或者使用 yarn yarn add web-pwa ## DEMO 首先说明一下，我们要完成的目标： * 注册 sw * 添加 app.js 的缓存 * 实现推送，并在用户点击后关闭，然后聚焦当前页面 整个代码如下： import SW,{Notify,WebCaches} from 'web-pwa'; window.onload addRow(request1,request2,...) @param Array: 里面就是 url/request 的数组。 rename(newName) @param newNameString: 表的新名字 @return Promise WebCaches.table('old-v1').rename('new-v2'
2.5K10发布于 2017-07-19 - 来自专栏网络安全技术点滴分享
突破矩形边界：探索PWA窗口控件叠加技术
我想讨论一个与上述类似的新功能：渐进式Web应用（PWA）的窗口控件叠加（Window Controls Overlay）。关于标题栏和窗口控件让我们先解释一下标题栏和窗口控件是什么。 让我们使用我们已经掌握的标准技术，并尝试新的想法，为所有设备提供量身定制的体验，所有这些都来自单一的代码库！
20310编辑于 2025-09-01 - 来自专栏前端导学
PWA简介
progressive Web Apps（PWA，渐进式增强 WEB 应用） ? App Shell 模型 App Shell 架构是构建 PWA 应用的一种方式，它通常提供了一个最基本的 Web App 框架，包括应用的头部、底部、菜单栏等结构。 ? 通过 PWA 的缓存机制，我们现在已经有能力让 Skeleton 也出现在 Web App 上取代白屏。通过rel="preload"进行内容预加载 ? Service Worker ? ? ?
81130发布于 2019-05-28 - 来自专栏较真的前端
PWA 入门: 写个非常简单的 PWA 页面
本文首发于饿了么前端——知乎专栏 大家可以点击文章底部的阅读原文来访问原文 Progressive Web Apps 是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案 这篇文章里我们来完成一个非常简单的 PWA 页面。 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。 比如在 HTML 当中更新版本到 2: 同时 sw.js 文件当中也要进行一次修改, 保证文件发生改变, 同时缓存的名称也变改变了: 然后重新打开一次页面, 这个时候渲染的页面依然是旧的, 不过可以从 之后关闭页面, 再次打开, 就可以见到网页上的显示版本变成了 2。
3.1K50发布于 2018-06-08 - 来自专栏Android群英传
PWA程序实践
前言 张涛现在已经PWA上瘾了！ 介绍 这里再介绍一下 Progressive Web Apps 是结合了 web 和 原生应用中某些功能的一种体验（本质上还是 web 应用）。 fetch 拦截请求 之前讲述了 PWA 最重要的组件：Service Worker，没有看过的可以先看看：https://kymjs.com/code/2017/02/04/01/。 这就涉及到 PWA 的一个名词：应用程序外壳(App Shell)。 一个 web 应用分为 应用程序外壳 和 应用数据， 应用外壳的结构分为应用的核心基础组件和承载数据的 UI。 class="button2 active">博客</button> <button id="column3" class="button3">作品</button> 这样一个简单的 PWA 程序就完成了。 Github一键传送：https://github.com/kymjs/PWAblog
52720发布于 2018-07-20 - 来自专栏企鹅号快讯
PWA 那些事儿
二、What's PWA? PWA 全称 Progressive Web App，即渐进式 WEB 应用。 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 第 2 步: 在注册过程中，浏览器会下载、解析并执行 Service Worker ()。 和 2. 勾选可以模拟网站离线情况，勾选后 network 会有一个黄色警告图标，该网站已经离线。此时刷新页面，页面仍然能够正常显示 当前 service worker 的 scope。 服务在国内无法使用 微信小程序的竞争 尽管有上述的一些缺点，PWA 技术仍然有很多可以使用的点。 service worker 技术实现离线缓存，可以将一些不经常更改的静态文件放到缓存中，提升用户体验。
2.3K00发布于 2017-12-28 - 来自专栏向治洪
移动PWA初探
在去年上海举办的2017谷歌开发者大会上，PWA作为会议的一个重要内容被推介，笔者作为参会嘉宾看了PWA的内容后，觉得这种技术会是未来移动发展的一个趋势。 Google开发技术推广工程师Michael Yeung介绍称，新浪微博正在打造一款全新体验的Web Mobile PWA应用，读者可以通过微博提供的PWA版访问网址：m.weibo.cn/beta。 在当前的移动跨平台开发方案中，主要的技术有PWA和Weex、RN（这个笔者在16年专门进行了研究，并出版了相关的书籍）。 不过纵观这些移动技术可以发现，PWA是优化web app，RN是用web调用native思路，weex还是使用web栈调用native的思路。 在移动碎片化严重的当前，如何制定一个统一的标准，才是为了移动技术发展的方向，也就是说：“Web不会趋向于Native，而是Native趋向于Web。”。
45930编辑于 2022-11-30 - 来自专栏前端开发
PWA介绍及快速上手搭建一个PWA应用
PWA介绍 一个新的前端技术，PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。 是结合了一系列现代Web技术的组合，在网页应用中实现和原生应用相近的用户体验。 PWA关键技术 Service Worker （可以理解为服务工厂） Manifest （应用清单） Push Notification（推送通知） Service Worker 以下用SW来表示 SW 我们 PWA 技术使用的就是它！ [99a97bd9ly1fqrad2ei5gj20jt076glu.jpg] [99a97bd9ly1fqragi7iwdj21c30jv0ug.jpg] 我们看到，页面上的内容并没有显示出我刚刚添加的那个
3.1K130发布于 2018-05-15 - 来自专栏MudOnTire
PWA入门：手把手教你制作一个PWA应用
得益于前端技术的飞速发展、浏览器性能的不断提高，使用网页技术开发出接近原生体验的应用得以变为现实，PWA就在这样的背景下应运而生。 但是值得注意的是，PWA还是相对比较新的技术，实现规范还有很多调整的空间，部分浏览器对PWA的支持也还不完善，但是PWA是一个趋势，所以现在学习正合适！ 本文主要关注PWA的搭建，因此vue、ionic等技术不做过多描述。使用VSCode的同学，建议安装Vetur插件增加开发效率。 1. 首先全局安装 @vue/cli： npm install -g @vue/cli 2. 初始化vue项目： vue create vue-ionic-pwa 3. 搜索组件，用于输入邮编并查询，2. 展示组件，用于展示查询到的邮编信息，3. 清除按钮，用于清除查询到的邮编信息 1.
5.9K40发布于 2019-07-02 - 来自专栏JS菌
PWA 系列（三）——IndexedDB
PWA 系列（三）——IndexedDB IDB 操作的基本步骤是 open 方法打开数据库 ? 然后是创建数据库 store 对象仓库 ? return new Promise((resolve, reject) => { const request = window.indexedDB.open(dbName) // 2️⃣ { let request = db.transaction(storeName, 'readwrite').objectStore(storeName).add(data) // 2️⃣ => { let request = db.transaction(storeName, 'readonly').objectStore(storeName).get(key) // 2️⃣ PWA 系列第三章 IDB 的简要介绍就到这里，这个系列的下篇文章将介绍 Service Worker ?
97020发布于 2019-04-10 - 来自专栏JS菌
PWA系列——Fetch API
PWA系列——Fetch API 今天聊聊 xhr 的替代品 Fetch，在全局作用域中有个 fetch 方法方便使用。 integrity: 包括请求的 subresource integrity 值 （ 例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。 同样的我们在开发 PWA 应用的时候会面临大量用户数据需要存储在客户端的情况。这个时候就需要用到 indexedDB 了，这部分内容较多，一时半会说不完，改天有时间梳理一下。 ?
1.3K20发布于 2019-04-10 - 来自专栏YangAir的IT知识小阁楼
Hexo添加PWA支持
PWA（Progressive Web App）是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。 PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 推荐阅读：https://lavas.baidu.com/pwa/README 可以了解一下什么是PWA 开始操作 注意：你的博客必须全站为HTTPS，这是使用PWA的基础条件 注意：你的博客必须全站为 HTTPS，这是使用PWA的基础条件 注意：你的博客必须全站为HTTPS，这是使用PWA的基础条件 重要的事情说三遍！ 安装PWA插件 执行下面的命令 npm install hexo-pwa --save hexo@4.2.0 目前赞不兼容 hexo-pwa,使用 hexo@4.2.0 版本的用户推荐降级到 hexo@
1.6K10发布于 2020-02-08 - 来自专栏清羽飞扬
Hexo配置SWPP实现PWA
(js|css|woff2|woff|ttf|cur)$/.test(url.pathname)) return 172800000; // 2 days (js|css|woff2|woff|ttf|cur)$/.test(url.pathname)) ? (js|css|woff2|woff|ttf|cur)$/.test(url.pathname)) return 172800000; // 2 days PWA实现 PWA（渐进式 Web 应用，Progressive Web App）是一种让网站拥有接近原生应用体验的技术。 一个PWA网站可以在离线状态下继续运行，这得益于Service Worker技术，它能够缓存关键资源，使网页即使在没有网络的情况下也能正常加载。
74210编辑于 2025-03-29
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号