渐进式Web应用（PWA）入门教程（下）

时间 2019-11-16

标签渐进 web 应用 pwa 入门教程栏目 HTML 繁體版

原文原文链接

上篇文章咱们对渐进式Web应用（PWA）作了一些基本的介绍。
渐进式Web应用（PWA）入门教程（上）
在这一节中，咱们将介绍PWA的原理是什么，它是如何开始工做的。
第一步：使用HTTPS 渐进式Web应用程序须要使用HTTPS链接。虽然使用HTTPS会让您服务器的开销变多，但使用HTTPS可让您的网站变得更安全，HTTPS网站在Google上的排名也会更靠前。
因为Chrome浏览器会默认将localhost以及127.x.x.x地址视为测试地址，因此在本示例中您并不须要开启HTTPS。另外，出于调试目的，您能够在启动Chrome浏览器的时候使用如下参数来关闭其对网站HTTPS的检查：
--user-data-dir
--unsafety-treat-insecure-origin-as-secure
第二步：建立一个应用程序清单（Manifest）应用程序清单提供了和当前渐进式Web应用的相关信息，如：
应用程序名
描述
全部图片（包括主屏幕图标，启动屏幕页面和用的图片或者网页上用的图片）
本质上讲，程序清单是页面上用到的图标和主题等资源的元数据。
程序清单是一个位于您应用根目录的JSON文件。该JSON文件返回时必须添加php

Content-Type: application/manifest+json

或者 css

Content-Type: application/json

HTTP头信息。程序清单的文件名不限，在本文的示例代码中为html

manifest.json

：前端

{
  "name"              : "PWA Website",
  "short_name"        : "PWA",
  "description"       : "An example PWA website",
  "start_url"         : "/",
  "display"           : "standalone",
  "orientation"       : "any",
  "background_color"  : "#ACE",
  "theme_color"       : "#ACE",
  "icons": [
    {
      "src"           : "/images/logo/logo072.png",
      "sizes"         : "72x72",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo152.png",
      "sizes"         : "152x152",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo192.png",
      "sizes"         : "192x192",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo256.png",
      "sizes"         : "256x256",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo512.png",
      "sizes"         : "512x512",
      "type"          : "image/png"
    }
  ]
}

程序清单文件创建完以后，你须要在每一个页面上引用该文件：web

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

如下属性在程序清单中常用，介绍说明以下：
name: 用户看到的应用名称
short_name: 应用短名称。当显示应用名称的地方不够时，将使用该名称。
description: 应用描述。
start_url: 应用起始路径，相对路径，默认为/。
scope: URL范围。好比：若是您将“/app/”设置为URL范围时，这个应用就会一直在这个目录中。
background_color: 欢迎页面的背景颜色和浏览器的背景颜色（可选）
theme_color: 应用的主题颜色，通常都会和背景颜色同样。这个设置决定了应用如何显示。
orientation: 优先旋转方向，可选的值有：any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, and portrait-secondary
display: 显示方式——fullscreen（无Chrome），standalone（和原生应用同样），minimal-ui（最小的一套UI控件集）或者browser（最古老的使用浏览器标签显示）
icons: 一个包含全部图片的数组。该数组中每一个元素包含了图片的URL，大小和类型。
第三步：建立一个 Service Worker Service Worker 是一个可编程的服务器代理，它能够拦截或者响应网络请求。Service Worker 是位于应用程序根目录的一个个的JavaScript文件。
您须要在页面对应的JavaScript文件中注册该ServiceWorker：编程

if ('serviceWorker' in navigator) {
  // register service worker
  navigator.serviceWorker.register('/service-worker.js');
}

若是您不须要离线的相关功能，您能够只建立一个 json

/service-worker.js

文件，这样用户就能够直接安装您的Web应用了！
Service Worker这个概念可能比较难懂，它实际上是一个工做在其余线程中的标准的Worker，它不能够访问页面上的DOM元素，没有页面上的API，可是能够拦截全部页面上的网络请求，包括页面导航，请求资源，Ajax请求。
上面就是使用全站HTTPS的主要缘由了。假设您没有在您的网站中使用HTTPS，一个第三方的脚本就能够从其余的域名注入他本身的ServiceWorker，而后篡改全部的请求——这无疑是很是危险的。
Service Worker 会响应三个事件：install，activate和fetch。
Install事件该事件将在应用安装完成后触发。咱们通常在这里使用Cache API缓存一些必要的文件。
首先，咱们须要提供以下配置
缓存名称（CACHE）以及版本（version）。应用能够有多个缓存存储，可是在使用时只会使用其中一个缓存存储。每当缓存存储有变化时，新的版本号将会指定到缓存存储中。新的缓存存储将会做为当前的缓存存储，以前的缓存存储将会被做废。
一个离线的页面地址（offlineURL）：当用户访问了以前没有访问过的地址时，该页面将会显示。
一个包含了全部必须文件的数组，包括保障页面正常功能的CSS和JavaScript。在本示例中，我还添加了主页和logo。当有不一样的URL指向同一个资源时，你也能够将这些URL分别写到这个数组中。offlineURL将会加入到这个数组中。
咱们也能够将一些非必要的缓存文件（installFilesDesirable）。这些文件在安装过程当中将会被下载，但若是下载失败，不会触发安装失败。数组

// 配置文件
const
  version = '1.0.0',
  CACHE = version + '::PWAsite',
  offlineURL = '/offline/',
  installFilesEssential = [
    '/',
    '/manifest.json',
    '/css/styles.css',
    '/js/main.js',
    '/js/offlinepage.js',
    '/images/logo/logo152.png'
  ].concat(offlineURL),
  installFilesDesirable = [
    '/favicon.ico',
    '/images/logo/logo016.png',
    '/images/hero/power-pv.jpg',
    '/images/hero/power-lo.jpg',
    '/images/hero/power-hi.jpg'
  ];

installStaticFiles()

方法使用基于Promise的方式使用Cache API将文件存储到缓存中。浏览器

// 安装静态资源
function installStaticFiles() {
 
  return caches.open(CACHE)
    .then(cache => {
 
      // 缓存可选文件
      cache.addAll(installFilesDesirable);
 
      // 缓存必须文件
      return cache.addAll(installFilesEssential);
 
    });
 
}

最后，咱们添加一个缓存

install

的事件监听器。

waitUntil

方法保证了service worker不会安装直到其相关的代码被执行。这里它会执行

installStaticFiles()

方法，而后

self.skipWaiting()

方法来激活service worker：

// 应用安装
self.addEventListener('install', event => {
 
  console.log('service worker: install');
 
  // 缓存主要文件
  event.waitUntil(
    installStaticFiles()
    .then(() => self.skipWaiting())
  );
 
});

Activate 事件这个事件会在service worker被激活时发生。你可能不须要这个事件，可是在示例代码中，咱们在该事件发生时将老的缓存所有清理掉了：

// clear old caches
function clearOldCaches() {
 
  return caches.keys()
    .then(keylist => {
 
      return Promise.all(
        keylist
          .filter(key => key !== CACHE)
          .map(key => caches.delete(key))
      );
 
    });
 
}
 
// application activated
self.addEventListener('activate', event => {
 
  console.log('service worker: activate');
 
    // delete old caches
  event.waitUntil(
    clearOldCaches()
    .then(() => self.clients.claim())
    );
 
});

注意

self.clients.claim()

执行时将会把当前service worker做为被激活的worker。
Fetch 事件该事件将会在网络开始请求时发起。该事件处理函数中，咱们可使用

respondWith()

方法来劫持HTTP的GET请求而后返回：
从缓存中取到的资源文件
若是第一步失败，资源文件将会从网络中使用Fetch API来获取（和service worker中的fetch事件无关）。获取到的资源将会加入到缓存中。
若是第一步和第二步均失败，将会从缓存中返回正确的资源文件。

// application fetch network data
self.addEventListener('fetch', event => {
 
  // abandon non-GET requests
  if (event.request.method !== 'GET') return;
 
  let url = event.request.url;
 
  event.respondWith(
 
    caches.open(CACHE)
      .then(cache => {
 
        return cache.match(event.request)
          .then(response => {
 
            if (response) {
              // return cached file
              console.log('cache fetch: ' + url);
              return response;
            }
 
            // make network request
            return fetch(event.request)
              .then(newreq => {
 
                console.log('network fetch: ' + url);
                if (newreq.ok) cache.put(event.request, newreq.clone());
                return newreq;
 
              })
              // app is offline
              .catch(() => offlineAsset(url));
 
          });
 
      })
 
  );
 
});

offlineAsset(url)

方法中使用了一些helper方法来返回正确的数据：

// 是否为图片地址?
let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f);
function isImage(url) {
 
  return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false);
 
}
 
 
// return 返回离线资源
function offlineAsset(url) {
 
  if (isImage(url)) {
 
    // 返回图片
    return new Response(
      '<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>',
      { headers: {
        'Content-Type': 'image/svg+xml',
        'Cache-Control': 'no-store'
      }}
    );
 
  }
  else {
 
    // return page
    return caches.match(offlineURL);
 
  }
 
}

offlineAsset()

方法检查请求是否为一个图片，而后返回一个带有“offline”文字的SVG文件。其余请求将会返回 offlineURL 页面。
Chrome开发者工具中的ServiceWorker部分提供了关于当前页面worker的信息。其中会显示worker中发生的错误，还能够强制刷新，也可让浏览器进入离线模式。
Cache Storage 部分例举了当前全部已经缓存的资源。你能够在缓存须要更新的时候点击refresh按钮。
第四步：建立可用的离线页面离线页面能够是静态的HTML，通常用于提醒用户当前请求的页面暂时没法使用。然而，咱们能够提供一些能够阅读的页面连接。
Cache API能够在main.js中使用。然而，该API使用Promise，在不支持Promise的浏览器中会失败，全部的JavaScript执行会所以受到影响。为了不这种状况，在访问/js/offlinepage.js的时候咱们添加了一段代码来检查当前是否在离线环境中：

/js/offlinepage.js

中以版本号为名称保存了最近的缓存，获取全部URL，删除不是页面的URL，将这些URL排序而后将全部缓存的URL展现在页面上：

// cache name
const
  CACHE = '::PWAsite',
  offlineURL = '/offline/',
  list = document.getElementById('cachedpagelist');
 
// fetch all caches
window.caches.keys()
  .then(cacheList => {
 
    // find caches by and order by most recent
    cacheList = cacheList
      .filter(cName => cName.includes(CACHE))
      .sort((a, b) => a - b);
 
    // open first cache
    caches.open(cacheList[0])
      .then(cache => {
 
        // fetch cached pages
        cache.keys()
          .then(reqList => {
 
            let frag = document.createDocumentFragment();
 
            reqList
              .map(req => req.url)
              .filter(req => (req.endsWith('/') || req.endsWith('.html')) && !req.endsWith(offlineURL))
              .sort()
              .forEach(req => {
                let
                  li = document.createElement('li'),
                  a = li.appendChild(document.createElement('a'));
                  a.setAttribute('href', req);
                  a.textContent = a.pathname;
                  frag.appendChild(li);
              });
 
            if (list) list.appendChild(frag);
 
          });
 
      })
 
  });

开发者工具 Chrome浏览器提供了一系列的工具来帮助您来调试Service Worker，日志也会直接显示在控制台上。
您最好使用匿名模式来进行开发工做，这样能够排除缓存对开发的干扰。
最后，Chrome的Lighthouse扩展也能够为您的渐进式Web应用提供一些改进信息。
渐进式Web应用的要点渐进式Web应用是一种新的技术，因此使用的时候必定要当心。也就是说，渐进式Web应用可让您的网站在几个小时内获得改善，而且在不支持渐进式Web应用的浏览器上也不会影响网站的显示。
可是咱们须要考虑如下几点：
URL隐藏当您的应用就是一个单URL的应用程序时（好比游戏），我建议您隐藏地址栏。除此以外的状况我并不建议您隐藏地址栏。在Manifest中，

display: minimal-ui

或者

display: browser

对于大多数状况来讲足够用了。
缓存过大你不能将您网站中的全部内容缓存下来。对于小一些的网站来讲缓存全部内容并非一个问题，可是若是一个网站包含了上千个页面呢？很明显不是全部人对网站中的全部内容都感兴趣。存储是有限制的，若是您将全部访问过的页面都缓存下来的话，缓存大小会增加额很快。
你能够这样制定你的缓存策略：
只缓存重要的页面，好比主页，联系人页面和最近浏览文章的页面。
不要缓存任何图片，视频和大文件
定时清理旧的缓存
提供一个“离线阅读”按钮，这样用户就能够选择须要缓存哪些内容了。
缓存刷新示例代码中在发起请求以前会先查询缓存。当用户处于离线状态时，这很好，可是若是用户处于在线状态，那他只会浏览到比较老旧的页面。
各类资源好比图片和视频不会改变，因此通常都把这些静态资源设置为长期缓存。这些资源能够直接缓存一年（31,536,000秒）。在HTTP Header中，就是：

Cache-Control: max-age=31536000

页面，CSS和脚本文件可能变化的更频繁一些，因此你能够设置一个比较小的缓存超时时间（24小时），并确保在用户网络链接恢复时再次从服务器请求：

Cache-Control: must-revalidate, max-age=86400

你也能够在每次网站发布时，经过更名的方式强制浏览器从新请求资源。
小结至此，相信你若是按照本文一步一步操做下来，你也能够很快把本身的Web应用转为PWA。在转为了PWA后，若是有使用知足 PWA 模型的前端控件的需求，你能够试试纯前端表格控件SpreadJS，适用于 .NET、Java 和移动端等平台的表格控件必定不会令你失望的。
原文连接：https://www.sitepoint.com/ret...
转载于猿2048:➫《渐进式Web应用（PWA）入门教程（下）》