标签：internet 国内 生活 保留 启动 blank 代码 管理 icon
PWA做为一门Google推出的WEB端的新技术，长处不言而喻。但眼下对于相关方面的知识不是非常丰富。这里我推出一下这方面的新手教程系列。提供PWA方面学习。
PWA全称Progressive Web App，直译是渐进式WEB应用，是 Google 在 2015 年提出，2016年6月才推广的项目。是结合了一系列现代Web技术的组合。在网页应用中实现和原生应用相近的用户体验。
所谓的P（Progressive）这里有两层含义，一方面是渐进增强，让WEB APP的体验和功能能够用渐进增强的方式来更接近原生APP的体验及功能。另一方面是指下一代WEB技术。PWA并非描写叙述一个技术。而是一些技术的合集。
网页应用替代原生应用的方式，用户短时间内不适应
Web App Manifest是一个W3C规范，定义了一个基于JSON的清单，为开发人员提供一个放置与Web应用程序关联的元数据的集中地点。manifest 就是 PWA 概念的一环，它给你了控制你的应用怎样出如今用户期待出现的地方（比方用户手机主屏幕）。这直接影响到用户能启动什么。以及更重要的。用户怎样启动它。
使用 web 应用程序清单，你的应用能够：
比如：
{
"lang": "en",
"dir": "ltr",
"name": "Donate App",
"description": "This app helps you donate to worthy causes.",
"short_name": "Donate",
"icons": [{
"src": "icon/lowres.webp",
"sizes": "64x64",
"type": "image/webp"
},{
"src": "icon/lowres.png",
"sizes": "64x64"
}, {
"src": "icon/hd_hi",
"sizes": "128x128"
}],
"scope": "/racer/",
"start_url": "/racer/start.html",
"display": "fullscreen",
"orientation": "landscape",
"theme_color": "aliceblue",
"background_color": "red",
"serviceworker": {
"src": "sw.js",
"scope": "/racer/",
"use_cache": false
},
"screenshots": [{
"src": "screenshots/in-game-1x.jpg",
"sizes": "640x480",
"type": "image/jpeg"
},{
"src": "screenshots/in-game-2x.jpg",
"sizes": "1280x920",
"type": "image/jpeg"
}]
}
Service Worker是浏览器在后台独立于网页执行的脚本，它打开了通向不须要网页或用户交互的功能的大门。
这个 API 之所以令人兴奋，是由于它能够支持离线体验，让开发人员能够全面控制这一体验。
ServiceWorker是由两部分构成。一部分是 cache，另一部分则是 Worker。
它被设计为一个相对底层、高度可编程、子概念众多，也因此异常灵活且强大的 API，它就像一个位于client和网络之间的代理。能够拦截、处理、响应流经的网络请求，配合Cache API，你能够自由管理网络请求文件的缓存，这使得 Service Worker 能够从缓存中向 web 应用提供资源，即使是在离线的环境下。
这样。在离线和网速低的情况下也能秒开。说白了，之前的Hybrid架构的出现不就是为了这个功能么。
之前尽管有AppCache。但它具有相当多的缺陷，这里就不说了。
来张官网的形象图：
Push 和 Notification是两个不同的功能，涉及到两个API，可是它们之前有依赖关系。
Notification这块应该大家多少了解一些。属于浏览器发出的通知消息。之前须要浏览器一直开着才干实现这样的通知，可是如今有了上面提到的Service Worker。就能够驻留在进程里面操作了。
Push & Notification关系：
眼下的移动端APP：
Native APP，指原生App。是一个完整的App。可拓展性强，须要用户下载安装使用。
长处：
缺点：
Web App 指採用Html5语言写出的App。生活在浏览器里的应用。不须要下载安装。
长处：
缺点：
Hybrid APP指的是半原生半Web的混合类App，须要下载安装。
长处：
缺点：
Blink内核（Chrome、Oprea、Samsung Internet 等）和 Gecko内核（Firefox）和Microsoft Edge都已经实现了 PWA 所需的全部关键技术的支持。但IOS的Safari（Webkit）。眼下不支持PWA的API。
只是在2015年Webkit的5年计划里面，已经提及了Service Worker。相信非常快就能实现。
Google的技术在国内推进是非常痛苦的，Android尽管近年来在国内不错，但PWA在国内的发展有非常多困难。
总的来说，PWA还是非常不错的，尽管PWA在国内的体验眼下有一些限制，但相信PWA在国内的春天肯定会来的。
这里引用一下黄玄说过的一句话：
请不要让 web 再继续离我们远去，浏览器厂商们已经又一次走到了一起，而下一棒将是交到我们 web 应用开发人员的手上。乔布斯曾相信 web 应用才移动应用的未来，那就让我们用代码证明给这个世界看吧。
让我们的用户，也像我们这般热爱 web 吧”
Progressive Web Apps：站点内含有须要PWA应用，大家能够体验一下。
这一章做了一下PWA的相关介绍。后面章节会具体对PWA API进行具体说明。
博客名称：王乐平博客
CSDN博客地址：http://blog.csdn.net/lecepin
PWA(Progressive Web App)入门系列：（一）PWA简单介绍
标签：internet 国内 生活 保留 启动 blank 代码 管理 icon
原文地址：http://www.cnblogs.com/tlnshuju/p/7295002.html
