【干货】什么是PWA?_pwa是什么缩写
myzbx 2025-10-19 10:04 6 浏览
什么是PWA
渐进式 Web 应用（Progressive Web App，PWA）是一个使用 web 平台技术构建的应用程序，但它提供的用户体验就像一个特定平台的应用程序。
和传统相比较，PWA 可安装、可链接访问、用户体验好、用户粘性强。
PWA 核心概念
Web App Maifest
PWA清单， 用于定义应用名称、图表、启动方式、背景颜色、主题颜色等等， 添加到桌面后， 能够在系统中作为一个独立的APP存在，且有启动画面、沉浸式浏览体验。
mainfest详解
short_name: 应用展示的名称(桌面上显示的名称)
icons: 定义不同尺寸的应用图标
start_url: 定义桌面启动的 URL
description: 应用描述，可以参考 meta 中的 description
display: 定义应用的显示方式，有 4 种显示方式，分别为：
fullscreen: 全屏
standalone: 应用
minimal-ui: 类似于应用模式，但比应用模式多一些系统导航控制元素，但又不同于浏览器模式
browser: 浏览器模式，默认值
name: 应用名称（浏览器提示用户添加和Android启动屏显示的名称）
orientation: 定义默认应用显示方向，竖屏、横屏
background_color: 应用加载之前的背景色，用于应用启动时的过渡
theme_color: 定义应用默认的主题色
dir: 文字方向，3 个值可选 ltr(left-to-right), rtl(right-to-left) 和 auto(浏览器判断)，默认为 auto
scope: 定义应用模式下的路径范围，超出范围会已浏览器方式显示
生成地址：
https://app-manifest.firebaseapp.com/
注：IOS上icon配置失效问题
<link rel="apple-touch-icon" href="/img/mobile-homescrenn-192x192.png">Service Worker
特点
- 一个特殊的Worker线程，独立于当前网页线程。
- 不能直接操作Dom元素
- 一旦被安装就永远存在，除非主动注销
- 可操作本地缓存，如果CacheStorage、IndexedDB等
- 离线内容开发者可控
- 必须在HTTPS环境下工作
- 能接受服务器推送的离线消息
作用域
scope和文件所在路径控制最大作用域范围
尽量避免作用域污染
声明周期
离线通知
使用WebPush 和 Notification API
其他内容
ServiceWorker 参考
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
ServiceWorker的过程：
ServiceWorker的兼容性
截止2023/11 ，ServiceWorker的兼容度已经达到96.1%
调试以及查看ServiceWorker
可以开启console进行查看（可查看到当前的serviceWorker状态）
之后来整理下angular中pwa的实现过程。
相关推荐
- 别再问Cookie了，再问就崩溃了!_别问 再问
-
作者：懿来自：Java极客技术说实话，之前面试都是直接去背诵的面试题，关于Cookie的一些内容，比如说，记录浏览器端的数据信息啦，Cookie的生命周期啦，这些内容，也从来没有研究过C...
- 5分钟学会物流轨迹地图API嵌入到页面中，实现物流轨迹可视化
-
前言在电子商务和在线购物日益普及的今天，为用户提供实时的物流信息已成为提升客户满意度的关键。本文将指导您如何在网页中嵌入物流轨迹地图API，以便用户能够直观地跟踪他们的包裹。1.申请接口、获取API密...
- Springboot项目中几种跨域的解决方法
-
环境：springboot2.3.9.RELEASE什么是跨源资源共享跨源资源共享(CORS)（或通俗地译为跨域资源共享）是一种基于HTTP头的机制，该机制通过允许服务器标示除了它自己以外的其它...
- 基于Java实现，支持在线发布API接口读取数据库，有哪些工具?
-
基于java实现，不需要编辑就能发布api接口的，有哪些工具、平台？还能一键发布、快速授权和开放提供给第三方请求调用接口的解决方案。架构方案设计：以下是一些基于Java实现的无需编辑或只需少量编辑...
- Axios VS Fetch, 用哪个更好?详细对比附案例
-
在JavaScript中进行HTTP请求时，最常用的两个工具是：原生fetchAPI流行的第三方库Axios我都在生产环境中使用过这两个工具。虽然两者都表现良好，但有时我会后悔选择了其中一个而非另一...
- Ollama:Web搜索API和MCP_oalib search
-
如果您曾经尝试过LLM，您就会明白其中的痛点：模型在模式匹配方面非常出色，但往往会虚构一些东西。如果你问起上周发生的事情，突然间，您得到的只是来自2022年的鬼故事。这次更新改变了这一切。基本上...
- 基于浏览器扩展 API Mock 工具开发探索|得物技术
-
一、前言在日常开发过程中，偶尔会遇到后端接口未完成或者某个环境出现问题需要根据接口返回来复现等等场景。刚好最近在学习浏览器插件的相关知识，并在此背景下开发了一款基于浏览器插件的Mock工具。该工...
- JavaScript动态注入的几种方法_js动态引入js
-
在现代的Web开发中，JavaScript动态注入是一个强大的技术，它允许开发者在网页运行时动态地修改网页内容和行为，方便进行调试和维护。动态注入通常涉及以下几个关键概念：DOM（文档对象模型）、和...
- 面试官:如何通过 MyBatis 查询千万数据并保证内存不溢出?
-
推荐学习真香警告！Alibaba珍藏版mybatis手写文档，刷起来牛掰！“基础-中级-高级”Java程序员面试集结，看完献出我的膝盖闭关28天，奉上[Java一线大厂高岗面试题解析合集]，备战金九银...
- nextjs教程三:获取数据_nextcloud数据迁移
-
数据的获取数据获取是任何应用程序中最重要的部分，本文将介绍，如何在react，nextjs中获取数据主要有种方法可以获取数据在服务端，用fetch获取数据在客户端，通过路由处理器获取数据下面分别...
- Fetch API 教程_fetch_all
-
JavaScript初学者学完语法，进入实际的网页编程，一定有人告诉你，要掌握一个叫做XMLHttpRequest的东西。脚本都靠它发出HTTP请求，跟服务器通信。所谓的AJAX操作就是...
- Mozilla火狐39.0正式版增加Emoji支持
-
2015-07-0310:41:43作者：李熙Mozilla旗下浏览器火狐(Firefox)39.0正式版在今日发布，新版在性能上改进不大，着重于浏览器的功能和细节改进：新版提升了Firefox...
- 如何设计前端监控sdk，实现前端项目全链路监控
-
一、埋点系统设计与实现（文章最后有如何回答）1.埋点分类1.1手动埋点（代码埋点）//业务代码中主动调用tracker.track('button_click',{&nbs...
- 如何快速实现一套流程编排系统，前端开发组件都有哪些，一篇搞懂
-
早上9点，AI产品经理紧急拉会：“我们的客户明天要看到AI审批流程原型，传统开发至少要一周，有什么办法今天就能上线？”这时，你打开流程编排画布，拖拽几个节点，连接大模型API和服务，1小时后客户竖起...
- 2023金九银十必看前端面试题!2w字精品!
-
导文2023金九银十必看前端面试题！金九银十黄金期来了想要跳槽的小伙伴快来看啊CSS1.请解释CSS的盒模型是什么，并描述其组成部分。答案：CSS的盒模型是用于布局和定位元素的概念。它由内容区域...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)