189 8069 5689
上篇文章我们对渐进式Web应用（PWA）做了一些基本的介绍。
创新互联-专业网站定制、快速模板网站建设、高性价比章丘网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式章丘网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖章丘地区。费用合理售后完善，十多年实体公司更值得信赖。
渐进式Web应用（PWA）入门教程（上）
在这一节中，我们将介绍PWA的原理是什么，它是如何开始工作的。
渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多，但使用HTTPS可以让您的网站变得更安全，HTTPS网站在Google上的排名也会更靠前。
由于Chrome浏览器会默认将localhost以及127.x.x.x地址视为测试地址，所以在本示例中您并不需要开启HTTPS。另外，出于调试目的，您可以在启动Chrome浏览器的时候使用以下参数来关闭其对网站HTTPS的检查：
· --user-data-dir
· --unsafety-treat-insecure-origin-as-secure
应用程序清单提供了和当前渐进式Web应用的相关信息，如：
· 应用程序名
· 描述
· 所有图片（包括主屏幕图标，启动屏幕页面和用的图片或者网页上用的图片）
本质上讲，程序清单是页面上用到的图标和主题等资源的元数据。
程序清单是一个位于您应用根目录的JSON文件。该JSON文件返回时必须添加Content-Type: application/manifest+json 或者 Content-Type: application/jsonHTTP头信息。程序清单的文件名不限，在本文的示例代码中为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"
}
]
}
程序清单文件建立完之后，你需要在每个页面上引用该文件：
以下属性在程序清单中经常使用，介绍说明如下：
· 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是位于应用程序根目录的一个个的JavaScript文件。
您需要在页面对应的JavaScript文件中注册该ServiceWorker：
if ('serviceWorker' in navigator) {// register service worker
navigator.serviceWorker.register('/service-worker.js');}
如果您不需要离线的相关功能，您可以只创建一个 /service-worker.js文件，这样用户就可以直接安装您的Web应用了！
Service Worker这个概念可能比较难懂，它其实是一个工作在其他线程中的标准的Worker，它不可以访问页面上的DOM元素，没有页面上的API，但是可以拦截所有页面上的网络请求，包括页面导航，请求资源，Ajax请求。
上面就是使用全站HTTPS的主要原因了。假设您没有在您的网站中使用HTTPS，一个第三方的脚本就可以从其他的域名注入他自己的ServiceWorker，然后篡改所有的请求——这无疑是非常危险的。
Service Worker会响应三个事件：install，activate和fetch。
该事件将在应用安装完成后触发。我们一般在这里使用Cache API缓存一些必要的文件。
首先，我们需要提供如下配置
1. 缓存名称（CACHE）以及版本（version）。应用可以有多个缓存存储，但是在使用时只会使用其中一个缓存存储。每当缓存存储有变化时，新的版本号将会指定到缓存存储中。新的缓存存储将会作为当前的缓存存储，之前的缓存存储将会被作废。
2. 一个离线的页面地址（offlineURL）：当用户访问了之前没有访问过的地址时，该页面将会显示。
3. 一个包含了所有必须文件的数组，包括保障页面正常功能的CSS和JavaScript。在本示例中，我还添加了主页和logo。当有不同的URL指向同一个资源时，你也可以将这些URL分别写到这个数组中。offlineURL将会加入到这个数组中。
4. 我们也可以将一些非必要的缓存文件（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())
);
});
这个事件会在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请求然后返回：
1. 从缓存中取到的资源文件
2. 如果第一步失败，资源文件将会从网络中使用Fetch API来获取（和service worker中的fetch事件无关）。获取到的资源将会加入到缓存中。
3. 如果第一步和第二步均失败，将会从缓存中返回正确的资源文件。
// 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(