PWA 初探与实践（1）
最近比较忙，所以很少更新公众号，先说声抱歉。进来异常火热的微信小程序。从各大网站的招聘信息可以看出。
小程序之所以成功，是因为他带来了良好的用户体验。用户无需下载就可以获得类似于原生 app的体验。今天我不准备谈微信小程序。而是想谈一谈 pwa技术。如何让您的 web 应用或是网站在不同的平台上有良好的用户体验。特别是在 Android 上有类似于原生的用户体验。好！那就进入今天的主题 pwa（progressive web app）。在最近 google io 的开发者大会上，分享了不少关于 pwa 的内容。那么什么是 pwa。pwa 是提升 Web App 的体验的一种新解决方案，让 web 端能给用户原生应用的体验。我们需要理解的是，PWA不是某一项技术，或者某一个新的产物；而是一系列Web技术与标准的集合与应用。通过应用这些新的技术与标准，可以从安全、性能和体验三个方面，优化我们的 Web App。io 大会上也分享用户支付应用的案例。
平时大多时间都话费在手机，无论是在地铁上、聚会时或是排队等待时，我都会打开手机浏览网页或查搜消息。在手机上购物、工作、娱乐和交友。而且使用手机的时间基本都被 app 占用 （ 据统计 87% ），浏览网页的时间相对要少（仅为 13%）。这是因为 app 相对与 web 给我们更好的用户体验。有趣。进一步分析，我们的 80% 时间都花在那些像微信、淘宝这样常用的 app（前 3 热度的 app 上）。多数用户现在很少下载安装新的 app。这样对于一些新兴的互联网公司是一个大问题。如何解决这个问题？答案就是今天带来的 pwa 这个技术。
pwa progressive web app
他是一个概念，包含许多新的技术。pwa 的宗旨是提高用户体验。在移动设备可以给用户带来原生 app 体验。我们看一看网页或web app 相对与原生app 逊色地方是什么
1. 稳定性
2. 无法推送信息，有消息推送即使用户退出 app 依旧可以 app 互动
3. 速度，加载速度，现在用户越来越没有耐心。过长加载时间就等于你永远失去这个用户了。具体点就是 40% 用户会耐心时间只有 3 秒，这里透露一下解决方案为— service workers
PWA 会涵盖以下技术技术，我会一一给大家介绍
1. Web App Manifest
2. Service Worker
3. indexDB
4. responsive layout
5. responsive images
6. cache API
7. Push&Notification 推送与通知
8. Background Sync 后台同步
首先创建一个项目，项目结构如下图，我们把静态项目都放入 public 文件夹下，这样符合一般规范。
项目结构
然后初始化 package.json 文件来引用一些第三方包。安装 http-server 包来启动我们的应用。具体配置见 package.json 文件
package.json
在 index.html 同级别创建 manifest.json 文件如下图
manifest.json
nameshort_name
指定了Web App的名称。short_name 为该应用的一个缩写名称。一般来说，当没有足够空间展示应用的时，系统就会使用缩写名来代替全称。可以看到本文的例子中，小马学编程这个应用在桌面上展示的名称就是short_name 的小马学编程。
start_url
指定了用户打开 Web App 时加载的 URL。相对URL会相对于manifest。这里我们指定了start_url 为"/"，访问根目录
display
为应用的显示模式，它有四个值可以选择：fullscreen、standalone、minimal-ui和browser。
1. fullscreen：全屏显示，会尽可能将所有的显示区域都占满；
2. standalone：独立应用模式，这种模式下打开的应用有自己的启动图标，并且不会有浏览器的地址栏。因此看起来更像一个Native App；我一般选择这种显示方式
3. minimal-ui：与standalone相比，该模式会多出地址栏；
4. browser：一般来说，会和正常使用浏览器打开样式一致
orientation
控制Web App的方向。
icons，background
icons 用来指定应用的桌面图标。icons本身是一个数组，每个元素包含三个属性：
sizes：图标的大小。通过指定大小，系统会选取最合适的图标展示在相应位置上。
src：图标的文件路径。注意相对路径是相对于manifest。
type：图标的图片类型。
需要指出的是，我一直提的“开屏图”其实是背景颜色+图标的展示模式（并不会设置一张所谓的开屏图）。background_color是在应用的样式资源为加载完毕前的默认背景，因此会展示在开屏界面。background_color加上我们刚才定义的icons就组成了Web App打开时的“开屏图”。
safari 暂时虽然不支持 Web App Manifest，但是有有自己的一些head标签来定义相应的资源与展示形式：
1. apple-touch-icon：桌面图标，通过在head中添加<link rel="apple-touch-icon" href="your_icon.png">即可。其中还可以添加sizes属性，来指示系统使用在各类平台（iphone、ipad…）中使用最合适的图标
2. apple-mobile-web-app-title：应用的标题。注意，这里需要使用meta标签<meta name="apple-mobile-web-app-title" content="AppTitle">
3. apple-mobile-web-app-capable：类似于manifest中的display的功能，通过设置为yes可以进入standalone模式，同样也是meta标签<meta name="apple-mobile-web-app-capable" content="yes">
4. apple-mobile-web-app-status-bar-style：这会改变iOS移动设备的状态栏的样式，并且只有在standalone模式中才会有效果。<meta name="apple-mobile-web-app-status-bar-style" content="black">，不过在iPhoneX上black会导致状态栏不显示任何东西。
下面是我个人的微信公众号，要获得更多更快信息请关注
小马学编程
