本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(11)

2021-06(94)

2021-07(4)

2021-08(73)

2021-09(69)

PWA桌面应用开发

发布于2021-11-20 17:16     阅读(778)     评论(0)     点赞(20)     收藏(0)


什么是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 应用

原文链接:https://blog.csdn.net/weixin_42467467/article/details/120719668




所属网站分类: 技术文章 > 博客

作者:Jjxj

链接:http://www.qianduanheidong.com/blog/article/237492/3330548e263f67ea8c8d/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

20 0
收藏该文
已收藏

评论内容:(最多支持255个字符)