改造你的网站,入门教程

图片 17

改造你的网站,入门教程

渐进式Web应用(PWA卡塔 尔(英语:State of Qatar)入门教程(上卡塔尔国

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的执行了,举个例子:博客园、豆瓣、Tmall等楼台。可能当时聪明的您或然就能够生出疑问,这那么些PWA不就是和微信小程序相仿啊,对是那样,二者的目标是一模一样的,便是在移动端为客商提供丰硕轻量且与原生应用使用体验周围的“轻”应用。

但就方今来讲,PWA是Google首选的风流倜傥项技巧标准,FireFox,Chrome以致一些基于Blink的浏览器已经援救渐进式Web应用了,Edge上对渐进式Web应用的支撑还在开采。Apple公司也意味会杜撰在本身Safari帮衬PWA。然则那项成效已经进来了WebKit内核的四年安插中。长时间来看,对浏览器宽容性的帮助方面应该早已不算太大主题材料了。并且在脚下,在不扶持渐进式Web应用的浏览器中,你的运用也只是心有余而力不足利用渐进式Web应用的离线成效而已,除却的成效均能够健康使用。

而在Wechat那边,依赖宏大的客户基数和体量能还是不能够与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线缆将你的移位设备连接到计算机上,然后从右上角多少个点菜单中张开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
的风姿潇洒多种动作,所以抢先三分之二学科都说怎么从零领头营造二个依照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
和内需在主屏使用的图标的图形,运行屏的图形等。

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奥迪Q5L(offlineURL卡塔尔国。当离线时客户筹划访谈在此之前未缓存的页面时,那么些页面会突显给客商。

  3. 二个具备离线功用的页面要求文件的数组(installFilesEssential卡塔尔。那些数组应该包涵静态能源,举个例子CSS 和 JavaScript
    文件,但自己也把主页面(/卡塔尔和Logo文件写进去了。若是主页面能够八个UEscortL访问,你应该把她们都写进去,例如//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的列表,移除全数无用 U福睿斯L,排序全体的列表况且把她们加到
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途乐L 栏,笔者不引入这种做法,除非您有二个单 url
应用,比方三个玩耍。对于半数以上网址,manifest 选项 display: minimal-ui
或者 display: browser是最佳的筛选。

缓存太多

你能够缓存你网址的持有页面和具备静态文件。那对于二个小网址是实用的,但那对于上千个页面包车型客车巨型网址实际吗?未有人会对你网址的装有内容都感兴趣,而装备的内部存款和储蓄器容积将是三个范围。纵然你像示例代码相符只缓存访谈过的页面和文书,缓存大小也会压实的非常的慢。

或是你要求当心:

  • 只缓存首要的页面,相近主页,和后日的小说。
  • 决不缓存图片,摄像和任何大型文件
  • 平常删除旧的缓存文件
  • 提供三个缓存按键给顾客,让客户决定是或不是缓存

缓存刷新

在示范代码中,顾客在伸手互连网前先反省该文件是还是不是缓存。如果缓存,就应用缓存文件。这在离线意况下很棒,但也代表在联网状态下,顾客拿到的也许不是最新数据。

静态文件,相符于图片和录像等,不会平日退换的财富,做长日子缓存未有一点都不小的主题素材。你能够在HTTP
头里安装 Cache-Control 来缓存文件使其缓存时间为一年(31,536,000
seconds卡塔 尔(英语:State of Qatar):

Cache-Control: max-age=31536000

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

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

译自 Retrofit Your Website as a Progressive Web
App

admin

网站地图xml地图