原文链接:https://www.jianshu.com/p/916a01670a23
1、什么是PWA
PWA，即Progressive Web App, 是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。PWA本质上依然是一个Web App
2.PWA中的一些技术
PWA本身其实是一个概念集合，它不是指某一项技术，而是通过一系列的Web技术与Web标准来优化Web App的安全、性能和体验。其中涉及到的一些技术概念包括了：
- Web App Manifest
- Service Worker
- Cache API 缓存
- Push&Notification 推送与通知
- Background Sync 后台同步
- 响应式设计
- ……
3.PWA的特性
- Web App可以被添加到桌面并有它自己的应用图标；
- 同时，从桌面开启时，会和原生app一样有它自己的“开屏图”；
- 更进一步的，这个Web App在的样子几乎和原生应用一样——没有浏览器的地址栏、工具条，似乎和Native App一样运行在一个独立的容器中。
4.Web App Manifest
manifest 的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。 —— MDN
{
"name": "图书搜索", //指定了Web App的名称
"short_name": "书查", //简称
"start_url": "/", //指定用户打开该Web App时加载的URL。相对URL会相对于manifest
"display": "standalone", //控制页面的显示模式，有四个值可以选择：fullscreen、standalone、minimal-ui、browser。minimal-ui比standalone多出一个地址栏
"background_color": "#333",
"description": "一个搜索图书的小WebAPP（基于豆瓣开放接口）",
"orientation": "portrait-primary", //控制Web App的方向。具体的值包括：any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary
"theme_color": "#5eace0", //定义应用程序的默认主题颜色
"icons": [{ //用来指定应用的桌面图标
"src": "img/icons/book-32.png",
"sizes": "32x32",
"type": "image/png"
}, {
"src": "img/icons/book-72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "img/icons/book-128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "img/icons/book-144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "img/icons/book-192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "img/icons/book-256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "img/icons/book-512.png",
"sizes": "512x512",
"type": "image/png"
}]
}
5.使用Manifest
<!-- 在index.html中添加以下meta标签 -->
<link rel="manifest" href="/manifest.json">
6.浏览器的兼容性
image.png
7.IOS(safari)中的处理方式
safari虽然不支持Web App Manifest，但是它有自己的一些head标签来定义相应的资源与展示形式：
-
：桌面图标，通过在head中添加<link rel="apple-touch-icon" href="your_icon.png">即可。其中还可以添加sizes属性，来指示系统使用在各类平台（iphone、ipad…）中使用最合适的图标
-
：应用的标题。注意，这里需要使用meta标签<meta name="apple-mobile-web-app-title" content="AppTitle">
-
：类似于manifest中的display的功能，通过设置为yes可以进入standalone模式，同样也是meta标签<meta name="apple-mobile-web-app-capable" content="yes">
-
：这会改变iOS移动设备的状态栏的样式，并且只有在standalone模式中才会有效果。<meta name="apple-mobile-web-app-status-bar-style" content="black">，不过在iPhoneX上black会导致状态栏不显示任何东西。
8. 在IE、edge中的处理方式
-
：指明了app的名称
-
：指明了“tile”的背景颜色
-
：不同大小的“tile”所使用的图标，包括这几种：msapplication-square70x70logo, msapplication-square150x150logo, msapplication-wide310x150logo, msapplication-square310x310logo
网友评论