江苏龙网

  1. 主页 > 生活百科 > >

如何把网站改成PWA( 二 )

PWA

  • icons —— 定义了 src URL, sizes和type的图片对象数组 。
    • 【如何把网站改成PWA】MDN提供了完整的manifest属性列表:Web App Manifest properties
    在开发者工具中的 Application tab 左边有 Manifest 选项 ， 你可以验证你的 manifest JSON 文件 ， 并提供了 “Add to homescreen” 。
    如何把网站改成PWA

    文章插图
     
    2020042301.png
     
    2.3 第三步：创建一个 Service WorkerService Worker 是拦截和响应你的网络请求的编程接口 。这是一个位于你根目录的一个单独的 JAVAscript 文件 。
    你的 js 文件（在示例代码中是 /js/main.js）可以检查是否支持 Service Worker ， 并且注册：
    if ('serviceWorker' in navigator) {// register service workernavigator.serviceWorker.register('/service-worker.js');}如果你不需要离线功能 ， 可以简单的创建一个空的 /service-worker.js文件 —— 用户会被提示安装你的 app 。
    Service Worker 很复杂 ， 你可以修改示例代码来达到自己的目的 。这是一个标准的 web worker ， 浏览器用一个单独的线程来下载和执行它 。它没有调用 DOM 和其他页面 api 的能力 ， 但他可以拦截网络请求 ， 包括页面切换 ， 静态资源下载 ， ajax请求所引起的网络请求 。
    这就是需要 HTTPS 的最主要的原因 。想象一下第三方代码可以拦截来自其他网站的 service worker ，  将是一个灾难 。
    service worker 主要有三个事件： install ， activate 和 fetch 。
    Install 事件这个事件在app被安装时触发 。它经常用来缓存必要的文件 。缓存通过 Cache API来实现 。
    首先 ， 我们来构造几个变量：
    1. 缓存名称（CACHE）和版本号（version） 。你的应用可以有多个缓存但是只能引用一个 。我们设置了版本号 ， 这样当我们有重大更新时 ， 我们可以更新缓存 ， 而忽略旧的缓存 。
    2. 一个离线页面的URL（offlineURL） 。当离线时用户试图访问之前未缓存的页面时 ， 这个页面会呈现给用户 。
    3. 一个拥有离线功能的页面必要文件的数组（installFilesEssential） 。这个数组应该包含静态资源 ， 比如 css 和 JavaScript 文件 ， 但我也把主页面（/）和图标文件写进去了 。如果主页面可以多个URL访问 ， 你应该把他们都写进去 ， 比如/和/index.html 。注意 ， offlineURL也要被写入这个数组 。
    4. 可选的 ， 描述文件数组（installFilesDesirable） 。这些文件都很会被下载 ， 但如果下载失败不会中止安装 。
    // configurationconstversion = '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 。当必要的文件都被缓存后才会生成返回值 。
    // install static assetsfunction installStaticFiles() {return caches.open(CACHE).then(cache => {// cache desirable filescache.addAll(installFilesDesirable);// cache essential filesreturn cache.addAll(installFilesEssential);});}最后 ， 我们添加install的事件监听函数 。waitUntil方法确保所有代码执行完毕后 ， service worker 才会执行 install 。执行 installStaticFiles()方法 ， 然后执行 self.skipWaiting()方法使service worker进入 active状态 。
    // application installationself.addEventListener('install', event => {console.log('service worker: install');// cache core filesevent.waitUntil(installStaticFiles().then(() => self.skipWaiting()));});Activate 事件当 install完成后 ，  service worker 进入active状态 ， 这个事件立刻执行 。你可能不需要实现这个事件监听 ， 但是示例代码在这里删除老旧的无用缓存文件：
    // clear old cachesfunction clearOldCaches() {return caches.keys().then(keylist => {return Promise.all(keylist.filter(key => key !== CACHE).map(key => caches.delete(key)));});}// application activatedself.addEventListener('activate', event => {console.log('service worker: activate');// delete old cachesevent.waitUntil(clearOldCaches().then(() => self.clients.claim()));});


    推荐阅读


    上一篇：菊花姜茶的功效与作用,菊花茶的功效与作用

    下一篇：干柠檬茶能减肥吗,玫瑰柠檬茶制作方法