美文网首页
PWA简单描述

PWA简单描述

作者: Qiner_176 | 来源:发表于2018-10-18 16:37 被阅读0次

面试的时候问到的 对pwa的了解。

PWA为progressive web app,即渐进式Web App,是提高Web App体验的一种方法。兼具了 Web App和Native App的优点,在安全、性能、体验都有很大的提升。本质上是Web App。

三大特性如下:

可靠:在断网/网络不好的情况下也可以访问(来自Service Worker, 能够让用户在网络条件很差的情况下也能瞬间加载并且展现)。

性能:快速响应,有很平滑的动画体验。

体验:像Native App的沉浸式体验,可以添加到桌面,但是不需要从应用商店下载。(借助 Web App Manifest 提供给用户和 Native App 一样的沉浸式体验。还可以通过给用户发送离线通知,让用户回流)

Service Worker 是用 JavaScript 编写的 JS 文件,能够代理请求,并且能够操作浏览器缓存,通过将缓存的内容直接返回,让请求能够瞬间完成。开发者可以预存储关键文件,可以淘汰过期的文件等等,给用户提供可靠的体验。

Web App Manifest ,PWA 添加至桌面的功能实现依赖于 manifest.json。manifest.json 应包含如下信息:

{

    "short_name":"短名称",

    "name":"这是一个完整名称",

    "icon": [ {

                        "src":"icon.png",

                        "type":"image/png",

                        "sizes":"48x48"

        }],

    "start_url":"index.html"

}

总结,PWA 具有下面一些特性

渐进式 - 适用于所有浏览器,因为它是以渐进式增强作为宗旨开发的

连接无关性 - 能够借助 Service Worker 在离线或者网络较差的情况下正常访问

类似应用 - 由于是在 App Shell 模型基础上开发,因为应具有 Native App 的交互和导航,给用户 Native App 的体验

持续更新 - 始终是最新的,无版本和更新问题

安全 - 通过 HTTPS 协议提供服务,防止窥探和确保内容不被篡改

可索引 - 应用清单文件和 Service Worker 可以让搜索引擎索引到,从而将其识别为『应用』

粘性 - 通过推送离线通知等,可以让用户回流

可安装 - 用户可以添加常用的 webapp 到桌面,免去去应用商店下载的麻烦

可链接 - 通过链接即可分享内容,无需下载安装

相关文章

  • PWA简单描述

    面试的时候问到的 对pwa的了解。 PWA为progressive web app,即渐进式Web App,是提高...

  • Progressive Web Apps(PWA)

    PWA 入门: 写个非常简单的 PWA 页面PWA_入门 精通 教程_w3cplus Service Worker...

  • pwa初探

    pwa项目初探 pwa简介 pwa优点 pwa特点 项目 运行项目 验收pwa是否生效(必须是https) 5、然...

  • PWA架构【翻译】

    PWA系列: PWA简介【翻译】 PWA架构【翻译】 利用Service workders使得PWA支持离线工作【...

  • 利用Service workders使得PWA支持离线工作【翻译

    PWA: PWA简介【翻译】 PWA架构【翻译】 利用Service workders使得PWA支持离线工作【翻译...

  • 利用消息推送增强PWA用户粘度【翻译】

    PWA: PWA简介【翻译】 PWA架构【翻译】 利用Service workders使得PWA支持离线工作【翻译...

  • PWA简介【翻译】

    PWA系列: PWA简介【翻译】 PWA架构【翻译】 利用Service workders使得PWA支持离线工作【...

  • 让PWA可安装【翻译】

    PWA系列: PWA简介【翻译】 PWA架构【翻译】 利用Service workders使得PWA支持离线工作【...

  • 一个知乎日报pwa

    前几天写了一篇文章关于如何实现一个简单版的pwa应用,端午撸了一个简易版知乎日报pwa。 关于如何写一个pwa,这...

  • 认识PWA

    大纲 前言1、什么是PWA2、PWA 应该具备的特点3、PWA基础4、构建 PWA 的业务场景5、PWA的核心技术...

网友评论

      本文标题:PWA简单描述

      本文链接:https://www.haomeiwen.com/subject/earszftx.html