您的位置:澳门新葡8455最新网站 > Web前端 > 入门教程,更改你的网址

入门教程,更改你的网址

发布时间:2019-10-10 21:44编辑:Web前端浏览(117)

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

    2018/05/23 · 基本功技巧 · PWA

    初藳出处: Craig Buckler   译文出处:草龙珠城控件   

    近来有关渐进式Web应用有无数谈谈,有一点人还在疑惑渐进式Web应用是还是不是正是活动端今后。

    但在那篇小说中本身并不会将渐进式应用软件和原生的应用软件进行相比,但有一些是能够一定的,那三种APP的靶子都以使客户体验变得越来越好。

    挪动端Web应用有过多美貌的定义令人无暇,但万幸编写四个渐进式Web应用不是贰个十分不便的事情。在此篇文章里将向您介绍怎么着把多少个家常的网站转换来渐进式Web应用。你可以服从这篇文章一步一步地做,做完现在您的网址将能够达成离线访谈,并且可以在桌面上创立该网址的Logo。那么下边就要开头入门教程。

    图片 1

    什么样是渐进式Web应用?

    渐进式Web应用是一种斩新的Web手艺,让Web应用和原生应用软件的心得相近或同等。

    渐进式Web应用它能够横跨Web技艺及Native APP开荒的建设方案,对于开垦者的优势如下:

    1. 你只需求关心W3C的Web标准,不用关怀种种Native APP的代码。
    2. 顾客能够在设置使用此前先试用。
    3. 在渐进式Web应用中,你不须求利用各个应用百货店来散发应用,也不用关爱应用发布时意外的稽审标准乃至接纳内购的阳台分红。其余,应用程序更新是自动实行的,没有须要顾客交互,所以总体的利用体验对于客户来说更为的平整。
    4. 渐进式Web应用的“安装”进程十分的快,只供给在主显示屏上增添贰个图标就能够。
    5. 渐进式Web应用运转时能够体现二个狼狈的启航画面。
    6. 你能够在渐进式Web应用中提供具有全屏体验的采用。
    7. 经过系统通报等情势狠抓客户的粘性。
    8. 渐进式Web应用将会在该地缓存须求的文本,所以渐进式Web应用会比平日的Web应用的习性越来越好。
    9. 轻量级安装——你只须求缓存几百KB的数码就可以。
    10. 有着的多少传输必需采纳安全的HTTPS连接
    11. 渐进式Web应用能够离线缓存数据,况且会在再度连接互连网时再也联合数据。

    pwa

    渐进式Web应用发展的现状

    渐进式Web应用才刚刚最头阵展,但实际在境内,某些网址已经实际开头PWA的实施了,举例:今日头条、豆瓣、Taobao等楼台。恐怕那时候聪明的您恐怕就能够时有产生疑问,那那么些PWA不就是和微信小程序同样啊,对是那样,二者的指标是一律的,正是在活动端为客商提供丰裕轻量且与原生应用使用体验周围的“轻”应用。

    但就现阶段来说,PWA是Google首推的一项本领规范,FireFox,Chrome以致一些基于Blink的浏览器已经支撑渐进式Web应用了,Edge上对渐进式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并将设备与Computer断开连接,点击桌面上生成的Logo,你会看出三个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 的一多级动作,所以当先57%学科都在说怎样从零发轫营造贰个基于 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 —— 网页的开端 相对 U帕杰罗L(比如 /
    • 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文件写进去了。即使主页面能够多个UGL450L采访,你应有把她们都写进去,举例//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, 取到具备 UEscortL的key的列表,移除全数无用 URL,排序全体的列表而且把他们加到 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 隐藏

    笔者们的身体力行代码遮蔽了 U奥迪Q7L 栏,作者不引入这种做法,除非您有一个单 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

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:入门教程,更改你的网址

    关键词:

上一篇:骨干接纳

下一篇:同构应用,入门教程