PWA
全称：即渐进式Web应用（Progressive Web App）；简称PWA，
概念：PWA运用现代的Web API以及穿透的渐进式增强策略来创建跨平台Web应用程序，
PWA的特点
PWA是可被发现：可以通过搜索引擎或支持的应用商店中发现
易安装：可以出现在设备的主屏幕上
可链接：可以简单地通过URL分享
独立于网络：可以在离线状态或是在网速很差的情况下运行
渐进式：在老版本的浏览器仍旧可以使用，在新版本的浏览器上可以使用全部功能
可重用：无论何时有新的内容，都可以发送通知
响应性：在任何具有屏幕和浏览器的设备上都可以正常使用，如：手机，电脑，电视，冰箱，
安全：在用户、应用和服务器之间的连接是安全的，第三方无法访问你的敏感数据
PWA的优势
减少应用安装后的加载时间，可以通过Service Workers来进行缓存，以此来节省宽带和时间
当应用有可用的更新时，可以只更新发生改变的那部分内容，
外观和使用感受与原生平台更加融为一体
凭借系统通知和推送消息与用户保持连接，对用户产生更多的吸引力，并且提高转换效率
PWA的使用
创建基本网站
创建PWA文件夹（文件名随意），在文件内部创建index.html文件，代码如下
<!DOCTYPE html>
<htmllang="en-US"dir="ltr">
<head>
<metacharset="UTF-8"/>
<metaname="viewport"content="width=device-width,initial-scale=1"/>
<linkrel="shortcut icon"href="" target="_blank">https://c.s-microsoft.com/favicon.ico?v2"/>
<title>My Sample PWA</title>
</head>
<body>
<h1>My Sample PWA</h1>
</body>
</html>
在PWA文件内使用Node.js创建本地web服务器，
npx http-server
启动index.html文件查看是否正常启动
生成PWA项目
创建HTPS
使用渐进式Web应用平台的关键是需要使用到HTTPS，当PWA上线时必须要将其发布到HTTPS URL中，在开发阶段可以使用http://localhost:8080来生成PWA
创建Web应用清单
在PWA文件夹下创建manifest.json文件，代码如下
{
//应用的主要语言
"lang": "en-us",
//应用名称，
"name": "My Sample PWA",
//在空间不足时显示应用名称name
"short_name": "SamplePWA",
"description": "A sample PWA for testing purposes",
//操作系统启动你的应用时应导航到首选URL
"start_url": "/",
//应用样式表前启动应用的窗口的背景颜色
"background_color": "#2f3d58",
//应用的默认主题颜色，会影响操作系统显示网站
"theme_color": "#2f3d58",
//在支持设备上，这将定义应用的模式（如横向或纵向）
"orientation": "any",
//应用的外观，
"display": "standalone",
//由操作系统在不同上下文中使用的图标图形对象数据
"icons": [
{
//图标
"src": "/icon512.png",
//图标大小：注图标的大小要和sizes进行匹配，如不匹配将清单将会进行警告
"sizes": "512x512"
}
]
}
打开index.html文件，在<head>标签中增加以下代码
<linkrel="manifest"href="/manifest.json">
添加服务工作器
服务工作器是重点，用于开启离线支持、高级缓存、开启后台等等
在PWA文件夹中新增sw.js文件
constCACHE_NAME=`my-sample-app-cache-v1`;
// Use the install event to pre-cache all initial resources.
self.addEventListener('install', event=> {
event.waitUntil((async () => {
constcache=awaitcaches.open(CACHE_NAME);
cache.addAll(['/']);
})());
});
self.addEventListener('fetch', event=> {
event.respondWith((async () => {
constcache=awaitcaches.open(CACHE_NAME);
try {
// Try to fetch the resource from the network.
constfetchResponse=awaitfetch(event.request);
// Save the resource in the cache.
cache.put(event.request, fetchResponse.clone());
// And return it.
returnfetchResponse;
} catch (e) {
// Fetching didn't work get the resource from the cache.
constcachedResponse=awaitcache.match(event.request);
// And return it.
returncachedResponse;
}
})());
});
该sw.js文件将充当PWA服务工作器，会监听页面的事件，
打开index.html文件新增以下代码：引入服务工作器
<script>
if('serviceWorker'innavigator) {
navigator.serviceWorker.register('/sw.js', { scope: '/' });
}
</script>
当以上代码完成后打开浏览器查看辅助角色是否正在运行
浏览器控制台
在Application（应用程序工具）>Service Workers辅助角色处可以查询，如未显示请刷新页面
通过扩展缓存选择my-sample-app-cache-v1来查看服务辅助角色缓存
服务工作器生命周期流程
注册服务工作器
浏览器下载JavaScript文件，安装服务工作线程，并触发install事件
install事件中可以预先缓存任何重要和长期文件，如css文件，JavaScript文件，图标，离线页面等
self.addEventListener( "install", function( event ){
console.log( "WORKER: install event in progress." );
});
服务工作器被激活，触发activate事件
self.addEventListener( "activate", event=> {
console.log('WORKER: activate event in progress.');
});
当页面刷新或用户转到网站上的新页面时，服务工作线程已准备好运行，如果要在不等待的情况下运行服务工作线程，可使用self.skipWaiting() install
self.addEventListener( "install", event=> {
self.skipWaiting();
// …
});
在服务工作线程中的主要事件fetch，每次浏览器尝试访问服务工作器范围内的内容时，都会运行
PWA的劣势
浏览器对技术支持不够全面，不是每一款浏览器都能100%的支持所有的PWA
需要通过第三方库才能调用底层硬件；如摄像头
在ios系统中有50M缓存大小的限制
需要做引到才能让客户将网站快捷方式存储到桌面，有流失率
流畅度取决于网站的优化水平
在国内小程序使用比PWA多，PWA更多的是面向国外
5815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
