您的位置:澳门402永利com > 前端技术 > 10分钟玩转PWA,入门教程

10分钟玩转PWA,入门教程

发布时间:2019-10-24 22:04编辑:前端技术浏览(163)

    渐进式Web应用(PWA)入门教程(下)

    2018/05/25 · 基本功技能 · PWA

    原作出处: Craig Buckler   译文出处:蒲陶城控件   

    上篇随笔大家对渐进式Web应用(PWA)做了一些为主的介绍。

    渐进式Web应用(PWA)入门教程(上)

    在这里大器晚成节中,大家将介绍PWA的规律是怎么样,它是哪些最初专业的。

    关于PWA

    PWA(Progressive Web App), 即渐进式web应用。PWA本质上是web应用,目标是经过多项新技术,在日喀则、质量、体验等方面给客商原生应用的经验。况兼无需像原生应用那样繁琐的下载、安装、晋级等操作。

    此间表达下概念中的“渐进式”,意思是那一个web应用还在不断地开垦进取中。因为日前来说,PWA尚未曾成熟到一蹴即至的水准,想在张掖、质量、体验上达到规定的规范原生应用的作用依旧有大多的晋升空间的。一方面是创设PWA的基金难题,另一面是时下各大浏览器、安卓和IOS系统对于PWA的协助和宽容性还或许有待抓好。

    本文小编将从网址缓存、http诉求拦截、推送到主屏等效率,结合实例操作,一步步引领我们相当的慢玩转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

    Service Worker

    ServiceWorker是PWA的宗旨本事,它亦可为web应用提供离线缓存作用,当然不仅仅如此,上边列举了风度翩翩部分ServiceWorker的风味:

    据书上说HTTPS 情况,那是创设PWA的硬性前提。(LAMP意况网址进级HTTPS施工方案)

    是一个独立的 worker 线程,独立于当下网页进度,有和睦独立的 worker context

    可阻止HTTP央求和响应,可缓存文件,缓存的文本能够在网络离线状态时取到

    能向顾客端推送音信

    无法一向操作 DOM

    异步完成,内部大都以透过 Promise 达成

    其次步:创设一个应用程序清单(Manifest)

    应用程序清单提供了和当下渐进式Web应用的连带新闻,如:

    • 应用程序名
    • 描述
    • 持有图片(满含主显示器Logo,运转显示屏页面和用的图纸或许网页上用的图纸)

    本质上讲,程序清单是页面上用到的Logo和核心等能源的元数据。

    程序项目清单是二个放在您使用根目录的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" } ] }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    {
      "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"
        }
      ]
    }

    程序清单文件建构完之后,你必要在种种页面上引用该文件:

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

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

    以下属性在程序清单中临时接纳,介绍表达如下:

    • name: 用户观望的利用名称
    • short_name: 应用短名称。当展现选取名称之处远远不够时,将接收该名称。
    • description: 选拔描述。
    • start_url: 应用起初路径,相对路径,默感到/。
    • scope: U途乐L范围。举例:倘使您将“/app/”设置为U福睿斯L范围时,那几个动用就能平素在这里个目录中。
    • 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: 一个包含全部图片的数组。该数组中各种成分满含了图片的UPRADOL,大小和类型。

    Service Worker生命周期

    serviceworker的采取流程能够简简单单总计为注册--安装--激活。

    登记其实正是报告浏览器serviceworkerJS文件寄放在哪些岗位,然后浏览器下载、深入深入分析、实施该公文,进而运转安装。这里作者创制三个app.js文件,注册代码如下,将该文件在网址的head标签里引进。

    if ('serviceWorker' in navigator) {

    window.addEventListener('load', function () {

    navigator.serviceWorker.register

    .then(function (registration) {

    // 注册成功

    console.log('ServiceWorker registration successful with scope: ', registration.scope);

    })

    .catch(function {

    // 注册失利:(

    console.log('ServiceWorker registration failed: ', err);

    });

    });

    }

    当实施serviceworkerJS文件时,首先接触的是install事件,举行安装。安装的经过正是将钦定的一些静态财富进行离线缓存。下边是本身的sw.js文件中的安装代码:

    var CACHE_VERSION = 'sw_v8';

    var CACHE_FILES = [

    '/js/jquery/min.js',

    '/js/zui/min.js',

    '/js/chanzhi.js',

    ];

    self.addEventListener('install', function {

    event.waitUntil(

    caches.open(CACHE_VERSION)

    .then(cache => cache.addAll(CACHE_FILES)

    ));

    });

    当安装成功后,serviceworker就能够激活,那时就能够管理 activate 事件回调 (提供了改善缓存战略的时机)。并得以管理作用性的事件 fetch 、sync 、push 。

    self.addEventListener('activate', function {

    event.waitUntil(

    caches.keys().then(function{

    return Promise.all(keys.map(function{

    if(key !== CACHE_VERSION){

    return caches.delete;

    }

    }));

    })

    );

    });

    其三步:创制叁个 Service Worker

    Service Worker 是三个可编制程序的服务器代理,它能够阻止或许响应互联网央求。Service Worker 是位于应用程序根目录的贰个个的JavaScript文件。

    您供给在页面前蒙受应的JavaScript文件中登记该ServiceWorker:

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

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

    若是您不需求离线的连带功效,您能够只开创一个 /service-worker.js文本,那样客商就能够直接设置您的Web应用了!

    ServiceWorker那几个概念可能比较难懂,它实乃一个办事在别的线程中的标准的Worker,它不得以访问页面上的DOM成分,未有页面上的API,可是能够阻止全部页面上的网络央浼,包罗页面导航,须要能源,Ajax诉求。

    地方正是接纳全站HTTPS的最主要缘由了。假若你未有在你的网站中运用HTTPS,一个第三方的台本就足以从此外的域名注入他和煦的ServiceWorker,然后点窜全部的乞请——这没有疑问是极度危急的。

    Service Worker 会响应八个事件:install,activate和fetch。

    serviceworker的缓存成效

    安装时,serviceworker将我们钦命的静态能源进行缓存,你或许会问,要是是实时的动态内容如何是好,大家不容许预先将全数的文书能源提前线指挥部定好,让serviceworker缓存。那就要涉及serviceworker的阻碍HTTP央求响应的性状了。

    serviceworker拦截http央求,首先去反省伏乞的能源在缓存中是还是不是存在,假若存在,则平素从缓存中调用,况且不怕是无网络状态下,serviceworker也能调用缓存中的财富。假设缓存中从未诉求的财富,则通过网络去服务器上搜求,並且在找到并响适时,serviceworker会将其存入缓存中,以备下一次再央求时直接从缓存中调用。

    图片 1serviceworker缓存流程

    serviceworker文件中fetch事件代码如下:

    self.addEventListener('fetch', function {

    event.respondWith(

    caches.match(event.request).then(function{

    if{

    return response;

    }

    var requestToCache = event.request.clone();

    return fetch(requestToCache).then(

    function{

    if(!response || response.status !== 200){

    return response;

    }

    var responseToCache = response.clone();

    caches.open(CACHE_VERSION)

    .then(function{

    cache.put(requestToCache, responseToCache);

    });

    return response;

    }

    );

    })

    );

    });

    在网址前台通过浏览器开荒者工具,大家得以看下从缓存中调用能源的效能:

    图片 2serviceworker缓存调用图片 3缓存文件

    本身这里操作演示用的是Google浏览器,上面是各大浏览器对于serviceworker的协助情形:

    图片 4serviceworker浏览器扶植景况

    Install事件

    该事件将在选择设置到位后触发。大家常常在这里处运用Cache API缓存一些必备的公文。

    率先,大家需求提供如下配置

    1. 缓存名称(CACHE)以致版本(version)。应用能够有四个缓存存款和储蓄,不过在使用时只会利用个中三个缓存存款和储蓄。每当缓存存款和储蓄有浮动时,新的版本号将会钦点到缓存存储中。新的缓存存款和储蓄将会作为当下的缓存存款和储蓄,在此之前的缓存存款和储蓄将会被作废。
    2. 一个离线的页面地址(offlineUENVISIONL):当客户访问了早先未曾访谈过之处时,该页面将博览会示。
    3. 叁个包括了装有必须文件的数组,饱含保持页面正常机能的CSS和JavaScript。在本示例中,小编还增加了主页和logo。当有差别的U君越L指向同三个财富时,你也得以将那么些UGranTurismoL分别写到那么些数组中。offlineUWranglerL将会步向到这些数组中。
    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' ];

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // 配置文件
    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); }); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 安装静态资源
    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.add伊夫ntListener('install', event => { console.log('service worker: install'); // 缓存首要文件 event.waitUntil( installStaticFiles() .then(() => self.skipWaiting()) ); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 应用安装
    self.addEventListener('install', event => {
      console.log('service worker: install');
      // 缓存主要文件
      event.waitUntil(
        installStaticFiles()
        .then(() => self.skipWaiting())
      );
    });

    加上到主屏

    PWA援助将web应用在主屏桌面上增添一个飞快方式,以有益顾客急迅访谈,同一时候提高web应用重复访谈的概率。你或者会说,未来运动端上的浏览器成效列表里日常都提供了“增添到桌面”的效应呀,可是PWA与浏览器自带的增进到桌面包车型大巴完成情势各异。

    PWA没有需求客户特意去功用列表中选择那个意义按键,而是在客商访谈web应用时,直接在分界面中唤醒贰个丰裕到主屏桌面的横幅,从web应用角度来说,那实则正是逆流而上与消沉的界别。

    PWA达成该功用特别轻巧,只须要八个manifest.json文件,文件中顾客能够自定义应用的运营页面、模板颜色、图标等内容。上边是笔者的manifest.json文件设置,大家可作仿效:

    {

    "short_name": "蝉知财富站",

    "name": "蝉知能源站",

    "icons": [

    {

    "src": "chanzhiicon.png",

    "type": "image/png",

    "sizes": "48x48"

    },

    {

    "src": "192.png",

    "type": "image/png",

    "sizes": "192x192"

    },

    {

    "src": "512.png",

    "type": "image/png",

    "sizes": "512x512"

    },

    {

    "src": "144.png",

    "type": "image/png",

    "sizes": "144x144"

    }

    ],

    "start_url": "/index.html",

    "display": "standalone",

    "background_color": "#2196F3",

    "orientation": "landscape",

    "theme_color": "#2196F3"

    }

    亟需提示的是,前段时间移动端IOS系统的帮助并倒霉,安卓手提式有线电话机上须接受57本子以上的Google浏览器能够协理该效能,下边是自己在安卓手机上的操作演示:

    图片 5累积到主屏

    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()) ); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    // 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)); }); }) ); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    // 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=" 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); } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    // 是否为图片地址?
    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文件。其余哀告将会回来 offlineUGL450L 页面。

    Chrome开辟者工具中的ServiceWorker部分提供了关于当前页面worker的音信。个中展览会示worker中生出的不当,还足以强制刷新,也能够让浏览器步入离线形式。

    Cache Storage 部分例举了脚下颇有曾经缓存的能源。你能够在缓存必要更新的时候点击refresh按键。

    小结

    PWA技能正被广大集团及开辟者们关切,即便眼前各配备的援助合作有待坚实,但这几个都正在不断的更正升高。笔者也信赖在不久的前日,PWA本领会日趋遍布推广,为分布公司和客商带来便利。本文和豪门一块享用了PWA的有关技术与实例操作,前边还或者会就音信推送、数据同步等职能做尤其索求沟通。假如我们在就学PWA的过程中相遇别的难点,应接一同谈谈交换。

    第四步:创制可用的离线页面

    离线页面可以是静态的HTML,通常用于提示客商日前乞求的页面一时不能利用。然则,大家可以提供部分足以阅读的页面链接。

    Cache API能够在main.js中运用。然则,该API使用Promise,在不扶持Promise的浏览器中会失败,全部的JavaScript实施会因而蒙受震慑。为了防止这种景色,在拜会/js/offlinepage.js的时候大家加多了生龙活虎段代码来检查当前是或不是在离线景况中:

    /js/offlinepage.js 中以版本号为名称保存了目前的缓存,获取具有U途乐L,删除不是页面包车型地铁U揽胜极光L,将那么些U奥迪Q7L排序然后将全部缓存的U奥德赛L体现在页面上:

    // 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); }); }) });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    // 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浏览器提供了风度翩翩多级的工具来协助您来调治ServiceWorker,日志也会一贯展现在调控台上。

    您最佳使用匿超级模特式来开展付出专门的学问,那样可防止除缓存对开拓的和弄。

    最后,Chrome的Lighthouse强大也足以为你的渐进式Web应用提供一些改正音信。

    渐进式Web应用的要点

    渐进式Web应用是生机勃勃种新的本事,所以利用的时候势供给小心。也正是说,渐进式Web应用可以让你的网址在多少个小时内获取改进,并且在不扶助渐进式Web应用的浏览器上也不会影响网址的彰显。

    然而我们供给驰念以下几点:

    URL隐藏

    当你的施用正是贰个单UTiggoL的应用程序时(比如游戏),笔者建议您蒙蔽地址栏。除却的情形自个儿并不提议你隐敝地址栏。在Manifest中,display: minimal-ui 或者 display: browser对于大相当多情景的话丰盛用了。

    缓存过大

    您不可能将你网址中的全部内容缓存下来。对于小片段的网址来讲缓存全数剧情并非三个难题,可是借使三个网址包涵了上千个页面吗?很显明不是全数人对网址中的全数内容都感兴趣。存款和储蓄是有节制的,假如您将全部访问过的页面都缓存下来的话,缓存大小会增长额相当慢。

    你能够如此拟订你的缓存计策:

    • 只缓存首要的页面,举例主页,联系人页面和后日浏览小说的页面。
    • 并不是缓存任何图片,录像和大文件
    • 准时清理旧的缓存
    • 提供七个“离线阅读”按键,这样客商就足以挑选需要缓存哪些内容了。

    缓存刷新

    演示代码中在提倡呼吁以前会先查询缓存。当顾客处于离线状态时,那很好,但是借使顾客处于在线状态,那她只会浏览到比较老旧的页面。

    各个能源举例图片和录像不会转移,所以日常都把这几个静态财富设置为漫漫缓存。那一个财富能够直接缓存一年(31,536,000秒)。在HTTP Header中,正是:

    Cache-Control: max-age=31536000

    1
    Cache-Control: max-age=31536000

    页面,CSS金华昆本文件也许转换的更频仍一些,所以您能够设置一个非常小的缓存超时时间(24时辰),并保管在客商网络连接复苏时再一次从服务器诉求:

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

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

    您也足以在历次网址宣布时,通过更名的章程强制浏览注重新央求财富。

    小结

    由来,相信您借使遵照本文一步一步操作下来,你也能够长足把自个儿的Web应用转为PWA。在转为了PWA后,假设有使用满意PWA 模型的前端控件的供给,你能够尝试纯前端表格控件SpreadJS,适用于 .NET、Java 和移动端等楼台的报表控件一定不会令你失望的。

    初藳链接:

    1 赞 1 收藏 评论

    图片 6

    本文由澳门402永利com发布于前端技术,转载请注明出处:10分钟玩转PWA,入门教程

    关键词: