当前位置： 首页 > news >正文

PWA桌面应用开发

news 来源：原创 2024/5/7 4:53:03

什么是PWA

PWA(Progressive Web App), 渐进式web应用程序，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。

PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。

PWA 的主要特点包括下面三点：

  1. 可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现
  2. 体验 - 快速响应，并且有平滑的动画响应用户的操作
  3. 粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面

PWA 的主要特征：

  1. 渐进式：适用于所有浏览器，因为它是以渐进式增强作为核心宗旨来开发的
  2. 自适应：适用于任何机型，桌面设备、移动设备、平板电脑或任何未来设备
  3. 连接无关性：能够借助 Service Worker 在离线或者网络较差的情况下正常访问
  4. 类原生应用：由于是在 App Shell 模型基础上开发，因此应具有 Native App 的交互，给用户 Native App 的体验
  5. 持续更新：始终是最新的，无版本和更新问题
  6. 安全：通过 HTTPS 协议提供服务，防止窥探，确保内容不被篡改
  7. 可索引：manifest 文件和 Service Worker 可以让搜索引擎索引到，从而将其识别为『应用』
  8. 黏性：通过推送离线通知等，可以让用户回流
  9. 可安装：用户可以添加常用的 Web App 到桌面，免去到应用商店下载的麻烦
  10. 可链接：通过链接即可分享内容，无需下载安装

简单的说，其实pwa就是可以做成类似于app的小应用，可以自己设置名字和图标，只要在浏览器的地址栏后面点击安装就可以安装到桌面（轻量，或许有几百kb的缓存数据），即开即用，省去了去软件商店安装的过程，还不用上架软件商店就可以有原生app的体验。

PWA核心技术

1、Web App Manifest：

(1)开发者可以定义用户添加到主屏的图标、应用名称等

(2)允许开发者配置隐藏浏览器多余的 UI（地址栏，导航栏等），让 PWA 具有和 Native App 一样的沉浸式体验

(3)体现在代码上主要是一个 JSON 文件：manifest.json，开发者可以在这个 JSON 文件中配置 PWA 的相关信息

2、Service Worker：在 PWA 中最重要的功能就是离线与缓存，可访问浏览相关

(1)一个特殊的 worker 线程，独立于当前网页主线程，有自己的执行上下文

(2)一旦被安装，就永远存在，除非显示取消注册

(3)使用到的时候浏览器会自动唤醒，不用的时候自动休眠

(4)可拦截并代理请求和处理返回，可以操作本地缓存，如 CacheStorage，IndexedDB 等

(5)离线内容开发者可控

(6)能接受服务器推送的离线消息

(7)异步实现，内部接口异步化基本是通过 Promise 实现

(8)不能直接操作 DOM

(9)必须在 HTTPS 环境下才能工作

3、离线通知：

(1)离线通知是指在用户没有打开 PWA 站点的情况下，也能接受到服务器推送过来的通知并展现给用户

(2)包括了两部分，离线推送和展现通知，分别是 Web Push 和 Notification API

(3)浏览器在接受到对应的消息服务中心推送过来的离线消息时，会唤醒对应站点注册的 Service Worker，

   开发者可以在 Service Worker 文件中处理接受到的请求，显示通知

4、App Shell 和骨架屏：

(1)App Shell 是 PWA 强调的一个非常重要的设计理念，它能够缩短用户进入页面时的白屏时间，

   让用户一进入 PWA 就能快速看到 PWA 的整体框架

(2)骨架屏（App Skeleton），也是提升首屏体验的有效方式。原理是在真实内容渲染完成前，使用一些能够快速渲染的

   静态图片/样式/色块/部分真实内容进行占位，让用户对真实内容区域有心理预期

(3)App Shell 和骨架屏相辅相成，App Shell 显示页面的外框部分，初始内容由骨架屏来填充，保证主体内容区域不留白

(4)特点：

  ·在页面加载初期预先渲染内容，提升感官上的体验

  ·一般情况骨架屏和实际内容的结构是类似的，因此之后的切换不会过于突兀

  ·只需要简单的 CSS 支持 (涉及图片懒加载可能还需要 JS )，不要求 HTTPS 协议，没有额外的学习和维护成本

  ·若页面采用组件化开发，每个组件可根据自身状态定义自身的骨架屏及其切换时机，同时维持了组件之间的独立性

如何使用PWA进行开发

此处我们将在Vue项目上实践开发PWA应用

  1. 刚开始我们肯定要安装pwa插件，在命令行中输入 vue add @vue/pwa 命令,就可以安装pwa插件以及相关依赖包和文件。
    在pwa插件安装成功后生成的文件包括：一些vue的logo图片、manifest.json、registerServiceWorker.js。

  2. vue.config.js 文件中配置pwa，详情查看

pwa: {
		name: "Trist-PWA", // app名称
		// window 8 磁贴颜色
		msTileColor: "",
		//手机最上方显示运营商及电量、时间等这一栏的颜色，主题颜色，应用程序的默认主题颜色
		themeColor: "#2c2b38",
		appleMobileWebAppStatusBarStyle: 'black',
		appleMobileWebAppCapable: 'yes',
		// manifest.json配置（仅针对安卓有效）
		manifestOptions: {
			"name": "Trist-PWA", // app完整名称
			"short_name": "Trist", // app短名称
			"description": "Trist的PWA",	// app描述
			"start_url": ".", // 启动网址
			//定义浏览器的显示模式，取值为 standalone:隐藏浏览器UI，fullscreen:全屏模式，browser:浏览器模式，minimal-ui: ios中在网页加载时隐藏顶部的地址栏和底部的导航栏
			"display": "standalone",
			// 主题颜色，用于控制浏览器地址栏着色
			"theme_color": "#2c2b38",
			//  应用加载之前的背景色，用于应用启动时的过渡
			"background_color": "#f4f4f4",
			// 桌面图标（安卓）
			"icons": [{
				"src": `./logo-36.png`,
				"sizes": "36x36",
				"type": "image/png",
			},{
				"src": `./logo-72.png`,
				"sizes": "72x72",
				"type": "image/png",
			},
			{
				"src": `./logo-144.png`,
				"sizes": "144x144",
				"type": "image/png",
			},
			{
				"src": `./logo-192.png`,
				"sizes": "192x192",
				"type": "image/png"
			},
			],
		},
		iconPaths: {
			faviconSVG: null,
			// ico
			favicon32: null,
			favicon16: null,
			// 桌面应用图标（ios）
			appleTouchIcon: `./logo-144.png`,
			maskIcon: null,
			// window 8 磁贴图标
			msTileImage: null
		},

		workboxPluginMode: 'GenerateSW', // 有‘GenerateSW’模式，也可以定义为‘InjectManifest’模式。但是需自己写SW.js文件进行配置
		workboxOptions: {
			importWorkboxFrom: 'cdn', //从''cdn"导入workbox,也可以‘local’
			skipWaiting: true, // 安装完SW不等待直接接管网站
			clientsClaim: true,
			// navigateFallback: '/index.html',
			exclude: [/\.(?:png|jpg|jpeg|svg|html|js)$/], //在预缓存中排除图片
			// 定义运行时缓存
			runtimeCaching: [{
					urlPattern: new RegExp('^https://cdn'),
					handler: 'NetworkFirst',
					options: {
						networkTimeoutSeconds: 20,
						cacheName: 'cdn-cache',
						cacheableResponse: {
							statuses: [200]
						}
					}
				},
				// 如果你需要从网络中完成特定请求，则只使用网络策略
				{
					urlPattern: new RegExp(/.*\.html/),
					handler: 'networkOnly'
				}
			]
		}
	}
  1. 注册service worker。
    安装pwa插件时会生成一个registerServiceWorker.js（src文件下）文件并在main.js中添加导入，这个文件中自动生成了注册service worker的代码。其中默认生成的service worker名称为service-worker.js，可以修改为自定义的service worker，如sw.js。

PWA的支持

浏览器对技术支持还不够全面， 不是每一款游览器都能100%的支持所有PWA，国内一些手机厂商对PWA的技术支持也不一。

在IOS中：

  • 无法后台同步
  • 不支持 fullscreen（全屏显示）和 minimal-ui
  • 无法锁定 PWA 应用的方向，竖屏还是横屏
  • 无法改变状态栏的颜色
  • 如果 PWA 应用没有后退的手势，将无法切换页面
  • 没有启动动画
  • 不支持透明图标
  • …

由于只依赖 Safari 运行的做法绕过了苹果对软件的审核机制， PWA 应用和原生应用在使用的体验上会存在差异。比如，iOS 上最新的人脸识别的 API 在 PWA 应用上就无法得到支持。所以，现阶段，PWA 应用在 iOS 11.3 上还只能调用有限的 API，比如：

地理信息定位
传感器（陀螺仪，加速度计，磁力仪）
相机
音频输出
语音合成（仅连接耳机）
Apple Pay

由此可见，iOS 11.3 所支持的 PWA 应用和 Android 所支持的是有许多的区别的。

和 Android 支持的 PWA 应用的区别
从发展程度来看，Android 上的 PWA 应用由于 Chrome 而支持得早，所以 Android 上的 PWA 应用不光权限更大而且更加符合 PWA 规范。通过 iOS 和 Android 两个平台的简单对比，我们可以知道 iOS 支持的 PWA 应用在这些方面是不足的：

在 Android 上能够储存超过 50 MB 的数据和文件；iOS 上几周不使用 PWA 应用后缓存的文件将被释放
在 Android 上有后台同步和离线消息推送功能；iOS 无法保留后台，更无法获得消息推送
在 Android 上有邀请用户安装 PWA 应用的提示；iOS 只会引导用户从 App Store 下载
在 Android 上的设置里有 PWA 应用的数据使用量；iOS 都在包含在 Safari 里
在 Android 上能够以独立模式打开 PWA 而不是浏览器；iOS 不会识别你的 URL 是不是 PWA
在 Android 上一个 PWA 只能安装一次；iOS 可以多次安装
在 Android 上能够有蓝牙访问、语音识别等功能；iOS 没有蓝牙、Touch ID、Face ID、ARKit、电池信息

相关链接

  1. PWA 渐进式网络应用
  2. 使用 workbox 协助构建 PWA 应用

相关文章：

  • php面试题 汇集2
  • 从底层了解Vue3
  • 六大设计原则(读书笔记)
  • BZOJ1588 营业额统计 （Splay）
  • 小团队的PM和开发方法
  • 第二个商业设想
  • 如何让.net 2003中的Panel正常实现Dock
  • innodb引擎redo文件维护
  • 清理
  • Xcode8.2 继续使用插件
  • Native C++死了吗？
  • SIP协议的常见命令
  • Spring的注解@Repository@Service@Controller和@Component
  • NHiberate的set
  • c#启动windows服务问题总结
  • es6(二)：字符串的扩展
  • JS数组方法汇总
  • Koa2 之文件上传下载
  • Laravel5.4 Queues队列学习
  • 创建一种深思熟虑的文化
  • 从0搭建SpringBoot的HelloWorld -- Java版本
  • 回顾 Swift 多平台移植进度 #2
  • 世界编程语言排行榜2008年06月（ActionScript 挺进20强）
  • 双管齐下，VMware的容器新战略
  • 问题之ssh中Host key verification failed的解决
  • # 睡眠3秒_床上这样睡觉的人，睡眠质量多半不好
  • （LeetCode C++）盛最多水的容器
  • （一）SpringBoot3---尚硅谷总结
  • ./mysql.server: 没有那个文件或目录_Linux下安装MySQL出现“ls: /var/lib/mysql/*.pid: 没有那个文件或目录”...
  • .gitignore文件---让git自动忽略指定文件
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .NET Core实战项目之CMS 第十二章 开发篇-Dapper封装CURD及仓储代码生成器实现
  • .Net Redis的秒杀Dome和异步执行
  • .NET/C# 中你可以在代码中写多个 Main 函数，然后按需要随时切换
  • @DateTimeFormat 和 @JsonFormat 注解详解
  • @SuppressWarnings(unchecked)代码的作用
  • [20170705]diff比较执行结果的内容.txt
  • [23] 4K4D: Real-Time 4D View Synthesis at 4K Resolution
  • [Angular] 笔记 21：@ViewChild
  • [AutoSAR系列] 1.3 AutoSar 架构
  • [BJDCTF 2020]easy_md5
  • [BZOJ4337][BJOI2015]树的同构(树的最小表示法)
  • [daily][archlinux][game] 几个linux下还不错的游戏
  • [Delphi]一个功能完备的国密SM4类(TSM4)[20230329更新]
  • [IE技巧] IE 中打开Office文件的设置
  • [IM] [Webhook] Webhook实现IM平台机器人
  • [IOI2018] werewolf 狼人
  • [ios-必看] IOS调试技巧：当程序崩溃的时候怎么办 iphone IOS
  • [ITIL学习笔记]之事件管理(2)
  • [JS]JavaScript 注释 输入输出语句
  • [Latex学习笔记]数学公式基本命令
  • [leetcode] Longest Palindromic Substring
  • [LeetCode]Balanced Binary Tree
  • [LeetCode]—Rotate Image 矩阵90度翻转
  • [Linux]于Mac在配置Linuxserver安装Nginx+PHP