您的位置:澳门402永利com > 前端技术 > 改动你的网址,入门教程

改动你的网址,入门教程

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

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

    2018/05/23 · 基础技能 · PWA

    原稿出处: Craig Buckler   译文出处:草龙珠城控件   

    多年来有关渐进式Web应用有无数研讨,有风流倜傥部分人还在疑忌渐进式Web应用是还是不是就是运动端未来。

    但在这里篇小说中自作者并不会将渐进式应用程式和原生的应用程式举行相比,但有一些是足以一定的,那二种APP的靶子都以使顾客体验变得更加好。

    挪动端Web应用有点不清妙趣横生的定义令人无暇,但幸而编辑一个渐进式Web应用不是二个非常不方便的事体。在此篇文章里将向你介绍怎么样把三个常见的网址调换到渐进式Web应用。你能够遵从那篇作品一步一步地做,做完事后您的网址将得以兑现离线访问,何况能够在桌面上创造该网址的Logo。那么上面将要上马入门教程。

    图片 1

    什么样是渐进式Web应用?

    渐进式Web应用是意气风发种崭新的Web技术,让Web应用和原生应用程式的感受周围或平等。

    渐进式Web应用它能够横跨Web技巧及Native 应用软件开辟的解决方案,对于开垦者的优势如下:

    1. 你只必要关爱W3C的Web规范,不用关切各个Native APP的代码。
    2. 客户能够在设置使用在此以前先试用。
    3. 在渐进式Web应用中,你无需接受各样应用公司来散发应用,也不用关爱应用公布时竟然的甄别正式以致使用内购的阳台分红。此外,应用程序更新是机动举办的,没有需求顾客交互,所以完全的利用体验对于顾客来说更为的坦荡。
    4. 渐进式Web应用的“安装”进程急忙,只必要在主显示屏上增加三个Logo就可以。
    5. 渐进式Web应用运行时能够呈现一个雅观的起步画面。
    6. 您能够在渐进式Web应用中提供全部全屏体验的使用。
    7. 透过系统通报等花样提升顾客的粘性。
    8. 渐进式Web应用将会在本地缓存供给的公文,所以渐进式Web应用会比日常的Web应用的属性越来越好。
    9. 轻量级安装——你只要求缓存几百KB的多寡就能够。
    10. 怀有的数目传输必需使用安全的HTTPS连接
    11. 渐进式Web应用能够离线缓存数据,並且会在再度连接互连网时再也联合数据。

    pwa

    渐进式Web应用发展的现状

    渐进式Web应用才刚刚开首发展,但骨子里在国内,有个别网址已经实际伊始PWA的试行了,比如:新浪、豆瓣、Taobao等平台。大概这时候聪明的您恐怕就能生出难点,那那些PWA不就是和微信小程序雷同吧,对是那般,二者的指标是平等的,正是在活动端为顾客提供充分轻量且与原生应用使用体验左近的“轻”应用。

    但就当下来讲,PWA是谷歌首荐的风流倜傥项才干规范,FireFox,Chrome以至一些基于Blink的浏览器已经帮助渐进式Web应用了,艾德ge上对渐进式Web应用的支撑还在支付。Apple公司也意味着会设想在和谐Safari扶助PWA。然则这项功用已经跻身了WebKit内核的八年安排中。长期来看,对浏览器宽容性的协理方面应该早已不算太大标题了。何况在时下,在不扶植渐进式Web应用的浏览器中,你的行使也只是不能选拔渐进式Web应用的离线功用而已,除了那么些之外的效劳均能够不奇怪使用。

    而在微信那边,依附宏大的客商基数和容积能无法与PWA分庭抗礼以至笑到最终近期还一窍不通。

    前些天有为数不罕有关 Progressive Web Apps(PWAs)的消息,很五个人都在问那是还是不是(移动)web 的前程。作者不想陷入native app 和 PWA 的纷争,可是有风姿浪漫件事是规定的 --- PWA超大的升官了活动端表现,改善了客商体验。

    身体力行代码

    大部课程都叙述的是如何在Chrome上从零开端制作三个近乎原生分界面包车型客车行使。然则在这里篇教程中,大家并不筹划做叁个单页面应用程序,所以在这里大家也不要领会诸如Material Design等知识。那么上边大家就径直看示例吧。

    您能够从GitHub中获取本课程对应的示范代码。

    本示例中提供了二个有四个网页的网址,二个CSS文件和一个JavaScript文件。那一个网址可以在颇负的现世浏览器上健康专门的职业(IE10+)。若是您的浏览器接济渐进式Web应用,客商能够在离线状态下将会一直访问缓存中的页面。

    要想运维此示例,请保管您早就安装了Node.js。并请张开命令行,使用以下命令来运转该示例:

    node ./server.js [port]

    1
    node ./server.js [port]

    如上命令中,[port]是可选部分,默以为8888。使用 Ctrl + C 就能够甘休Web服务器。

    开拓基于Blink内核的浏览器(Opera,Vivaldi,Chrome),然后在地点栏中输入 或然 Cmd/Ctrl + Shift + I)来查阅调整台信息。

    图片 2图片 3

    查看首页,也足以在页面上点击一下,然后使用以下措施步入离线形式:

    入选Network标签恐怕Application -> Service Workers 标签下的“离线”选项。重新访问早前访谈过的网页,早前网页依旧会加载:

    图片 4图片 5

    好消息是支付贰个 PWA 并简单。事实上,大家得以将现成的网址开展修改,使之成为PWA。那也是本人那篇小说要讲的 -- 当您读完那篇作品,你能够将你的网址校勘,让她看起来就像贰个 native web app。他得以离线专业还要有所和睦的主屏Logo。

    接连移动端安装

    除去在PC浏览器访问外,你也足以在活动设备上访谈该示例。使用USB线缆将您的活动器具连接到Computer上,然后从右上角八个点菜单中展开More tools – Remote devices标签

    图片 6图片 7

    点击侧面的Settings菜单,然后增加一条端口映射(Port Forwarding)的规行矩步,将8888映射为localhost:8888,以后你能够间接在手提式有线电话机张开Chrome然后探望http://localhost:8888 。

    你能够行使浏览器的“加多到主显示器”成效将如今网页增加到主显示屏,在你拜见了多少个页面之后,浏览器会将以此Web应用“安装”到你的装置上。浏览多少个页面,关闭Chrome并将道具与计算机断开连接,点击桌面上生成的图标,你寻访到三个Splash页面,而且你能够持续浏览以前浏览过的页面。

    图片 8图片 9

    Progressive Web Apps 是什么?

    Progressive Web Apps (下文以“PWAs”代指) 是贰个让人欢跃的前端技能的创新。PWAs综合了风度翩翩层层本事让你的 web app表现得好似 native mobile app。相比较于纯 web 应用方案和纯 native 施工方案,PWAs对于开辟者和客商有以下优点:

    1. 您只供给基于开放的 W3C 标准的 web 开荒技巧来支付三个app。无需多顾客端支出。

    2. 顾客能够在装置前就体验你的 app。

    3. 无需经过 AppStore 下载 app。app 会自动晋级无需客户晋级。

    4. 客户会境遇‘安装’的升迁,点击安装会加多一个Logo到客商首屏。

    5. 被展开时,PWA 交易会示三个有魅力的闪屏。

    6. chrome 提供了可选选项,能够使 PWA 获得全屏体验。

    7. 要求的公文仲被地面缓存,因此会比标准的web app 响应越来越快(可能也会比native app响应快)

    8. 设置及其轻量 -- 可能会有几百 kb 的缓存数据。

    9. 网址的数码传输必得是 https 连接。

    10. PWAs 能够离线职业,并且在网络复苏时得以同步最新数据。

    如今还处在 PWA 的后期,但现已有 多多成功案例 。

    PWA 技能前段时间被 Firefox,Chrome 和任何基于Blink内核的浏览器接济。微软正在努力在Edge浏览器上实现。Apple未有动作 although there are promising comments in the WebKit five-year plan。幸运的是,浏览器援助对于 PWA 犹如不太重大...

    小结

    透过本节对渐进式Web应用的牵线,相信大家对PWA是何许已经有了宗旨的认识。PWA有无需忧郁有无网络的特点,并有着独立入口与单身的保险体制。新标准的生产很或许会带着 Web 应用在活动道具上浴火重生。所以满意 PWA 模型的前端控件,如纯前端表格控件SpreadJS,将逐步变为运动操作系统的一等国民,并将向Native 应用软件发起挑战。

    在下节中大家将带您一同去拜候,PWA的规律是何等,以至它到底是何许做事的,敬请期望。

    1 赞 1 收藏 评论

    图片 10

    PWAs 是渐进巩固的

    您的app仍旧能够运转在不扶持 PWA 技巧的浏览器里。客商不可能离线访谈,不过别的职能都像原本同样未有影响。综合利弊得失,未有理由不把您的 app 修正为 PWA。

    不只是 Apps

    Google 引领了 PWA 的意气风发种类动作,所以一大半科目都在说怎么从零带头创设一个依照Chrome,native-looking mobile app。然则并非唯有特殊的单页应用能够PWA化,也不须要肯定依照 material interface design guidelines。大好多网址都足以在数钟头内达成 PWA 化。那包蕴你的 WordPress站点或许静态站点。

    示范代码

    演示代码能够在https://github.com/sitepoint-editors/pwa-retrofit找到。

    代码提供了多少个简约的四个页面包车型地铁网址。个中含有部分图纸,三个样式表和二个main javascript 文件。那些网址能够运营在享有今世浏览器上(IE10+)。倘若浏览器支持 PWA 技巧,当离线时客商能够浏览他们事先看过的页面。

    运维代码前,确认保障 Node.js 已经安装,然后再命令行里运营服务:

    node ./server.js [port]
    

    [port]是可配备的,默认为 8888。展开 Chrome 可能其余基于Blink内核的浏览器,比如 Opera 大概 Vivaldi,然后输入链接 http://localhost:8888/(大概您钦命的某些端口)。你也得以展开开采者工具看一下相继console音信。

    图片 11

    浏览主页,大概别的页面,然后用以下大肆气风发措施使页面离线:

    1. 按下 Cmd/Ctrl + C ,停止 node 服务器,或者

    2. 在开拓者工具的 Network 或者 Application - Service Workers 栏里点击 offline 选项。

    再也浏览自便以前浏览过的页面,它们还是能够浏览到。浏览二个事先未有看过的页面,你会看出贰个特意的离线页面,标志“you’re offline”,还会有二个您能够浏览的页面列表:

    图片 12

    三回九转手提式有线电话机

    你也能够因而 USB 连接你的安卓手提式有线电话机来预览示例网页。在开垦者工具中开采 Remote devices 菜单。

    图片 13

    在左侧选择 Settings ,点击 Add Rule 输入 8888 端口。你能够在你的手提式无线电话机上开采Chrome,展开 http://localhost:8888/。

    您能够点击浏览器菜单里的 “Add to Home screen”。浏览多少个页面,浏览器会提示你去安装。那三种办法都足以创设一个新的Logo在你的主屏上。浏览多少个页面后关掉Chrome,断开设备连接。你照样能够打开 PWA Website app -- 你拜访到多个运转页,并且能够离线访谈早先您拜会过的页面。

    将你的网址校勘为三个 Progressive Web App 总共有多个必备步骤:

    第一步:开启 HTTPS

    由于有的料定的因由,PWAs 必要 HTTPS 连接。

    HTTPS 在演示代码中并不是必得的,因为 Chrome 允许行使 localhost 或然别的127.x.x.x 之处来测量试验。你也能够在 HTTP 连接下测量试验你的 PWA,你要求动用 Chrome ,何况输入以下命令行参数:

    • --user-data-dir
    • --unsafety-treat-insecure-origin-as-secure

    第二步:创造一个 Web App Manifest

    manifest 文件提供了大器晚成部分我们网址的音讯,举个例子 name,description 和急需在主屏使用的Logo的图片,运营屏的图片等。

    manifest文件是二个 JSON 格式的文书,位于你项目的根目录。它必得用Content-Type: application/manifest+json 或者 Content-Type: application/json如此那般的 HTTP 头来需要。那几个文件可以被命名称为别的名字,在演示代码中他被取名字为 /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"           : "logo/logo072.png",
          "sizes"         : "72x72",
          "type"          : "image/png"
        },
        {
          "src"           : "logo/logo152.png",
          "sizes"         : "152x152",
          "type"          : "image/png"
        },
        {
          "src"           : "logo/logo192.png",
          "sizes"         : "192x192",
          "type"          : "image/png"
        },
        {
          "src"           : "logo/logo256.png",
          "sizes"         : "256x256",
          "type"          : "image/png"
        },
        {
          "src"           : "logo/logo512.png",
          "sizes"         : "512x512",
          "type"          : "image/png"
        }
      ]
    }
    

    在页面包车型客车<head>中引入:

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

    manifest 中要害性能有:

    • name —— 网页显示给客户的完整名称
    • short_name —— 当空间不足以展现姓名时的网址缩写名称
    • description —— 关于网址的详细描述
    • start_url —— 网页的初阶 相对 UPAJEROL(举个例子 /
    • scope —— 导航范围。比如,/app/的scope就节制 app 在此个文件夹里。
    • background-color —— 运维屏和浏览器的背景颜色
    • theme_color —— 网址的宗旨颜色,日常都与背景颜色相像,它能够影响网址的显得
    • orientation —— 首荐的呈现方向:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, 和 portrait-secondary
    • display —— 首推的显示形式:fullscreen, standalone(看起来像是native app),minimal-ui(有简化的浏览器调节选项) 和 browser(常规的浏览器 tab)
    • icons —— 定义了 src URL, sizestype的图纸对象数组。

    MDN提供了黄金时代体化的manifest属性列表:Web App Manifest properties

    在开垦者工具中的 Application tab 左边有 Manifest 选项,你能够证实你的 manifest JSON 文件,并提供了 “Add to homescreen”。

    图片 14

    其三步:成立一个 Service Worker

    Service Worker 是阻碍和响应你的互连网须要的编制程序接口。那是一个位居你根目录的二个独门的 javascript 文件。

    您的 js 文件(在演示代码中是 /js/main.js)能够检查是否帮助 ServiceWorker,何况注册:

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

    只要您无需离线功效,能够简轻便单的开创三个空的 /service-worker.js文本 —— 客户会被提示安装你的 app。

    Service Worker 很复杂,你能够改善示例代码来到达和煦的指标。那是叁个职业的 web worker,浏览器用三个独自的线程来下载和执行它。它未有调用 DOM 和别的页面 api 的力量,但他得以阻碍互连网央求,包罗页面切换,静态能源下载,ajax央求所引起的网络央浼。

    那就是内需 HTTPS 的最入眼的由来。想象一下第三方代码能够阻止来自此外网址的 service worker, 将是二个灾荒。

    service worker 主要有三个事件: installactivatefetch

    Install 事件

    这些事件在app被安装时接触。它时时用来缓存须要的文本。缓存通过 Cache API来实现。

    率先,我们来布局多少个变量:

    1. 缓存名称(CACHE)和版本号(version)。你的使用能够有八个缓存不过只可以援引三个。大家设置了版本号,那样当我们有举足轻重改正时,大家得以创新缓存,而忽视旧的缓存。

    2. 二个离线页面包车型地铁U昂科拉L(offlineURL)。当离线时客户希图访问之前未缓存的页面时,那个页面会展现给客户。

    3. 多少个负有离线功效的页面要求文件的数组(installFilesEssential)。这么些数组应该包涵静态能源,比如CSS 和 JavaScript 文件,但本人也把主页面(/)和Logo文件写进去了。倘诺主页面可以多少个UCR-VL访问,你应当把她们都写进去,比如//index.html。注意,offlineURL也要被写入那么些数组。

    4. 可选的,描述文件数组(installFilesDesirable)。那些文件都很会被下载,但假使下载战败不会停顿安装。

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

    installStaticFiles()办法添Gavin件到缓存,这几个点子用到了基于 promise的 Cache API。当要求的公文都被缓存后才会生成重临值。

    // install static assets
    function installStaticFiles() {
    
      return caches.open(CACHE)
        .then(cache => {
    
          // cache desirable files
          cache.addAll(installFilesDesirable);
    
          // cache essential files
          return cache.addAll(installFilesEssential);
    
        });
    
    }
    

    末段,大家抬高install的事件监听函数。 waitUntil方法确认保障全数代码试行实现后,service worker 才会实施install。推行 installStaticFiles()措施,然后履行 self.skipWaiting()方法使service worker进入 active状态。

    // application installation
    self.addEventListener('install', event => {
    
      console.log('service worker: install');
    
      // cache core files
      event.waitUntil(
        installStaticFiles()
        .then(() => self.skipWaiting())
      );
    
    });
    

    Activate 事件

    当 install完结后, service worker 步入active状态,那些事件立刻实行。你只怕无需落到实处这么些事件监听,可是示例代码在此删除老旧的无用缓存文件:

    // 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()办法设置自个儿为active的service worker。

    Fetch 事件

    当有网络恳求时这些事件被触发。它调用respondWith()办法来胁制 GET 乞请并回到:

    1. 缓存中的二个静态财富。

    2. 如果 #1 失败了,就用 Fetch API(那与 service worker 的fetch 事件不要紧)去互连网诉求这几个财富。然后将这一个财富投入缓存。

    3. 如果 #1 和 #2 都未果了,这就回到一个适龄的值。

    // 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)艺术通过多少个帮忙函数再次回到七个万分的值:

    // is image 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 offline asset
    function offlineAsset(url) {
    
      if (isImage(url)) {
    
        // return image
        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 页面。

    开拓者工具提供了翻看 Service Worker 相关音讯的选项:

    图片 15

    在开辟者工具的 Cache Storage 选项列出了全数当前域内的缓存和所富含的静态文件。当缓存更新的时候,你能够点击左下角的刷新按键来更新缓存:

    图片 16

    不出意料, Clear storage 选项能够去除你的 service worker 和缓存:

    图片 17

    再来一步 - 第四步:创造二个可用的离线页面

    离线页面能够是一个静态页面,来验证当前顾客央浼不可用。然则,大家也足以在此个页面上列出能够访问的页面链接。

    main.js中大家能够运用 Cache API 。不过API 使用promises,在不扶助的浏览器中会引起全数javascript运维阻塞。为了制止这种景色,大家在加载另多少个 /js/offlinepage.js 文件以前必需检查离线文件列表和是还是不是援救 Cache API 。

    // load script to populate offline page list
    if (document.getElementById('cachedpagelist') && 'caches' in window) {
      var scr = document.createElement('script');
      scr.src = '/js/offlinepage.js';
      scr.async = 1;
      document.head.appendChild(scr);
    }
    

    /js/offlinepage.js locates the most recent cache by version name, 取到具有 U路虎极光L的key的列表,移除全体无用 UCRUISERL,排序全数的列表并且把她们加到 ID 为cachedpagelist的 DOM 节点中:

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

    开荒工具

    设若您认为 javascript 调节和测量试验困难,那么 service worker 也不会很好。Chrome的开辟者工具的 Application 提供了大器晚成雨后冬笋调节和测验工具。

    你应当开荒 隐身窗口 来测量检验你的 app,那样在您关闭这一个窗口之后缓存文件就不会保留下去。

    最后,Lighthouse extension for Chrome 提供了过多改正 PWA 的有用音信。

    PWA 陷阱

    有几点供给注意:

    URL 隐藏

    咱俩的演示代码隐敝了 UOdysseyL 栏,作者不推荐这种做法,除非你有二个单 url 应用,举例叁个娱乐。对于大多数网址,manifest 选项 display: minimal-ui 或者 display: browser是最棒的抉择。

    缓存太多

    您能够缓存你网址的持有页面和颇负静态文件。那对于三个小网址是实惠的,但这对于上千个页面的重型网址实际吗?未有人会对你网站的兼具剧情都感兴趣,而器材的内部存款和储蓄器容积将是多少个约束。尽管你像示例代码同样只缓存访谈过的页面和文书,缓存大小也会进步的超快。

    也许你须求潜心:

    • 只缓存重要的页面,相同主页,和近些日子的篇章。
    • 不用缓存图片,录像和任何大型文件
    • 一再删除旧的缓存文件
    • 提供一个缓存按键给客户,让客商决定是或不是缓存

    缓存刷新

    在示范代码中,客户在号召网络前先反省该公文是不是缓存。假如缓存,就利用缓存文件。那在离线情形下很棒,但也代表在联网状态下,顾客获得的只怕不是最新数据。

    静态文件,雷同于图片和摄像等,不会临时改动的财富,做长日子缓存没有十分大的难题。你能够在HTTP 头里安装 Cache-Control 来缓存文件使其缓存时间为一年(31,536,000 seconds):

    Cache-Control: max-age=31536000
    

    页面,CSS和 script 文件会时时转移,所以您应当改设置三个超短的缓存时间比方 24 小时,并在联网时与服务端文件举行验证:

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

    译自 Retrofit Your Website as a Progressive Web App

    本文由澳门402永利com发布于前端技术,转载请注明出处:改动你的网址,入门教程

    关键词: