PWA的概念以及Web App Manifest

原文链接: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