- 综合排序
- 最热优先
- 最新优先
- 来自专栏P轴
PWA
# 简介 Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ，是提升WebApp的体验的一种新方法，能给用户原生应用的体验。 PWA 本质上是 Web App ，借助一些新技术也具备了Native App的一些特性，兼具 Web App和Native App的优点。 https://web.dev/learn/pwa/ # 效果 edge浏览器打开网站地址栏会多出来一个图标 打开后类似一个APP，表面上看不出来是一个网页 打开速度变快 断网后也可以访问 #
65830编辑于 2022-11-18 - 来自专栏webTower
PWA 入门
PWA 渐进式 web 应用 (Progressive web apps) 简称为 PWA。它可以给用户原生应用的体验。 PWA 不需要用户通过应用商店进行下载，当你访问某个站点时，该站点如果支持 PWA，它会提示你可以将这个站点添加到桌面上。 PWA 还支持离线缓存，当用户没有网络时也能利用缓存展示页面信息。 PWA 是由许多新的技术组合而成的。 这些技术一般包括： manifest 一个 json 配置文件，用于定义 PWA 应用程序清单； service-worker 让 PWA 离线工作，可以说是 PWA 的核心技术； promise 和 安装 PWA 但目前为止，网站可以离线访问了，但是可能还不能安装它。在有 PWA 的网站上，搜索栏的右侧一般有一个 + 图标，提示你可以安装到桌面。 ?
2.3K21发布于 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.6K10发布于 2017-07-19 - 来自专栏前端导学
PWA简介
progressive Web Apps（PWA，渐进式增强 WEB 应用） ? App Shell 模型 App Shell 架构是构建 PWA 应用的一种方式，它通常提供了一个最基本的 Web App 框架，包括应用的头部、底部、菜单栏等结构。 ? 通过 PWA 的缓存机制，我们现在已经有能力让 Skeleton 也出现在 Web App 上取代白屏。通过rel="preload"进行内容预加载 ? Service Worker ? ? ?
81230发布于 2019-05-28 - 来自专栏较真的前端
PWA 入门: 写个非常简单的 PWA 页面
这篇文章里我们来完成一个非常简单的 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 定义应用的名称, 图标等等信息。 更新静态资源 缓存的资源随着版本的更新会过期, 所以会根据缓存的字符串名称(这里变量为 cacheStorageKey, 值用了 "minimal-pwa-1")清除旧缓存, 可以遍历所有的缓存名称逐一判断决决定是否清除
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
53320发布于 2018-07-20 - 来自专栏企鹅号快讯
PWA 那些事儿
中提到了 2017 年前端值得关注的十大事件，其中就提到了 PWA。 大家都知道 Native app 体验确实很好，下载到手机上之后入口也方便。 二、What's PWA? PWA 全称 Progressive Web App，即渐进式 WEB 应用。 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能 解决了哪些问题？ 存在的问题 支持率不高: 现在 ios 手机端不支持 pwa，IE 也暂时不支持 Chrome 在中国桌面版占有率还是不错的，安卓移动端上的占有率却很低 各大厂商还未明确支持 pwa 依赖的 GCM 服务在国内无法使用 微信小程序的竞争 尽管有上述的一些缺点，PWA 技术仍然有很多可以使用的点。
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简介 PWA全称Progressive Web Apps（渐进式网络应用），该项目由谷歌在2015年主导推出，主要的特性是让Web App的体验能更接近原生应用，显著提高应用加载速度，甚至可以在离线状态下运行 ，多种手机/PC浏览器已支持加载PWA网页。
46330编辑于 2022-11-30 - 来自专栏前端开发
PWA介绍及快速上手搭建一个PWA应用
PWA初次体验 前言：本示例不用安装任何东西 部分资源来自网络资源及PWA官网，不要把PWA想象的太复杂，跟着示例走一下，你行的。 PWA介绍 一个新的前端技术，PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。 PWA。 我们 PWA 技术使用的就是它！ PWA示例 准备 我们先创建一个关于 PWA 的项目文件夹， 进入文件夹下我们准备一张 120x120的图片一张，作为我们的应用程序图标。
3.1K130发布于 2018-05-15 - 来自专栏YangAir的IT知识小阁楼
Hexo添加PWA支持
PWA 本身强调渐进式，并不要求一次性达到安全、性能和体验上的所有要求，开发者可以通过 PWA Checklist 查看现有的特征。 推荐阅读：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@ 配置站点配置文件 将下面的配置代码复制到你的站点根目录配置文件_config.yml中 # PWA配置 npm i --save hexo-pwa pwa: manifest: path:
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 文档见官网 我们不用配置就可以跑起来，但是配置里面有些地方需要注意的而且不能乱改，自行看文档。
88320发布于 2018-10-31 - 来自专栏MudOnTire
PWA入门：手把手教你制作一个PWA应用
PWA的出现让大家看到了希望！ 对比原生应用 那PWA和原生应用相比到底有何竞争力呢？ 但是值得注意的是，PWA还是相对比较新的技术，实现规范还有很多调整的空间，部分浏览器对PWA的支持也还不完善，但是PWA是一个趋势，所以现在学习正合适！ 本文将通过一个简单的列子（一个简单的邮编查询app）向大家展示PWA的开发流程，项目参考：Traversy Media - Build a PWA With Vue & Ionic4。 /pwa 插件来给我们的app增加PWA的能力。 安装 @vue/pwa： vue add @vue/pwa 安装完成后项目中增加了 public/manifest.json 和 registerServiceWorker.js两个文件。
6K40发布于 2019-07-02 - 来自专栏JS菌
PWA 系列（三）——IndexedDB
PWA 系列（三）——IndexedDB IDB 操作的基本步骤是 open 方法打开数据库 ? 然后是创建数据库 store 对象仓库 ? PWA 系列第三章 IDB 的简要介绍就到这里，这个系列的下篇文章将介绍 Service Worker ?
97920发布于 2019-04-10 - 来自专栏JS菌
PWA系列——Fetch API
PWA系列——Fetch API 今天聊聊 xhr 的替代品 Fetch，在全局作用域中有个 fetch 方法方便使用。 同样的我们在开发 PWA 应用的时候会面临大量用户数据需要存储在客户端的情况。这个时候就需要用到 indexedDB 了，这部分内容较多，一时半会说不完，改天有时间梳理一下。 ?
1.3K20发布于 2019-04-10 - 来自专栏前端之心
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 - 来自专栏清羽飞扬
Hexo配置SWPP实现PWA
PWA实现 PWA（渐进式 Web 应用，Progressive Web App）是一种让网站拥有接近原生应用体验的技术。 PWA还可以通过优化缓存和请求管理，让页面加载更快，减少流量消耗，提高交互流畅度。 在功能扩展方面，PWA还能支持推送通知，允许网站主动向用户发送消息，增强互动性。 你的站点已经通过SWPP实现了缓存优化和更细粒度的控制，这正是PWA的重要组成部分。如果进一步配置 manifest.json，即可实现PWA。 头部信息 这里我们以Hexo-theme-butterfly为示例，btf中很好的集成了PWA，首先，修改主题配置文件的PWA部分配置： # PWA # 查看 https://github.com/JLHwung favicon_32_32: /config/img/pwa/favicon-32x32.png favicon_16_16: /config/img/pwa/favicon-16x16.png
76210编辑于 2025-03-29 - 来自专栏路过君BLOG from CSDN
使用vue-pwa-asset-generator生成VUE PWA资源文件
github 可用这个工具方便生成vue pwa所需的全套资源文件 安装 npm -g install vue-pwa-asset-generator 注：安装可能会失败如下 npm ERR! path C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-pwa-asset-generator\node_modules\sharp
48230编辑于 2022-04-26 - 来自专栏IMWeb前端团队
PWA之离线缓存（一）
本文作者：IMWeb json 原文出处：IMWeb社区 未经同意，禁止转载 PWA是什么 PWA全称是Progressive Web Apps， 是一种渐进式增强 WEB 应用。 PWA特性: 渐进增强 ： 能够让每一位用户使用，无论用户使用什么浏览器，因为它是始终以渐进增强为原则 可安装 ： 可以像原生APP在主屏幕上留有图标。 PWA是应用一系列技术组成的集合, 其核心技术包括 App Manifest、Service Worker、Web Push等等。 demo <html> <head> <title>pwa test</title> </head> <body> hello world;
2.4K21发布于 2019-12-03 - 来自专栏JS菌
PWA 系列（一）——Cache API
PWA 系列（一）——Cache API PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。 PWA 主要用到了浏览器储存技术、Service Workers 技术、App Shell、Web Push API、以及一系列其他基础技术。 本系列文章将逐一介绍所使用到的这些技术 ☀️ 在 PWA 应用中，Cache 缓存 API 是关键技术之一，主要作用就是缓存相应和请求。 Cache API 的主要操作基本是这样，下篇文章将继续介绍 PWA 的系列技术——Fetch 参考： https://developer.mozilla.org/zh-CN/docs/Web/API/
1.1K40发布于 2019-04-10 - 来自专栏网络日志
PWA 实践应用（Google Workbox）
桌面端 PWA 应用： 移动端添加到桌面： 1 什么是 PWA PWA（Progressive Web App - 渐进式网页应用）是一种理念，由 Google Chrome 在 2015 年提出。 PWA 它不是特指某一项技术，而是应用多项技术来改善用户体验的 Web App，其核心技术包括 Web App Manifest、Service Worker、Web Push 等，用户体验才是 PWA 2.3 饿了么 访问地址：https://h5.ele.me/msite/#pwa=true PWA：自研 - PWA 在饿了么的实践经验 支持添加到桌面，manifest。 2.4 Instagram 左边原生应用，右边 PWA 访问地址：https://www.instagram.com/ PWA：使用 Google Workbox 支持添加到桌面，manifest。 可以参考在线图书《PWA 应用实战》。
2.4K10编辑于 2024-07-09
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号