- 综合排序
- 最热优先
- 最新优先
- 来自专栏零域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技术及其用户体验设计
技术上主要涉及安卓的MediaProjection API、配合websocket来实现。 MediaProjection 提供了录屏功能；websocket主要是传输方便，可以做到实时。 ? 今天主要介绍下web前端客户端的实现，主要使用了PWA技术。 - 什么是PWA？ ? 就是mixlab那个logo PWA是一系列技术的集合，里面最核心的是一个叫“app shell”的概念。 - 什么是App shell？ 因此，在设计技术架构的时候，需要考虑到2种方式的优缺点。 除了配置serviceWorker.js之外，我们还需要配置manifest.json文件。 这是体验设计上需要注意的地方，我们应该认识到并不是每个用户都是技术出身，都对PWA的概念了解得很清楚。因而，用户体验设计需要为用户提供指导，以便他们可以了解什么是PWA（或者离线模式）。
1.2K20发布于 2020-04-10 - 来自专栏P轴
PWA
# 简介 Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ，是提升WebApp的体验的一种新方法，能给用户原生应用的体验。 PWA 本质上是 Web App ，借助一些新技术也具备了Native App的一些特性，兼具 Web App和Native App的优点。 https://web.dev/learn/pwa/ # 效果 edge浏览器打开网站地址栏会多出来一个图标 打开后类似一个APP，表面上看不出来是一个网页 打开速度变快 断网后也可以访问 #
64530编辑于 2022-11-18 - 来自专栏webTower
PWA 入门
PWA 渐进式 web 应用 (Progressive web apps) 简称为 PWA。它可以给用户原生应用的体验。 PWA 不需要用户通过应用商店进行下载，当你访问某个站点时，该站点如果支持 PWA，它会提示你可以将这个站点添加到桌面上。 PWA 还支持离线缓存，当用户没有网络时也能利用缓存展示页面信息。 PWA 是由许多新的技术组合而成的。 这些技术一般包括： manifest 一个 json 配置文件，用于定义 PWA 应用程序清单； service-worker 让 PWA 离线工作，可以说是 PWA 的核心技术； promise 和 这些技术里，service-worker 是核心，但也是最复杂的一个 API，下面就一一介绍一下这些 API。
2.2K21发布于 2020-05-13 - 来自专栏腾讯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 * Notify: 根据 `new Notification() `来完成主线程 JS 的消息推送 ` import SW,{WebCaches,Notify} from 'web-pwa';`
2.5K10发布于 2017-07-19 - 来自专栏让技术飞起来
PWA应用的核心技术有哪些
在国内由于小程序的风生水起，PWA 应用在国内的状况一直都不是很好，PWA 和小程序有很多的相似性，但是 PWA 是由谷歌发起的技术，小程序是微信发起的技术，所以小程序在国内得到了大力的扶持，很快就在国内技术界开花结果 这里想讨论下在去创建自己的第一个 PWA 应用前，什么是 PWA 应用，有哪些核心的技术？ 如果想要更为直接的体验，可以直接访问下谷歌官方上线的 PWA 体验 demo：squoosh.app ，算是 PWA 技术实际应用的典范，整个页面的大小都只有41K。 图片PWA 的技术核心PWA 的技术核心可以分为四个部分：桌面图标 Web App Manifest ：将网站添加到桌面，让 PWA 应用的访问使用更类似 native 的体验。 当然相信经过持续的技术发展，还会有更多的技术创新生长在 PWA、小程序之上，我们的开发及用户的使用还会得到持续的改进。PWA 和小程序都是推动现代应用开发模式发展的重要里程碑，推动了移动应用的创新。
90230编辑于 2023-10-25 - 来自专栏网络安全技术点滴分享
突破矩形边界：探索PWA窗口控件叠加技术
我想讨论一个与上述类似的新功能：渐进式Web应用（PWA）的窗口控件叠加（Window Controls Overlay）。关于标题栏和窗口控件让我们先解释一下标题栏和窗口控件是什么。 让我们使用我们已经掌握的标准技术，并尝试新的想法，为所有设备提供量身定制的体验，所有这些都来自单一的代码库！
20010编辑于 2025-09-01 - 来自专栏前端导学
PWA简介
progressive Web Apps（PWA，渐进式增强 WEB 应用） ? App Shell 模型 App Shell 架构是构建 PWA 应用的一种方式，它通常提供了一个最基本的 Web App 框架，包括应用的头部、底部、菜单栏等结构。 ? 通过 PWA 的缓存机制，我们现在已经有能力让 Skeleton 也出现在 Web App 上取代白屏。通过rel="preload"进行内容预加载 ? Service Worker ? ? ?
80930发布于 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
52520发布于 2018-07-20 - 来自专栏企鹅号快讯
PWA 那些事儿
二、What's PWA? PWA 全称 Progressive Web App，即渐进式 WEB 应用。 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 存在的问题 支持率不高: 现在 ios 手机端不支持 pwa，IE 也暂时不支持 Chrome 在中国桌面版占有率还是不错的，安卓移动端上的占有率却很低 各大厂商还未明确支持 pwa 依赖的 GCM 服务在国内无法使用 微信小程序的竞争 尽管有上述的一些缺点，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。”。
45630编辑于 2022-11-30 - 来自专栏前端开发
PWA介绍及快速上手搭建一个PWA应用
PWA初次体验 前言：本示例不用安装任何东西 部分资源来自网络资源及PWA官网，不要把PWA想象的太复杂，跟着示例走一下，你行的。 PWA介绍 一个新的前端技术，PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。 是结合了一系列现代Web技术的组合，在网页应用中实现和原生应用相近的用户体验。 PWA关键技术 Service Worker （可以理解为服务工厂） Manifest （应用清单） Push Notification（推送通知） Service Worker 以下用SW来表示 SW 我们 PWA 技术使用的就是它！
3K130发布于 2018-05-15 - 来自专栏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 文档见官网 我们不用配置就可以跑起来，但是配置里面有些地方需要注意的而且不能乱改，自行看文档。
87320发布于 2018-10-31 - 来自专栏MudOnTire
PWA入门：手把手教你制作一个PWA应用
得益于前端技术的飞速发展、浏览器性能的不断提高，使用网页技术开发出接近原生体验的应用得以变为现实，PWA就在这样的背景下应运而生。 PWA的出现让大家看到了希望！ 对比原生应用 那PWA和原生应用相比到底有何竞争力呢？ 但是值得注意的是，PWA还是相对比较新的技术，实现规范还有很多调整的空间，部分浏览器对PWA的支持也还不完善，但是PWA是一个趋势，所以现在学习正合适！ 本文主要关注PWA的搭建，因此vue、ionic等技术不做过多描述。使用VSCode的同学，建议安装Vetur插件增加开发效率。 1. /pwa 插件来给我们的app增加PWA的能力。
5.8K40发布于 2019-07-02 - 来自专栏JS菌
PWA系列——Fetch API
PWA系列——Fetch API 今天聊聊 xhr 的替代品 Fetch，在全局作用域中有个 fetch 方法方便使用。 同样的我们在开发 PWA 应用的时候会面临大量用户数据需要存储在客户端的情况。这个时候就需要用到 indexedDB 了，这部分内容较多，一时半会说不完，改天有时间梳理一下。 ?
1.3K20发布于 2019-04-10 - 来自专栏JS菌
PWA 系列（三）——IndexedDB
PWA 系列（三）——IndexedDB IDB 操作的基本步骤是 open 方法打开数据库 ? 然后是创建数据库 store 对象仓库 ? PWA 系列第三章 IDB 的简要介绍就到这里，这个系列的下篇文章将介绍 Service Worker ?
96620发布于 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
PWA实现 PWA（渐进式 Web 应用，Progressive Web App）是一种让网站拥有接近原生应用体验的技术。 一个PWA网站可以在离线状态下继续运行，这得益于Service Worker技术，它能够缓存关键资源，使网页即使在没有网络的情况下也能正常加载。 PWA还可以通过优化缓存和请求管理，让页面加载更快，减少流量消耗，提高交互流畅度。 在功能扩展方面，PWA还能支持推送通知，允许网站主动向用户发送消息，增强互动性。 你的站点已经通过SWPP实现了缓存优化和更细粒度的控制，这正是PWA的重要组成部分。如果进一步配置 manifest.json，即可实现PWA。 头部信息 这里我们以Hexo-theme-butterfly为示例，btf中很好的集成了PWA，首先，修改主题配置文件的PWA部分配置： # PWA # 查看 https://github.com/JLHwung
71310编辑于 2025-03-29 - 来自专栏前端之心
PWA 的探索与应用
PWA（Progressive Web App）起源背景 传统的Web网页存在以下几个问题： 进入一个页面必须要记住它的url或者加入书签，入口不便捷； 没网络就没响应，不具备离线能力； 不像APP一样能进行消息推送 ，依然可以使用一些离线功能 消息推送 PWA技术点 Web App Manifest Web App Manifest 技术实现了将PWA网页应用 添加至桌面的功能，但该项技术目前仍处于实验性阶段，各浏览器支持度不高 Service Worker PWA应用的离线体验、定期的后台同步以及推送通知等功能的实现依赖于Service Worker技术，下图为目前SW技术的支持度。 推送消息的能力 快速响应用户指令 缺点 支持率不高 Chrome在安卓移动端上的占有率很低 依赖的GCM服务在国内无法使用 微信小程序的竞争 PWA应用 Lavas 是一套基于 Vue 的 PWA 解决方案 ，能够帮助开发者快速搭建 PWA 应用 新浪微博 饿了么 Instagram Twitter Offline Wikipedia Spotlight ...
3.7K90发布于 2019-01-09
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号