关于渐进式 Web 应用，你应该知道的一切

什么是渐进式 Web 应用

1. 安全 – 通过 HTTPS 来提供服务来防止网络窥探，保证内容不被篡改。
2. 渐进式 – 能够让每一位用户使用，无论用户使用什么浏览器，因为它是始终以渐进增强为原则
3. 响应式 – 适应任何环境：桌面电脑、智能手机、平板电脑，或者其他设备。
4. 不依赖网络连接 – 通过用 service workers 增强，可以在离线或者低质量网络下工作
5. 类原生应用 – 有像原生应用般的交互和导航给用户原生应用般的体验，因为它是建立在 app shell model 上的。
6. 持续更新 – 受益于 service worker 的更新进程，应用能够始终保持更新。
7. 可发现 – 可识别为“应用程序”，是得益于 W3C manifests 元数据和 service worker 的登记，让搜索引擎能够找到 web 应用。
8. 可再次访问 – 通过推送通知等特性让用户再次访问变得容易。
9. 可安装 – 允许用户保留对他们有用的应用在主屏幕上，不需要通过应用商店。
10. 可链接 – 通过 URL 可以轻松分享应用，不用复杂的安装即可运行。

渐进式 Web 应用不是什么

1. 安全

2. 渐进式

navigator.getMedia = ( 
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia
);

if (!navigator.getMedia) {
    displayErrorMessage("你的浏览器不支持 navigator.getUserMedia 接口。");
}
else {
    // 使用 Camera API
}

3. 响应式

4. 独立于网络连接

// 安装 service worker.
this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            // 如果这些资源中有任何资源不能保存，缓存就会失败
            return cache.addAll([
                // 路径是相对于缓存来源，而不是应用程序的目录。
                '/pwa-photobooth/',
                '/pwa-photobooth/index.html',
                '/pwa-photobooth/assets/css/styles.css',
                '/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2',
                '/pwa-photobooth/assets/js/script.js',
                '/pwa-photobooth/assets/icons/ic-face.png',
                '/pwa-photobooth/assets/icons/ic-face-large.png',
                '/pwa-photobooth/manifest.json'
            ])
            .then(function() {
                console.log('成功! App 离线可用!');
            })
        })
    );
});

// 定义一个资源被请求时候会发生什么
// 对于我们的应用，我们以缓存优先的方式
self.addEventListener('fetch', function(event) {
    event.respondWith(
        // 试着从缓存中获取.
        caches.match(event.request)
        .then(function(response) {
            // 如果资源没有存储在缓存中，就回退到网络
            return response || fetch(event.request);
        })
    );
});

// 注册 Service Worker.

if ('serviceWorker' in navigator) {
    // 路径是相对于缓存来源，而不是应用程序的目录.
    navigator.serviceWorker.register('/pwa-photobooth/sw.js')
    .then(function(reg) {
        console.log('Registration succeeded. Scope is ' + reg.scope);
    })
    .catch(function(error) {
        console.error('Registration failed with ' + error);
    });
}

5. 类原生引用

6. 持续更新

this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1.0.1').then(function(cache) {
            // ...
        })
    );
}); 

7. 可发现

{
  "name": "Progressive Web App: PhotoBooth",
  "short_name": "PhotoBooth",
  "description": "Simple Progressive Web App for taking selfies.",
  "icons": [{
      "src": "assets/icons/ic-face.png",
      "type": "image/png",
      "sizes": "72x72"
    }, {
      "src": "assets/icons/ic-face-large.png",
      "type": "image/png",
      "sizes": "144x144 256x256" 
    }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#fff",
  "orientation": "portrait"
}

• Shortname – 这是应用保存到主屏幕上时的名称。
• Icons – 不同分辨率的图标数组。
• Display – 定义应用打开的方式。我们选择的是独立（standalone)，所以启动 PhoneBooth 时，会以全屏窗口出现，没有浏览器导航栏或者菜单。它还会被看作为多任务中的一个单独的应用。

<link rel="manifest" href="manifest.json">

<meta name=”apple-mobile-web-app-capable” content=”yes”>

8. 可再次访问

• Google 开发者网站上的《推送通知：及时、相关和准确》 – 这里.
• Google 开发者网站上的《开放 Web 上的推送通知 – 这里.
• MDN 上的《使用 Push API》 – 这里.
• Push.js 库，提供处理推送通知的更清洁的 API – 这里.

9. 可安装

1. 有一个有效的 Web Manifest。
2. 安装有有效的 Service Worker。
3. 通过 HTTPS 访问应用程序。

10. 可链接

总结