渐进式Web应用（PWA）入门教程（下）
上篇文章我们对渐进式Web应用（PWA）做了一些基本的介绍。 渐进式Web应用（PWA）入门教程（上） 在这一节中，我们将介绍PWA的原理是什么，它是如何开始工作的。 第一步：使用HTTPS 渐进式W
- --user-data-dir
- --unsafety-treat-insecure-origin-as-secure
- 应用程序名
- 描述
- 所有图片（包括主屏幕图标，启动屏幕页面和用的图片或者网页上用的图片）
{
"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",{
"src" : "/images/logo/logo192.png","sizes" : "192x192",{
"src" : "/images/logo/logo256.png","sizes" : "256x256",{
"src" : "/images/logo/logo512.png","sizes" : "512x512","type" : "image/png"
}
]
}
<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，大小和类型。
if ('serviceWorker' in navigator) {
// register service worker
navigator.serviceWorker.register('/service-worker.js');
}
Install事件
- 缓存名称（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'
];
// 安装静态资源
function installStaticFiles() {
return caches.open(CACHE)
.then(cache => {
// 缓存可选文件
cache.addAll(installFilesDesirable);
// 缓存必须文件
return cache.addAll(installFilesEssential);
});
}
// 应用安装
self.addEventListener('install',event => {
console.log('service worker: install');
// 缓存主要文件
event.waitUntil(
installStaticFiles()
.then(() => self.skipWaiting())
);
});
Activate 事件
// 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())
);
});
- 从缓存中取到的资源文件
- 如果第一步失败，资源文件将会从网络中使用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));
});
})
);
});
// 是否为图片地址?
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);
}
}
// cache name
const
CACHE = '::PWAsite',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);
});
})
});
URL隐藏
缓存过大
- 只缓存重要的页面，比如主页，联系人页面和最近浏览文章的页面。
- 不要缓存任何图片，视频和大文件
- 定时清理旧的缓存
- 提供一个“离线阅读”按钮，这样用户就可以选择需要缓存哪些内容了。
缓存刷新
Cache-Control: max-age=31536000
Cache-Control: must-revalidate,max-age=86400
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
服务热线 19970861797
