网站搜索引擎优化方法,自动发布到wordpress,上海设计师网站有哪些,属于门户网站的有早在2015年#xff0c;设计师弗朗西斯贝里曼和Google Chrome的工程师亚历克斯罗素提出“PWA#xff08;渐进式网络应用程序#xff09;”概念#xff0c;将网络之长与应用之长相结合#xff0c;其核心目标就是提升 Web App 的性能#xff0c;改善 Web App以媲美Native的流…早在2015年设计师弗朗西斯·贝里曼和Google Chrome的工程师亚历克斯·罗素提出“PWA渐进式网络应用程序”概念将网络之长与应用之长相结合其核心目标就是提升 Web App 的性能改善 Web App以媲美Native的流畅体验。
1. 什么是PWA
PWA 不是一个框架或工具集而是一个概念是开发人员需要在应用程序中实现的一组功能以便将应用程序的用户体验提升到一个新的水平上。如果说某网站在某种程度上是 PWA那它满足的 PWA 功能清单中的特性越多它就越接近这个概念。 PWA是一类Web应用程序的统称通过高级Web功能使Web应用程序的行为和表现像本地应用程序一样。PWA 可以通过一个代码库在多个平台和多个设备上运行像一个特定平台的应用程序那样可以安装在设备上可以离线和在后台运行并且可以与设备和其他已安装的应用程序集成。 PWA能够重用现有代码以提供服务体验。基于其他的跨平台技术往往需要一次性将适配于各种设备和平台的应用程序部署到所有商店PWA与之有极大的不同本质上是提供类似于原生应用程序的用户体验的网站。PWA受欢迎的原因之一是它能够满足所有面向移动网络的设备需求同时节省了应用创建和维护的投资成本。
简单而言一个 PWA 应用首先是一个网页, 是通过 Web 技术编写出的一个网页应用随后通过App Shell 架构添加上 Manifest 实现添加至设备主屏幕 在通过 Service Worker 来实现离线缓存和消息推送等功能。 2.PWA 的关键技术
归纳而言PWA 应用中有两项关键技术基于Manifest的App Shell 架构和Service worker运行机制。
2.1 基于Manifest的App Shell架构
App Shell 架构是构建 PWA 应用的一种方式能即时可靠且地将PWA加载到用户屏幕上从而与本机应用相似。 作为一种PWA的构建方式App Shell架构提供了一个最基本的 Web App 框架包括应用的头部、底部、菜单栏等结构。App Shell 架构通常使用JavaScript框架(如React或Angular)来实现可以是一种构建单页面应用(SPA)的方法它将逻辑与实际内容分离开来。 App Shell 架构涉及缓存静态资源然后使用JavaScript动态加载实际内容是一个能够支持用最小化HTML/CSS/JS用户界面集合的可缓存UI框架。如果有离线缓存可确保在用户重复访问时提供即时、可靠的良好性能。这样一来用户重复打开应用时就能迅速地看到 Web App 的基本界面只需要从网络中请求、加载必要的内容。这也意味着并不是每次用户访问时都要从网络加载 App Shell而只需要从网络中加载必要的内容。
App Shell 是通过浏览器中的Web runtime 完成的web 应用与当前设备平台的交互尤其是在当前设备的屏幕上增加应用的启动入口。
Web Application Manifest即通过一个清单文件向浏览器暴露 web 应用的元数据包括名称、icon 的 URL 等以备浏览器使用比如在添加至主屏或推送通知时暴露给操作系统从而增强 web 应用与操作系统的集成能力。Manifest就是一个json文件一个简单示例如下
{name: Progressive web app sample,short_name: pwa sample,start_url: /index.html,display: standalone,theme_color: #FFDF01,background_color: #FFDF01,icons: [{src: homescreen.png,sizes: 168x168,type: image/png},{src: homescreen-124.png,sizes: 124x124,type: image/png}]
}
当用户第一次访问PWA应用程序时浏览器会按照manifest.json文件的内容对应用程序进行注册与安装以便随时在离线状态下访问。
对于使用包含大量 JavaScript 的架构的单页面应用来说基于Manifest 的 App Shell 适用于在没有网络的情况下将一些初始 HTML 快速加载到屏幕上。 2.2 Service worker
Service worker是 web技术中worker 的一种那么什么是worker呢
由于Javascript 的单线程特性任何“重量”操作都会阻塞主线程。为了提升性能和体验现代浏览器使用worker 作为一种多线程机制把原本的单线程应用变成多线程运行。现代浏览器中提供了 3 种 Worker分别是
Web worker—— 包含专用 worker及共享 workerService workerWorklet—— 包含PaintWorklet、AudioWorklet、AnimationWorklet、LayoutWorklet。其中Worklet 与硬件交互设计相关且仍处于试验状态。Web worker 特别适用于后台跑脚本。现在的网页都可以注册多个 Worker让不同的任务在各自独立的环境中完成。Service worker 相当于是浏览器在网页和服务器通信中插入的一个“中间层”本质上充当代理以编程方式拦截和处理来自页面的网络请求甚至可以从各种来源产生全新的反应并构建HTML。
关于service worker 的主要内容下图给出了核心提示 在Service Worker安装期间预加载文件。对于SPA这通常包括我们之前讨论的“应用程序外壳”而简单的静态网站可能会选择预加载所有HTML、CSS和JavaScript以确保离线时基本功能得到维护。处理推送通知类似于本机应用程序。这意味着网站可以获得用户的许可来发送通知然后依靠Service Workers接收消息并执行消息即使浏览器关闭。.
2.3 基于Service worker 的Push、notification 和后台服务
目前不同的浏览器厂商使用了不同的Push Servicechrome使用了自家的FCMfirefox也是使用自家的服务不同push服务遵循共同的Web Push协议具有标准的调用方式。 其中“UA”就是我们的用户客户端也就是浏览器“Application Server”是后端服务“Push Service”作为中间代理商扮演着核心角色。Push Service接收客户端的消息订阅维护管理“客户端url-公钥”对的列表并将订阅和私钥信息发送给服务器进行存储此外它后续还得接收服务端的推送消息校验并发送给对象的客户端进行展示。
Push Service还有一个非常重要的功能当用户离线时可以帮我们保存消息队列直到用户联网后再发送给他们。
Notification通知的功能与消息push类似但更为简单只要设置好通知消息调用service worker的相同通知接口即可甚至可以可以带操作
后台同步也是Service Worker的一个子功能用于在终端弱网或无王情况下同步后台的数据或继续前端的请求消息由于service worker在浏览器关闭后仍然运行着所以即使用户没有网络或关闭客户端service worker仍会存储相应的请求并在有可用网络连接时发起数据同步。
3. PWA 的应用特性与功能特点
Google 给出的 PWA 应用特性如下
可靠即使在互联网连接不佳或没有互联网的情况下也可以快速加载。当没有互联网连接时PWA 会使用 Service Worker 来消除对Web服务器的依赖。快速流畅的动画和交互效果应用程序拥有原生的体验没有笨拙的网页滚动。参与感能够全屏运行如果添加到手机桌面并处理通知。
PWA 应用主要功能特点如下
渐进增强在尽可能多的环境中运行可以使用任何可用的服务并在没有服务的情况下优雅地降级。响应式用户界面该应用程序适应各种输入方式触摸、语音等和输出方式(不同的屏幕尺寸、振动、音频、盲文显示等。连接独立性该应用程序在离线状态下以及间歇性或低带宽网络连接下也能运行良好。App-like UI应用程序采用原生平台的 UI 元素能够快速加载的用户界面。持续更新Service Worker API 定义了一个将应用程序自动更新到新版本的过程。安全通信通过 HTTPS 提供服务和通信以防止窥探和攻击。应用程序发现即SEO友好W3C 网络应用程序清单等元数据使搜索引擎能够找到网络应用程序。推送交互推送通知等功能可以主动让用户了解最新信息。后台加载网页关闭PWA 仍然可以在后台运行获取数据更新当然有限制。本机可安装性可以安装 Web 应用程序无需通过本机应用程序商店来进行。可链接性通过 URL 轻松共享应用程序无需显示安装即可运行。可再次访问通过 URL 可以轻松分享应用不用复杂的安装即可运行。轻量级web应用更加轻量级整个APP都在KB占用内。
4.PWA开发工具与生态影响
渐进式web应用程序PWA框架简单可靠开发人员可以使用不同的来开发PWA常见的开发工具框架如下
VueJSVue是顶级的PWA框架库之一因为它简化了编码并提供了高速渲染。AngularJS2009年由谷歌发布是PWA应用程序开发中最广泛的流程之一。ReactJS2013年由Facebook发布的React包含了一个广泛的JavaScript库使用JSX呈现连接HTML结构的函数来提供React PWA解决方案。Ionic一个开源SDK提供了一个庞大的插件库能够在无需编码的情况下访问APIPolymerPolymer具有多种工具、组件和模板使用纯HTML、CSS或JavaScript的一个独立框架Magento PWA Studio提供创建、部署和管理PWA所需的一切包括用于构建用户界面、管理数据和测试应用程序的工具。Svelte一个用于开发PWA的JavaScript框架构建了快速加载的小代码包。
对于软件生态而言PWA确实对一些传统的应用软件和开发方式带来了一定的冲击和改变。
对于一些开发商而言PWA技术的出现意味着需要考虑在Web端进行应用开发并为用户提供更好的Web应用体验。但同时PWA的开发方式也使得他们可以更加灵活地进行应用开发并且减少了一些原生应用的开发和发布成本。 PWA技术的出现可能会对应用商店造成一定的冲击因为PWA可以通过浏览器直接访问不需要下载和安装这可能会导致一些应用商店用户流失。但是应用商店也可以通过采取措施例如推出PWA应用、提供更好的应用变现机会等来应对这种变化。 对于用户而言PWA技术的出现可能会提供更好的Web应用体验例如离线访问、桌面快捷方式、推送通知等功能同时也可以减少一些应用的下载和安装成本。但是用户也需要考虑PWA应用在一些方面可能相对于原生应用和小程序存在的较多局限性和不足。
PWA技术对于应用软件开发商、应用商店和用户都可能会产生一定的影响但是它并不会完全颠覆原有的开发和使用方式。PWA的优点和缺点都是相对的不同的应用场景和开发需求会影响开发者对PWA和原生应用的选择。如果应用的功能、性能和用户体验要求较高可以考虑原生应用如果希望对开发和维护成本进一步降低但又拥有app的一些特征可以考虑使用PWA。
5.PWA 与小程序
各种类型的小程序都或多或少地继承或借鉴了PWA的技术理念可以认为PWA是各种小程序的源头之一。 依托于超级App微信、百度、支付宝等公司都推出了各自的小程序。归纳而言小程序采用了轻量级的框架和组件加载速度快用户可以迅速打开应用程序。小程序能够与设备的硬件功能如摄像头、定位、陀螺仪等进行原生集成提供更丰富的功能和用户体验。通过应用商店进行分发用户可以方便地搜索、发现和安装小程序。小程序开发使用统一的开发工具和语言在一定程度上减少了开发者的学习成本。另外小程序可以共享用户数据提供更便捷的登录和数据传输。
PWA可以在几乎所有现代浏览器上运行具有广泛的设备和平台支持。开发者可以充分利用现有的Web开发知识和工具庞大的开发者社区来提供丰富的资源、工具和支持。小程序可以通过超级App作为流量入口也可以运行在企业自有App中任何企业的App只需要通过集成小程序运行时SDK,即可获得小程序运行能力让小程序拥有了更多分发渠道。小程序生态系统提供了数据分析和统计工具帮助开发者了解用户行为、应用性能和使用情况。开发者可以通过这些工具获取关键指标和数据进行数据驱动的优化和改进。这些工具提供了可视化的报表和图表帮助开发者更好地理解用户行为和应用运行情况。 PWA和小程序都是当前移动应用开发领域的热门技术方案各具特色。从开发者的角度来看PWA具有广泛的浏览器支持、跨平台能力和成熟的Web开发生态系统。小程序则在流量入口、应用商店支持和与硬件集成方面表现突出。
6.小结
PWA 是一种先进的理念和技术探索但理念并不能直接演变成竞争优势。现在是2023年了推广和应用成本更低的PWA仍然活在小程序阴影下看起来仍然没法撼动应用开发的现状。除了国内各平台的强势影响力和平台审核因素外PWA仍然存在一些明显缺点。PWA是一个基于浏览器的web端技术相较于native APP的各项系统级功能明显不足比如无法做硬件层面的调用在动画、渲染等方面性能也明显弱于native APP大计算量处理和音视频方面也都是弱项。
那么如果PWA 要获得更加广泛的应用优先级最高的突破点在哪里呢
善用工具
成功的前端工程师很会善用工具这些年低代码概念开始流行像国外的 Mendix国内的 JNPF这种新型的开发方式图形化的拖拉拽配置界面并兼容了自定义的组件、代码扩展确实在 B 端后台管理类网站建设中很大程度上的提升了效率。
JNPF很多人都用过它它是功能的集大成者任何信息化系统都可以基于它开发出来。
原理是将开发过程中某些重复出现的场景、流程具象化成一个个组件、api、数据库接口避免了重复造轮子。因而极大的提高了程序员的生产效率。
官网www.jnpfsoft.com/?csdn如果你有闲暇时间可以做个知识拓展。
这是一个基于Java Boot/.Net Core构建的简单、跨平台快速开发框架。前后端封装了上千个常用类方便扩展集成了代码生成器支持前后端业务代码生成满足快速开发提升工作效率框架集成了表单、报表、图表、大屏等各种常用的Demo方便直接使用后端框架支持Vue2、Vue3。
为了支撑更高技术要求的应用开发从数据库建模、Web API构建到页面设计与传统软件开发几乎没有差异只是通过低代码可视化模式减少了构建“增删改查”功能的重复劳动。
