- 综合排序
- 最热优先
- 最新优先
- 来自专栏零域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主要由3项技术构成： 缓存机制是依赖 Cache API 实现的 依赖 HTML5 fetch API 发起网络请求 依赖 Promise 实现异步 service worker 因此，在设计技术架构的时候，需要考虑到2种方式的优缺点。 除了配置serviceWorker.js之外，我们还需要配置manifest.json文件。 这是体验设计上需要注意的地方，我们应该认识到并不是每个用户都是技术出身，都对PWA的概念了解得很清楚。因而，用户体验设计需要为用户提供指导，以便他们可以了解什么是PWA（或者离线模式）。
1.2K20发布于 2020-04-10 - 来自专栏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 - 来自专栏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 - 来自专栏webTower
PWA 入门
PWA 还支持离线缓存，当用户没有网络时也能利用缓存展示页面信息。 PWA 是由许多新的技术组合而成的。 这些技术一般包括： manifest 一个 json 配置文件，用于定义 PWA 应用程序清单； service-worker 让 PWA 离线工作，可以说是 PWA 的核心技术； promise 和 fetch 用于异步编程和网络请求； notification 用于消息通知，可以像原生 APP 在手机提示栏进行消息推送； Cache Storage 提供缓存； 这些全部都是 HTML5 的 API 这些技术里，service-worker 是核心，但也是最复杂的一个 API，下面就一一介绍一下这些 API。 event.waitUntil(self.clients.claim()); }); 操作缓存 HTML5 提供了 caches API，它用来配合 service worker 处理缓存。
2.3K21发布于 2020-05-13 - 来自专栏让技术飞起来
PWA应用的核心技术有哪些
在国内由于小程序的风生水起，PWA 应用在国内的状况一直都不是很好，PWA 和小程序有很多的相似性，但是 PWA 是由谷歌发起的技术，小程序是微信发起的技术，所以小程序在国内得到了大力的扶持，很快就在国内技术界开花结果 这里想讨论下在去创建自己的第一个 PWA 应用前，什么是 PWA 应用，有哪些核心的技术？ 图片PWA 的技术核心PWA 的技术核心可以分为四个部分：桌面图标 Web App Manifest ：将网站添加到桌面，让 PWA 应用的访问使用更类似 native 的体验。 ", "display": "standalone", "background_color": "#fff", "theme_color": "#3f51b5" }然后需要给浏览器传递关于图标的信息 当然相信经过持续的技术发展，还会有更多的技术创新生长在 PWA、小程序之上，我们的开发及用户的使用还会得到持续的改进。PWA 和小程序都是推动现代应用开发模式发展的重要里程碑，推动了移动应用的创新。
93630编辑于 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 成功 }) Notify.request() // 请求推送权限 .then(permission=>{ // 用户同意 Notify.show('villianhr','Hello Pwa 根据自己生成进行替换 SW.subscribe('/subscription','BPLISiRYgXzzLY_-mKahMBdYPeRZU-8bFVzgJMcDuthMxD08v0cEfc9krx6pG5VGOC31oX_QEuOSgU5CYJqpzf0
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 的安装和离线等功能。 完整代码访问GitHub地址： https://github.com/minimal-xyz/minimal-pwa 准备工作 建议安装 http-server 和 ngrok 以便调试和查看。 准备一个 HTML 文件, 以及相应的 CSS 等: 添加 manifest.json 文件 为了让 PWA 应用被添加到主屏幕, 使用 manifest.json 定义应用的名称, 图标等等信息。
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。 这样一个简单的 PWA 程序就完成了。 Github一键传送：https://github.com/kymjs/PWAblog
52720发布于 2018-07-20 - 来自专栏企鹅号快讯
PWA 那些事儿
二、What's PWA? PWA 全称 Progressive Web App，即渐进式 WEB 应用。 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. ，同样也能够拦截 https://googlechrome.github.i.../.html 下的请求 调试面板具体代表的什么参看 https://x5.tencent.com/tbs/guide/serviceworker.html 服务在国内无法使用 微信小程序的竞争 尽管有上述的一些缺点，PWA 技术仍然有很多可以使用的点。 service worker 技术实现离线缓存，可以将一些不经常更改的静态文件放到缓存中，提升用户体验。 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 技术使用的就是它！ Chrome 浏览器的 DevTools 中查看 一个很不错的全面介绍sw的教程：https://www.villainhr.com/page/2017/01/08/Service%20Worker%20%E5%
3.1K130发布于 2018-05-15 - 来自专栏JS菌
PWA 系列（三）——IndexedDB
PWA 系列（三）——IndexedDB IDB 操作的基本步骤是 open 方法打开数据库 ? 然后是创建数据库 store 对象仓库 ? developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB#%E4%BD%BF%E7%94%A8%E7%B4%A2%E5% PWA 系列第三章 IDB 的简要介绍就到这里，这个系列的下篇文章将介绍 Service Worker ?
97020发布于 2019-04-10 - 来自专栏JS菌
PWA系列——Fetch API
PWA系列——Fetch API 今天聊聊 xhr 的替代品 Fetch，在全局作用域中有个 fetch 方法方便使用。 同样的我们在开发 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的基础条件 注意：你的博客必须全站为 ": "过客~励む", "short_name": "过客~励む", "theme_color": "#fff", "background_color": "#49b1f5" js/regexp /\// strategy: networkFirst priority: 5 准备Logo图片素材 为了确保你的 PWA 图标支持所有设备，请务必使用 48x48
1.6K10发布于 2020-02-08 - 来自专栏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 - 来自专栏清羽飞扬
Hexo配置SWPP实现PWA
然而，每次修改后，都需要手动按 Ctrl+F5 强制刷新缓存，虽然操作不复杂，但有些朋友可能并不知道 Ctrl+F5 可以强制刷新，导致页面样式异常。 PWA实现 PWA（渐进式 Web 应用，Progressive Web App）是一种让网站拥有接近原生应用体验的技术。 一个PWA网站可以在离线状态下继续运行，这得益于Service Worker技术，它能够缓存关键资源，使网页即使在没有网络的情况下也能正常加载。 你的站点已经通过SWPP实现了缓存优化和更细粒度的控制，这正是PWA的重要组成部分。如果进一步配置 manifest.json，即可实现PWA。 头部信息 这里我们以Hexo-theme-butterfly为示例，btf中很好的集成了PWA，首先，修改主题配置文件的PWA部分配置： # PWA # 查看 https://github.com/JLHwung
74210编辑于 2025-03-29 - 来自专栏前端之心
PWA 的探索与应用
，依然可以使用一些离线功能 消息推送 PWA技术点 Web App Manifest Web App Manifest 技术实现了将PWA网页应用 添加至桌面的功能，但该项技术目前仍处于实验性阶段，各浏览器支持度不高 - 同一浏览器中站点至少被访问两次，间隔至少为 5 分钟。 Service Worker PWA应用的离线体验、定期的后台同步以及推送通知等功能的实现依赖于Service Worker技术，下图为目前SW技术的支持度。 推送消息的能力 快速响应用户指令 缺点 支持率不高 Chrome在安卓移动端上的占有率很低 依赖的GCM服务在国内无法使用 微信小程序的竞争 PWA应用 Lavas 是一套基于 Vue 的 PWA 解决方案 https://x5.tencent.com/tbs/guide/serviceworker.html https://segmentfault.com/a/1190000012353473#articleHeader0
3.7K90发布于 2019-01-09
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号