search

tomoya06 / web-developer-guidance

Actually it's just a notebook for keeping down some working experience.
4 stars 0 forks source link

Frontend - SPA & PWA #35

Open tomoya06 opened 3 years ago

tomoya06 commented 3 years ago

Webpage in Different Way

SPA

单页应用（single-page application aka. SPA）是一种网络应用程序或網站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。

在SPA中，所有的代码（包括HTML/JS/CSS）都在首次加载的时候拉取到本地，或者根据用户的点击去动态加载，使用过程中页面不会刷新或跳转，一般通过hash地址或history API来实现路由跳转和页面更新。

PWA

渐进式网络应用程序（英語：Progressive Web Apps，简称：PWA）是一种普通网页或网站架构起来的网络应用程序，但它可以以传统应用程序或原生移动应用程序形式展示给用户。这种应用程序形态视图将目前最为现代化的浏览器提供的功能与移动设备的体验优势相结合。

根据Google开发者支持页面，PWA具有以下特征：

渐进

Progressive 是指 PWA 的构建过程。构成 PWA 的标准都来自 Web 技术， 它们都是浏览器提供的、向下兼容的、没有额外运行时代价的技术。 因此可以把任何现有的框架开发的 Web 页面改造成 PWA，而且与 SPA 方案不同， 没有强组件化机制，因此不需要一把重构可以逐步地迁移和改善。

实践

完整实现PWA的过程可以参考MDN的文档。其中体现PWA与普通WEB差异的关键点如下：