https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

　　PWA是一些技术的集合。用于消除web与其他客户端之间的差距，最大程序利用现代浏览器的技术，提供一个更像移动应用的网页体验，改善了性能，支持离线，以及能实现一些只有移动应用可以的功能。

PWA特性

  • 渐进式增强：是“优雅降级、渐进增强” 的，给支持的设备更好的体验，不支持的设备也不会更差。
  • 响应式的用户界面：可以在其他任意设备上运行
  • 离线：通过service worker可以在离线或者网速较差的环境下工作
  • 类原生应用：拥有原生应用般的体验，因为它是建立在app shell model上的
  • 持续更新：受益于service worker的更新进程，应用能始终保持更新
  • 安全：通过https来提供服务，能避免内容窥探和替换
  • 可发现：通过W3C manifest和service worker registration标识应用，让搜索引擎能够找到web应用
  • 再次访问：消息推送等特性让用户再次访问变得容易
  • 可安装：允许用户把应用保留在主屏幕，不需要通过应用商店
  • 可连接：通过URL可以轻松分享应用，不需要复杂的安装即可运行

缺点

  • 门槛高：要求服务器部署https，service worker 涉及api众多，需要单独学习
  • 浏览器支持不够全面：但最近（2017-12）Safari也支持了
  • 用户不习惯：网页代替原生应用，如让用户习惯网页可以离线工作。用户短期内不适应。

关键技术

  • Manifest
  • Service Worker
  • Push Notification

PWA与其他App的对比

  • Native App：需要下载安装，用户体验好，可离线，速度快，性能高。但维护成本高，对于其他平台需要重新开发，应用商店审核效率低，流程复杂
  • Web App：运行在浏览器中，不需要安装，跨平台，支持的设备广泛，发布灵活（不需要应用商店审核），即时上线，用户可直接使用最新版本。需要处理浏览器兼容问题
  • Hybrid App：以上两种的混合App，需要下载安装，跨平台，Web人员方便快速构建，可以上传到应用商店，可以基于浏览器进行调试，但用户体验不如原生，性能慢，技术不是很成熟

PWA介绍的更多相关文章

  1. 超详细动手搭建一个Vuepress站点及开启PWA与自动部署

    超详细动手搭建一个Vuepress站点及开启PWA与自动部署 五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了. 记得最后一定要看注意事项! Vuepress介绍 官网:http ...

  2. PWA 学习笔记(一)

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

  3. PWA - 整体（未完）

    渐进式 Web 应用(PWA) 运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序. PWA 的优势 可被发现 易安装 manifest(https://develop ...

  4. vue-cli3.x中的webpack配置，优化及多页面应用开发

    官方文档 vue-cli3以下版本中,关于webpack的一些配置都在config目录文件中,可是vue-cli3以上版本中,没有了config目录,那该怎么配置webpack呢? 3.x初始化项目后 ...

  5. PWA(Progressive Web App)入门系列：（一）PWA简单介绍

    前言 PWA做为一门Google推出的WEB端的新技术,长处不言而喻.但眼下对于相关方面的知识不是非常丰富.这里我推出一下这方面的新手教程系列.提供PWA方面学习. 什么是PWA PWA全称Progr ...

  6. java web学习总结(二十七) -------------------JSP标签介绍

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  7. 使用 React.js 的渐进式 Web 应用程序：第 1 部分 - 介绍

      使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 使用 React.js 的渐进式 Web 应用程序:第 1 部分 - 介绍 来自译者 markzhai:大家也知道最近 ...

  8. 轻松把你的项目升级到PWA

    什么是PWA PWA(Progressive Web Apps,渐进式网页应用)是Google在2015年推出的项目,致力于通过web app获得类似native app体验的网站. 优点 1.无需客 ...

  9. PWA学习心得

    PWA学习心得 一.什么是PWA Progressive  Web  App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA ...

随机推荐

  1. idea | 命名空间改过后重新导入项目方法

    file菜单-->Open-->找到项目中pom文件-->会提示as project 和as file-->选择as project,会自动生成idea所有相关的文件

  2. zabbix图表中文乱码

    如果语言改成中文,在图表中的中文会乱码,这是因为zabbix默认的字体文件比较烂 方法就是把字体文件替换,找到zabbix前端文件地址,换一个字体文件就好 [root@webmaster fonts] ...

  3. python 基础(十) 面向对象

    面向对象 一.概念 类(class): 用来描述具有相同属性和方法的对象的集合 对象是类的实例化 类变量:类变量在整个实例化的对象中是共用的.定义在类中 并且是函数体外的 实例变量:只能作用于 当前类 ...

  4. [hdu1686] Oulipo【KMP】

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1686 保存KMP模版,代码里P是模版串,next[]就是为它建立的.T是文本串,就是一般比较长的.nex ...

  5. 关于yii2自带验证码功能不显示问题

    1,验证码不显示: 首先保证你的controler 里面的captcha方法是可访问的,被分配的权限的,这个在rule里面设置. 第二,保证你的PHP GD插件已经被启用, 第三如果这样还是不显示,那 ...

  6. C#入门笔记3 表达式及运算符

    C#表达式 表达式,把变量.字面值与运算符组合起来,就创建表达式,是计算的基本构件.字面值:是源代码中键入的数字.字符串,表示指定类型的值.常用有几种:整数.实数.字符.字符串. 整数字面量[也能使用 ...

  7. 【Web应用-Web作业】Web 作业无法直接运行 jar 文件

    问题描述 在经典管理门户中将直接压缩的 jar 文件打包为 zip 包,上传到 web 作业时报错. 解决方法 jar 文件的运行需要依托于 java 进程,所以在运行 jar 文件时,我们都会以格式 ...

  8. POJ 3107 Godfather （树的重心）

    题意:求树的重心,若有多个,全部打印出来. 思路: 树的重心:在删除点v后,森林中的每棵树的节点数尽量均匀,若最大的那棵树的节点数最小,称v为树的重心. 这道题只是求树的所有重心,当且经当这棵树有对称 ...

  9. ubuntu16.0 安装 openstack

    主要参考官方文档:https://docs.openstack.org/liberty/zh_CN/install-guide-ubuntu/environment-nosql-database.ht ...

  10. 广播接收者 BroadcastReceiver

    1. 分为动态注册和静态注册, 静态注册在清单文件里配置即可.动态创建为代码手动添加. 在锁屏广播中, 使用静态创建消息接受不成功, 原因未知. 动态即可. 代码如下: 2. 创建类, 继承与Broa ...