菜单

PWA学习心得,改造你的网站

2019年11月30日 - 前端排行
PWA学习心得,改造你的网站

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

2018/05/23 · 幼功技巧 ·
PWA

初稿出处: Craig
Buckler   译文出处:山葫芦城控件   

最近有关渐进式Web应用有成都百货上千切磋,有部分人还在质疑渐进式Web应用是不是便是活动端现在。

但在此篇随笔中本人并不会将渐进式APP和原生的应用程式进行比较,但有一些是足以确定的,那三种APP的对象都以使顾客体验变得越来越好。

活动端Web应用有大多优质的概念令人应接不暇,但幸而编写二个渐进式Web应用不是一个很困难的作业。在这里篇小说里将向您介绍怎么样把多少个不足为奇的网址转变到渐进式Web应用。你能够遵照那篇小说一步一步地做,做完事后你的网站将得以兑现离线访谈,而且能够在桌面上创立该网站的Logo。那么上边将在上马入门教程。

图片 1

PWA学习体会

什么样是渐进式Web应用?

渐进式Web应用是风流倜傥种全新的Web技能,让Web应用和原生应用程式的经历周边或相通。

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

  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的进行了,比如:新浪、豆瓣、天猫等楼台。恐怕那时聪明的你大概就能时有产生难点,那这几个PWA不正是和Wechat小程序相同吧,对是如此,二者的指标是相仿的,正是在移动端为客户提供丰硕轻量且与原生应用使用体验周边的“轻”应用。

但就当下来说,PWA是谷歌首推的黄金时代项技能规范,FireFox,Chrome以至一些基于Blink的浏览器已经援助渐进式Web应用了,Edge上对渐进式Web应用的支撑还在开采。Apple公司也象征会假造在融洽Safari扶植PWA。可是那项功能已经跻身了WebKit内核的八年安顿中。长时间来看,对浏览器包容性的支撑地点应该早已不算太大主题材料了。並且在这里时此刻,在不援助渐进式Web应用的浏览器中,你的接受也只是力所不比使用渐进式Web应用的离线功效而已,除此而外的效果均能够健康使用。

而在Wechat那边,依靠庞大的顾客基数和体积能不能够与PWA三足鼎立以致笑到最后方今还不学无术。

新近有成百上千有关 Progressive Web
Apps(PWAs)的音信,很五人都在问那是还是不是(移动)web
的前途。小编不想陷入native app 和 PWA 的纷争,不过有生机勃勃件事是规定的 —
PWA超大的升级了运动端表现,矫正了客户体验。

图片 2

演示代码

好些个学科都叙述的是哪些在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)来查看调整台音信。

图片 3图片 4

查阅首页,也得以在页面上点击一下,然后利用以下措施踏向离线方式:

当选Network标签恐怕Application -> Service Workers
标签下的“离线”选项。重新访问以前访问过的网页,在此之前网页还是会加载:

图片 5图片 6

好音讯是付出三个 PWA
并轻巧。事实上,大家能够将现有的网址开展改善,使之变成PWA。这也是自身那篇小说要讲的
— 当您读完那篇文章,你能够将您的网址修正,让她看起来就好像五个 native
web app。他得以离线工作同一时间存有自个儿的主屏Logo。

 

接二连三移动端安装

除此之外在PC浏览器访谈外,你也得以在运动设备上访谈该示例。使用USB线缆将您的移位器具连接到Computer上,然后从右上角四个点菜单中开垦More
tools – Remote devices标签

图片 7图片 8

点击左侧的Settings菜单,然后加多一条端口映射(Port Forwarding)的法则,将8888映射为localhost:8888,今后您能够一贯在手机张开Chrome然后拜访http://localhost:8888 。

您可以运用浏览器的“加多到主荧屏”作用将日前网页加多到主显示屏,在您拜候了多少个页面之后,浏览器会将那一个Web应用“安装”到您的配备上。浏览多少个页面,关闭Chrome并将设备与计算机断开连接,点击桌面上生成的图标,你会看出一个Splash页面,何况你能够继续浏览早前浏览过的页面。

图片 9图片 10

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 就像是不太重大…

一、什么是PWA

小结

通过本节对渐进式Web应用的牵线,相信大家对PWA是怎么已经有了主旨的认识。PWA有没有必要顾忌有无网络的风味,并持有独立入口与单身的保险体制。新标准的坐褥很也许会带着
Web 应用在活动器材上浴火重生。所以知足 PWA
模型的前端控件,如纯前端表格控件SpreadJS,将稳步产生运动操作系统的一等国民,并将向Native
应用程式发起挑战。

在下节中大家将带你三只去探望,PWA的准则是怎么,以至它到底是如何是好事的,敬请期望。

1 赞 1 收藏
评论

图片 11

PWAs 是按部就班加强的

你的app照旧能够运转在不扶植 PWA
本领的浏览器里。客户不能够离线访问,然则别的成效都像原本近似未有影响。综合利弊得失,未有理由不把你的
app 改良为 PWA。

Progressive  Web  App
, (渐进式加强 WEB 应用卡塔尔(قطر‎简单称谓 PWA
,是晋升WebApp的体验的风姿罗曼蒂克种新点子,能给顾客原生应用的体会。

不只是 Apps

Google 引领了 PWA
的生龙活虎比比都已经动作,所以超过二分之一课程都说怎样从零从前构建二个基于
Chrome,native-looking mobile
app。可是并不是独有特殊的单页应用能够PWA化,也无需一定依照 material
interface design guidelines。大多数网址都能够在数小时内达成 PWA
化。那包涵你的 WordPress站点恐怕静态站点。

PWA
本质上是 Web App ,依附一些新技艺也装有了Native
App的部分性情,兼具 Web App和Native App的独特之处。

演示代码

示范代码能够在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消息。

图片 12

浏览主页,也许别的页面,然后用以下任一格局使页面离线:

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

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

再次浏览大肆在此之前浏览过的页面,它们还是能够浏览到。浏览一个事前并未有看过的页面,你拜望到二个专程的离线页面,标志“you’re
offline”,还应该有多个你能够浏览的页面列表:

图片 13

1.1 
PWA
的 首要特色

接连几天手机

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

图片 14

在左边手选拔 Settings ,点击 Add Rule 输入 8888
端口。你可以在您的无绳电话机上打开Chrome,张开
http://localhost:8888/。

你能够点击浏览器菜单里的 “Add to Home
screen”。浏览多少个页面,浏览器会提示你去安装。那二种形式都能够创建一个新的Logo在你的主屏上。浏览多少个页面后关掉Chrome,断开设备连接。你如故能够展开
PWA Website app —
你会看出三个开发银行页,而且能够离线访问在此之前您拜候过的页面。

将你的网址改正为一个 Progressive Web App 总共有四个必备步骤:


可信 
      (
Reliable 卡塔尔 –
纵然在不稳固的网络情形下,也能刹那间加载并呈现

第一步:开启 HTTPS

是因为局地显然的原由,PWAs 需求 HTTPS 连接。

HTTPS 在示范代码中并非必需的,因为 Chrome 允许利用 localhost 或然别的127.x.x.x 的地点来测验。你也得以在 HTTP 连接下测量试验你的 PWA,你必要选拔Chrome ,况且输入以下命令行参数:


快 
   (
Fast 卡塔尔(英语:State of Qatar) –
火速响应,何况 动漫平滑通畅

其次步:成立一个 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 中任重(Ren Zhong卡塔尔(英语:State of Qatar)而道远品质有:

MDN提供了全体的manifest属性列表:Web App Manifest
properties

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

图片 15



粘性 
 (
Engaging 卡塔尔(英语:State of Qatar) –
顾客可以增加到桌面和接受通知

其三步:成立叁个 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文件写进去了。假如主页面能够八个U福睿斯L访问,你应当把他们都写进去,举例//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 相关新闻的选项:

图片 16

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

图片 17

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

图片 18

 优点是能够让用户停留时间较长,顾客体验比较轻巧,更加好的兴风作浪转变

再来一步 – 第四步:创立多个可用的离线页面

离线页面能够是四个静态页面,来申明当前客户哀告不可用。可是,大家也得以在此个页面上列出能够访谈的页面链接。

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福特ExplorerL,排序全体的列表况兼把他们加到
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 的有用音讯。

1.2 
PWA
的 主要
技术

PWA 陷阱

有几点供给留意:


离线可用     (
ServiceWorker 卡塔尔 

URL 隐藏

咱俩的演示代码隐瞒了 UPRADOL 栏,笔者不推荐这种做法,除非你有一个单 url
应用,比如三个娱乐。对于半数以上网址,manifest 选项 display: minimal-ui
或者 display: browser是最佳的精选。


主屏Logo     (
App Manifest 卡塔尔(قطر‎  

缓存太多

您能够缓存你网址的全部页面和具备静态文件。那对于多个小网址是行得通的,但那对于上千个页面包车型地铁大型网站实际吗?未有人会对您网址的具有内容都感兴趣,而器材的内部存款和储蓄器容积将是二个限量。尽管你像示例代码同样只缓存访谈过的页面和文件,缓存大小也会增高的非常快。

或然你须要留意:


通知 
     (
Push API & Notification API )  

缓存刷新

在示范代码中,客商在倡议互联网前先反省该文件是不是缓存。若是缓存,就选用缓存文件。那在离线情状下很棒,但也象征在联网状态下,顾客获得的或是否风靡数据。

静态文件,相近于图片和录制等,不会有时改变的财富,做长日子缓存未有不小的难点。你能够在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

 

1.3 
PWA
的 DEMO
  

 

天气PWA

能够在移动器械上的
Chrome
浏览器 (version
> 52卡塔尔(英语:State of Qatar) 访谈

 

 

 

图片 19

 

1.3.1
有网络的情状下,在
Google浏览器展开页面效果

 

图片 20  图片 21

 

 

图片 22  图片 23

 

1.3.
2
有互连网的场合下
,点击显示屏上新变化的
天气应用程式图标张开页面呈现效果

 

图片 24

 

此间能够观望展开的页面中
只展示内容区域
, 未有状态栏,导航栏,工具栏

 

1.3.3
无互联网的事态下,在QQ浏览器展开

 

 

图片 25

 

 

 

 

 

1.3.4
无互连网的情景下,在谷歌(Google卡塔尔浏览器展开

 

 

图片 26

 

下拉刷新,会唤起【
设备离线,加载历史数据

 

 

 

 

1.3.5
无网络的情状下
,点击荧屏上转移的气象
APP图标

 

图片 27

 

下拉刷新,会唤醒【
设备离线,加载历史数据

 

 

 参谋资料

  1. Progressive Web Apps
  2. 什么是PWA

 

二、什么是
Service
Worker
官方网站介绍

 


 
它是生机勃勃种 Web Worker  


 
它是三个外链的js文件,如 /sw.js


 
它是一种特有的Web Worker,能够阻挡互联网乞求


 
它必须要运维在HTTPS左券上


 
它还是可以够选择推送消息和 处理后台同步


 
它 少年老成但被注册就永恒存在,除非展现unregister


 
它 是
PWA
的核心

 

 

什么是Web
Worker?

当在HTML页面中实施脚本时,页面包车型地铁情状是不足响应的,直到脚本已产生。
web
worker  是运维在后台的JavaScript,独立于任何脚本,不会潜濡默化页面包车型大巴属性
。您能够继承做别的愿意做的业务:点击、选拔内容等等,而那时web  worker在后台运转 .

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图