PWA官网https://developers.google.com/web/progressive-web-apps
简介
PWA(Progressive Web Apps )渐进式web应用，具有Reliable（可靠的）、Fast（快速的）、Engaging（可参与的）
Reliable： 从用户的主屏幕启动时，无论网络状态如何，服务工作人员都可以立即加载Progressive Web App。
使用JavaScript编写的服务工作者就像客户端代理，可以控制缓存以及如何响应资源请求。通过预先缓存关键资源，您可以消除对网络的依赖，确保为您的用户提供即时可靠的体验。
Fast：如果加载时间超过3秒，53％的用户将放弃网站！一旦加载，用户就会期望它们快速 - 没有janky滚动或响应速度慢的界面。
Engaging：Progressive Web Apps可以安装并在用户的 主屏幕上显示，无需应用商店。它们通过Web应用程序清单文件提供的帮助提供身临其境的全屏体验，甚至可以通过Web 推送通知重新吸引用户 。
Web App Manifest允许您控制应用程序的显示方式及其启动方式。您可以指定主屏幕图标，启动应用程序时要加载的页面，屏幕方向，甚至是否显示浏览器镶边。
主要技术
- Service Worker
- Web App Manifest
- Push Notification
Service Worker
Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源。你可以完全控制应用在特定情形（最常见的情形是网络不可用）下的表现。
Service worker运行在worker上下文，因此它不能访问DOM。相对于驱动应用的主JavaScript线程，它运行在其他线程中，所以不会造成阻塞。它设计为完全异步，同步API（如XHR和localStorage）不能在service worker中使用。
出于安全考量，Service workers只能由HTTPS承载，毕竟修改网络请求的能力暴露给中间人攻击会非常危险。在Firefox浏览器的用户隐私模式，Service Worker不可用。
一些API及更多的描述可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API
Web App Manifest
Web应用程序清单在一个JSON文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。manifest 的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。
Web应用程序清单是被称为渐进式Web应用程序(PWA)的Web技术集合的一部分, 它们是可以安装到设备的主屏幕的网络应用程序，而不需要用户通过应用商店，伴随着其他功能, 比如离线可用和接收推送通知。
具体用法：
创建一个文件manifest.json
在html文件中的head中加上
<link rel="manifest" href="manifest.json">
在manifest.json文件中写入
{
"lang":"en-zh",
"name":"我的首个PWA",
"short_name":"我的PWA",
"description":"描述我的PWA",
"start_url":"/pwa_demo01",
"display":"standalone",
"background_color":"#fff",
"theme_color":"#9c67fc",
"icons":[
{
"src":"pwaIcon.jpg",
"sizes":"1x1",
"type":"image/png"
}
]
}
lang : 语言类型（name、short_name）
name : 名称
short_name : 当位置不够显示name的时候替代的缩写名称
start_url : 添加到主屏幕后，启动PWA进入的url
display : 显示模式，fullscreen（全屏）、standalone（包括具有不同的窗口，在应用程序启动器中拥有自己的图标等，可用theme_color设置状态栏颜色）、minimal-ui（显示浏览器地址栏）、browser（默认设置，像网页那样打开）
background_color : 启动pwa时的过渡页面的背景
description : 对pwa的描述
icons : 添加至主屏幕时显示的图标，src（图标路径）、sizes（图标适用的大小，在我手机上添加到主屏幕时，显示的是1x1）、type（图片类型）
更多配置项请移步 https://developer.mozilla.org/zh-CN/docs/Web/Manifest 参考
Push Notification
Push Notification即消息推送
网友评论