PWA - 整体（未完）

渐进式 Web 应用（PWA）

• 运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。

PWA 的优势

• 可被发现
• 易安装
  • manifest（https://developer.mozilla.org/zh-CN/docs/Web/Manifest）
• 可链接（通过url访问应用）
• 独立于网络
  • Service Workers（https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API）
  • Cache API（https://developer.mozilla.org/zh-CN/docs/Web/API/Cache）
  • Web Storage and IndexedDB
• 渐进式（新功能不被旧浏览器支持，退而求其次）
• 可重用（通知）
  • Push API（https://developer.mozilla.org/zh-CN/docs/Web/API/Push_API）
  • Notifications API（https://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API）
• 响应性（自适应所有终端）
• 安全的（原生应用用户不容易察觉伪造的应用）

PWA 介绍

• 桌面和移动设备上的所有主流浏览器都支持 service worker。
• Web App Manifest（安装），Push（通知接收），Notifications（通知显示）和 Add to Home Screen（添加到屏幕） 功能也得到了广泛的支持。
• 目前，Safari 对 Web App Manifest 和 Add to Home Screen 的支持有限，并且不支持 Web 推送通知。
• 应该遵循渐进增强规则 - 仅在支持它们的情况下使用提供此类增强功能的技术

PWA 结构

• 最流行的方法是“app shell”概念，它完全按照上述方式混合SSR（服务端渲染）和CSR（浏览器端渲染），此外还遵循“离线优先”方法
• 一种涉及Streams API（流）的新方法

App shell

• App shell意图尽快加载最小的用户界面，然后缓存它，以便在后续访问时可以离线使用，然后加载应用程序的所有内容。
• 通过service worker控制从服务器请求的内容以及从缓存中检索的内容
• 响应式网页设计也适用于渐进式网络应用程序，使用 viewport meta tag，CSS media queries，Flexbox，和 CSS Grid 等技术。
  • viewport meta tag：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">meta标签
  • CSS media queries：@media (max-width: 600px) {css媒体查询
  • Flexbox：弹性盒子布局
  • CSS Grid：CSS 网格布局

Streams API（实验功能）

• 流将你希望通过网络接收的资源拆分成小块，然后按位处理它。
• 浏览器在接收用于显示web页面的资源时就是这么处理的，例如：视频缓冲区和更多的内容可以逐渐播放，有时候随着内容的加载，你可以看到图像逐渐地显示。
• Streams API出现以前，流对于JavaScript是不可用的。以前，如果我们想要处理某种资源（如视频、文本文件等），我们必须下载完整的文件，等待它反序列化成适当的格式，然后在完整地接收到所有的内容后再进行处理。
• It provides fine-grained control — the stream can be started, chained with another stream, cancelled, checked for errors, and more.（它提供了细粒度的控制——流可以启动、与另一个流链接、取消、检查错误等等。）

Structure of our example application（示例）

• 需要重读实例

通过 Service workers 让 PWA 离线工作

Service workers 解释

• Service Workers是浏览器和网络之间的虚拟代理。解决了如何正确缓存网站资源并使其在用户设备离线时可用。
• 运行在一个与我们页面的 JavaScript 主线程独立的线程上
• 对 DOM 结构没有任何访问权限
• 可以在不同的上下文之间发送和接收信息
• 不仅仅提供离线功能，还提供包括处理通知，在单独的线程上执行繁重的计算等
• 可以控制网络请求，修改网络请求，返回缓存的自定义响应，或合成响应。
• 其内的 API 都是非阻塞（异步的）

安全

• Service Workers 只能在安全的上下文中执行（即 HTTPS ）
• 如果您想在将代码推送到生产环境之前先进行实验，则可以始终在本地主机上进行测试或设置 GitHub 页面 - 两者都支持HTTPS。

离线优先

• 无

PWA 渐进增强

• 无

js13kPWA应用程序中的 Service workers

注册 Service Worker

• 注意这里是navigator下的一个方法，用来注册 Service Worker

if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
};

Service Worker 的声明周期

• 注册完成后，sw.js 文件会自动下载，然后安装，最后激活。

安装

• In the install listener, we can initialize the cache and add files to it for offline use. Our js13kPWA app does exactly that.（在安装侦听器中，我们可以初始化缓存并向其中添加文件以供脱机使用。）
• The service worker does not install until the code inside waitUntil is executed. It returns a promise（在执行e.waitUntil内的代码前，service worker 不会被安装？它会返回一个 promise）
• caches is a special CacheStorage object available in the scope of the given Service Worker to enable saving data（caches 是一个CacheStorage 对象，用于保存数据，它是异步的）
• we open a cache with a given name, then add all the files our app uses to the cache, so they are available next time it loads (identified by request URL).（通过给定名称cacheName区分不同缓存库，通过请求URL标识不同缓存）

var cacheName = 'js13kPWA-v1';
var appShellFiles = [
  '/pwa-examples/js13kpwa/',
  '/pwa-examples/js13kpwa/index.html',
  '/pwa-examples/js13kpwa/app.js',
  '/pwa-examples/js13kpwa/style.css',
  '/pwa-examples/js13kpwa/fonts/graduate.eot',
  '/pwa-examples/js13kpwa/fonts/graduate.ttf',
  '/pwa-examples/js13kpwa/fonts/graduate.woff',
  '/pwa-examples/js13kpwa/favicon.ico',
  '/pwa-examples/js13kpwa/img/js13kgames.png',
  '/pwa-examples/js13kpwa/img/bg.png',
  '/pwa-examples/js13kpwa/icons/icon-32.png',
  '/pwa-examples/js13kpwa/icons/icon-64.png',
  '/pwa-examples/js13kpwa/icons/icon-96.png',
  '/pwa-examples/js13kpwa/icons/icon-128.png',
  '/pwa-examples/js13kpwa/icons/icon-168.png',
  '/pwa-examples/js13kpwa/icons/icon-192.png',
  '/pwa-examples/js13kpwa/icons/icon-256.png',
  '/pwa-examples/js13kpwa/icons/icon-512.png'
];

self.addEventListener('install', function(e) {
  console.log('[Service Worker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
          console.log('[Service Worker] Caching all: app shell and content');
      return cache.addAll(contentToCache);
    })
  );
});

Activation（激活）

• There is also an activate event, which is used in the same way as install. （还有一个activate事件，与install的使用方式相同。）
• This event is usually used to delete any files that are no longer necessary and clean up after the app in general. （此事件通常用于删除不再需要的任何文件，并在应用程序运行后进行清理。）

Responding to fetches 处理请求和缓存响应

• We also have a fetch event at our disposal, which fires every time an HTTP request is fired off from our app. （有一个fetch事件供我们使用，它在每次从我们的应用程序发出HTTP请求时都会触发。）
• The response can be anything we want: the requested file, its cached copy, or a piece of JavaScript code that will do something specific（响应可以是我们想要的任何东西：请求的文件、其缓存副本或一段可以执行特定操作的javascript代码。）
• The FetchEvent.respondWith method takes over control — this is the part that functions as a proxy server between the app and the network. （FetchEvent.respondWith接管了请求的控制权，这应用程序和服务器间充当代理服务器）

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(r) {
      console.log('[Service Worker] Fetching resource: '+e.request.url);
      return r || fetch(e.request).then(function(response) {
          return caches.open(cacheName).then(function(cache) {
              console.log('[Service Worker] Caching new resource: '+e.request.url);
              cache.put(e.request, response.clone());
              return response;
          });
      });
    })
  );
});

Updates（升级）

• how do you upgrade a Service Worker when a new version of the app containing new assets is available? The version number in the cache name is key to this:（通过修改cacheName来升级缓存库，建议缓存库名附带版本号来区分）
• When this updates to v2, we can then add all of our files (including our new files) to a new cache:（把旧版本的缓存写入新缓存）
• the available cache space in the browser is limited, so it is a good idea to clean up after ourselves.（浏览器中可用的缓存空间有限，因此最好自己清理。）

var cacheName = 'js13kPWA-v1';

Clearing the cache（清空缓存库）

• 删除不在当前版本的数据？

self.addEventListener('activate', function(e) {
  e.waitUntil(
    caches.keys().then(function(keyList) {
        return Promise.all(keyList.map(function(key) {
            if(cacheName.indexOf(key) === -1) {
              return caches.delete(key);
            }
        }));
    })
  );
});

Other use cases（其他示例）

• Performance-wise, you can prefetch resources that are not needed right now, but might be in the near future, so the app will be faster when you actually need those resources.（可以用来预加载数据）

Summary（总结）

• Service Workers are also used when dealing with push notifications（处理推送通知时也使用 Service Workers）

How to make PWAs installable（使PWA可安装）

Requirements（可安装的条件）

• To make the website installable, it needs the following things in place:（条件）
  • The website to be served from a secure (HTTPS) domain（从安全（https）域提供服务的网站）
  • A service worker registered, to make the app work offline (this is required only by Chrome for Android currently)（安卓下的谷歌浏览器需要service worker被注册才支持安装到桌面）

The manifest file