在国内由于小程序的风生水起,PWA 应用在国内的状况一直都不是很好,PWA 和小程序有很多的相似性,但是 PWA 是由谷歌发起的技术,小程序是微信发起的技术,所以小程序在国内得到了大力的扶持,很快就在国内技术界开花结果。

这里想讨论下在去创建自己的第一个 PWA 应用前,什么是 PWA 应用,有哪些核心的技术?

先搞清楚 PWA

PWA 全称渐进式 Web 应用(Progressive Web App)是一个使用 web 平台技术构建的应用程序,但它提供的用户体验就像一个特定平台的应用程序。

它像网站一样,PWA 可以通过一个代码库在多个平台和设备上运行。它也像一个特定平台的应用程序一样,可以安装在设备上,可以离线和在后台运行,并且可以与设备和其他已安装的应用程序集成。

对于用户来说,PWA 应用最大的变化在于,改变了以往需要下载安装包、等待安装的过程,这类应用很好地体现了「用完即走」的理念,与传统安装应用相比,PWA 应用具备的优势是:无需安装、更轻量、不占用大量空间,只需要一款支持 PWA 应用的浏览器,就可以轻松添加 PWA 应用,具备了跨平台使用的特性。

如果想要更为直接的体验,可以直接访问下谷歌官方上线的 PWA 体验 demo:squoosh.app ,算是 PWA 技术实际应用的典范,整个页面的大小都只有41K。

PWA 的技术核心

PWA 的技术核心可以分为四个部分:

  • 桌面图标 Web App Manifest :将网站添加到桌面,让 PWA 应用的访问使用更类似 native 的体验。
  • 离线访问 Service Worker :指定一些静态资源进行离线缓存。
  • 消息推送 Push Api & Notification Api :让 PWA 应用可以进行消息的推送和通知。
  • 应用壳及应用结构 App Shell & App Skeleton:应用的基本结构。

1、桌面图标 Web App Manifest

Manifest File 是一个配置 JSON 文件,里面包含 PWA 的信息,例如安装到主屏幕上显示的图标、Web 应用的名称和背景色。 如果 Manifest File 存在的话,Chrome 等浏览器会自动激活用于引导用户安装 PWA 应用的提示“添加到主屏幕”。

如果用户同意,图标就会添加到主屏幕并安装 PWA。

关于如何创建 Manifest File 这里放一个示例:

{
"name": "Progressive Selfies",
"short_name": "PWA Selfies",
"icons": [
{
"src": "/src/images/icons/app-icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/src/images/icons/app-icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/index.html",
"scope": ".",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#3f51b5"
}

然后需要给浏览器传递关于图标的信息,加一个连接的 tag 到 index.html。

<link rel=”manifest” href=”/manifest.json”>

2、离线访问 Service Worker

Service Worker 是一段 JavaScript,主要用于浏览器和网络之间的代理。Service Worker 支持推送通知、后台同步、缓存等。

这里主要讨论的核心功能是允许 PWA 拦截和处理网络请求。另外一个让人觉得靠谱的原因是,允许通过利用缓存来支持离线访问,这样能够使开发人员能够控制用户的体验。

3、消息推送 Push Api & Notification Api

消息推送 API 和通知 API 是两个独立的 API,但他们两个可以很好地协同工作,消息推送用于将新内容从服务器传递到应用,这个时候是无需客户端干预的。

官方文档 demo:

self.addEventListener("push", (event) => {
if (!(self.Notification && self.Notification.permission === "granted")) {
return;
} const data = event.data?.json() ?? {};
const title = data.title || "Something Has Happened";
const message =
data.message || "Here's something you might want to check out.";
const icon = "images/new-notification.png"; const notification = new self.Notification(title, {
body: message,
tag: "simple-push-demo-notification",
icon,
}); notification.addEventListener("click", () => {
clients.openWindow(
"https://example.blog.com/2015/03/04/something-new.html",
);
});
});

写到最后

PWA 在国内不少国民 App 中都有应用,例如淘宝、豆瓣等,如果应用合理也有非常丝滑的体验,其实推荐有一些创新业务的企业或者对于小程序技术不感兴趣的开发同学都可以尝试起来。

而小程序则更适合在微信、支付宝等生态中构建社交、生活服务和商业应用,利用平台的社交传播和原生能力。

但是现在小程序的这种限制逐渐得到突破,借助小程序容器技术能够做到小程序脱离微信、支付宝等平台运行在自己的 App 中,例如集成 FinClip SDK 或 mPaaS 即可让自己的 App 获得像微信一样的小程序运行能力,实现一端开发多端的运行。

当然相信经过持续的技术发展,还会有更多的技术创新生长在 PWA、小程序之上,我们的开发及用户的使用还会得到持续的改进。

PWA 和小程序都是推动现代应用开发模式发展的重要里程碑,推动了移动应用的创新。你会怎样进行选择?

什么是PWA 应用?核心技术有哪些的更多相关文章

  1. 干货 | 10分钟玩转PWA

    关于PWA PWA(Progressive Web App), 即渐进式web应用.PWA本质上是web应用,目的是通过多项新技术,在安全.性能.体验等方面给用户原生应用的体验.而且无需像原生应用那样 ...

  2. 认识PWA

    原文 简书原文:https://www.jianshu.com/p/f38f21ed45dc 大纲 前言 1.什么是PWA 2.PWA 应该具备的特点 3.PWA基础 4.构建 PWA 的业务场景 5 ...

  3. Service Worker

    Service Worker 随着前端快速发展,应用的性能已经变得至关重要,关于这一点大佬做了很多统计.你可以去看看. 如何降低一个页面的网络请求成本从而缩短页面加载资源的时间并降低用户可感知的延时是 ...

  4. service-worker实践

    service-worker虽然已列入标准,但是支持的浏览器还是有限制,还有比较多的问题. 1. 生命周期 注册成功-------installing--------------> 安装成功(i ...

  5. 中国2017 Google 开发者大会第一天简单回顾

    昨天有幸参加了中国2017 Google 开发者大会,在这第一天就收获满满,昨天太忙了,今天早晨来一起简单回顾一下,可以让没有参加的童鞋们感受一下现场的温度. 早早就来到了会议现场,外面看不出什么特别 ...

  6. PWA初体验

    一.前言 现在市面上的Native  APP成千上万个,各种应用商店里面的APP琳琅满目.原生的APP下载到手机上之后,用户就可以获取一个方便的入口,体验上也十分顺畅.但是再好的事物难免有点缺点: 1 ...

  7. pwa学习笔记--简介

    1. 介绍 Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA 本质上是 Web App ...

  8. PWA 学习笔记(一)

    PWA 介绍 概念: PWA(Progressive web apps,渐进式 Web 应用)运用现代 Web API 和传统的渐进式增强策略来创建跨平台 Web 应用程序 它并不是一个快捷方式,而能 ...

  9. PWA渐进式web应用

    PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化框架,让网页应用呈现 ...

  10. 前端性能和加载体验优化实践(附:PWA、离线包、内存优化、预渲染)

    一.背景:页面为何会卡? 1.1 等待时间长(性能) 项目本身包/第三方脚本比较大. JavaScript 执行阻塞页面加载. 图片体积大且多. 特别是对于首屏资源加载中的白屏时间,用户等待的时间就越 ...

随机推荐

  1. Kafka 源码解析:Server 端的运行过程

    摘要:Kafka网络模块之Server端,介绍Server端启动.接收请求和处理请求的过程. 本文分享自华为云社区<Kafka网络模块-Server端>,原文作者:中间件小哥 . Sock ...

  2. 复杂查询so easy ,GaussDB(for Cassandra)推Lucene引擎全新解决方案

    摘要:复杂查询so easy!GaussDB(for Cassandra)新特性来袭. 本文分享自华为云社区<来了!GaussDB(for Cassandra)新特性亮相>,作者:Gaus ...

  3. 面试官:说一下Jena推理

    摘要:本文介绍了Jena的推理子系统,并构建了一个简单的RDF图.基于该RDF图,我们搭建了一个Jena推理引擎,并进行自动化推理. 本文分享自华为云社区<知识推理之基于jena的知识推理(三) ...

  4. GaussDB (for Cassandra) 数据库治理:大key与热key问题的检测与解决

    摘要:GaussDB(for Cassandra) 提供了大key和热key的实时检测,以帮助业务进行合理的schema设计,规避业务稳定性风险. 本文分享自华为云社区<GaussDB (for ...

  5. flask 上传文件,视图

    记得有template ''' 导入flask类.该类的实例将会成为我们的wsgi应用 __name__是一个适用于大多数情况的快捷方式,有了这个参数,flask才能知道在那里找到模板和静态文件等东西 ...

  6. 机器人多目标包围问题(MECA)新算法:基于关系图深度强化学习

    摘要:中科院自动化所蒲志强教授团队,提出一种基于关系图的深度强化学习方法,应用于多目标避碰包围问题(MECA),使用NOKOV度量动作捕捉系统获取多机器人位置信息,验证了方法的有效性和适应性.研究成果 ...

  7. 多智能体协同控制研究中光学动作捕捉与UWB定位技术比较

    人类在进行任何工作时,总是强调团队合作,teamwork.随着控制科学.计算机科学等多学科的交叉发展与融合,在智能体控制领域,对于单个机器人,无人机,无人车的控制已经不能满足现在领域的技术需求,从而和 ...

  8. 在Windows上D盘上安装Docker

    Reference https://www.willh.cn/articles/2022/07/13/1657676401964.html Docker默认安装在C盘: "C:\Progra ...

  9. 创新推出 | Serverless 调试大杀器:端云联调

    背景 说起当前最火一个技术, 不可避免地讨论到一个概念: Serverless.作为一种新型的应用架构,Serverless 让我们摆脱了维护基础设施的繁琐,只需要上传代码包或者镜像, 即可得到一个弹 ...

  10. Linux 文件目录配置及命令总结

    前言 在Linux中,一切皆文件,而每一个文件和目录都是从根目录开始的 Linux文件目录的作用 /bin目录:用来存放二进制可执行命令的目录,用户常用的命令都存在该目录下. /sbin目录:用来存放 ...