夫天地者,万物之逆旅;光阴者,百代之过客。而浮生若梦,为欢几何?
架构师词条:SPA、PWA应用

单页应用(SPA)概述

单页应用(single-page application),简称 SPA。此 SPA 非彼 SPA ^^! 它是一种网站应用的模型,它可以动态重写当前的页面来与用户交互,而不需要重新加载整个页面。单页应用的流畅性让 Web 应用更像桌面端或 Native 应用了。随着前端近年来的快速发展,单页应用的使用已经很广泛,流行的 React、Vue、Angular 等前端框架均采用了 SPA 原则。单页应用意味着前端掌握了主动权,也让前端代码更复杂和庞大,模块化、组件化以及架构设计都变得越来越重要。

单页应用(SPA)工作原理

1、History API

History API更加优雅,但是对浏览器是有一定要求的。HTML5 对 history 对象新增了 pushState() 方法和 onpopstate 事件,pushState 可以往历史栈中添加数据,给用户的感觉就是浏览器的 url 改变了,但是页面并没有重新加载,onpopstate 可以响应浏览器的前进和后退。

2、Hash

hash 是 location 对象的属性,它指的是当前 url 的锚,也就是从 # 号开始的部分。当我们改变一个地址的时候,去修改hash,然后监听hashchange事件,你就知道页面的地址发生的变化,然后在这个事件里面去做相应的动作,就能完成刚才所说的这种页面的切换。

单页应用(SPA)优势

1、无刷新体验。

2、分离前后端关注点 。

3、减轻服务器压力 。

4、完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整。

渐进式应用(PWA)概述

渐进式应用(Progressive Web App),简称 PWA,一个新的前端技术。使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验。

渐进式应用(PWA)关键技术

1、Service Worker (离线缓存) 

    运行于浏览器后台,不受页面刷新的影响,可以监听和截拦作用域范围内所有页面的 HTTP 请求。 

    网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost) 。

    单独的作用域范围,单独的运行环境和执行线程 。

    不能操作页面 DOM,但可以通过事件机制来处理。


2、Manifest (应用清单) 

    Manifest 能够将你浏览的网页添加到你的手机屏幕上,并且可以应用程序图标、名字、图标大小,点击主屏幕图标可以实现启动动画以及隐藏地址栏。


3、Push Notification(推送通知)

渐进式应用(PWA)优势

1、可以将app的快捷方式放置到桌面上,全屏运行,与原生app无异 。

2、能够在各种网络环境下使用,包括网络差和断网条件下。

3、推送消息的能力 。

4、没有原生app的各种启动条件,快速响应用户指令。

参考资料

单页面应用(SPA) 

前端学习之路之SPA(单页应用)设计原理  

SPA(单页面应用)和MPA(多页面应用)   

PWA  

PWA介绍及快速上手搭建一个PWA应用  

PWA入门:手把手教你制作一个PWA应用  

讲讲PWA 

作者:暗夜余晖

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

0

支持

0

反对

posted @2020-1-16  拜读(582)

评论列表

评论内容:



喜欢请打赏

支付宝 微信

请放心支付