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

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

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

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

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

不久前有关渐进式Web应用有过多探究,有局地人还在狐疑渐进式Web应用是不是正是移动端今后。

但在那篇小说中本人并不会将渐进式应用程式和原生的应用软件举办比较,但有一点是能够肯定的,那两种APP的对象都是使用户体验变得越来越好。

一举手一投足端Web应用有成都百货上千美好的概念令人招待不暇,但还好编辑四个渐进式Web应用不是3个很困难的作业。在那篇小说里将向您介绍怎么样把2个司空见惯的网址转换到渐进式Web应用。你能够依照那篇文章一步一步地做,做完之后你的网址将能够兑现离线访问,并且能够在桌面上创建该网址的图标。那么上边就要起先入门教程。

图片 1

PWA学习心得

什么样是渐进式Web应用?

渐进式Web应用是壹种斩新的Web技艺,让Web应用和原生应用程式的体会周围或壹致。

渐进式Web应用它能够横跨Web才能及Native
应用程式开采的消除方案,对于开采者的优势如下:

  1. 你只需求关爱W3C的Web标准,不用关心各个Native 应用程式的代码。
  2. 用户可以在设置使用以前先试用。
  3. 在渐进式Web应用中,你不要求利用种种应用商号来散发应用,也不用关爱应用宣布时意外的查处标准以及选取内购的阳台分红。别的,应用程序更新是全自动进行的,无需用户交互,所以总体的使用体验对于用户来讲更为的平缓。
  4. 渐进式Web应用的“安装”进程异常的快,只要求在主显示屏上增加2个Logo就可以。
  5. 渐进式Web应用运维时能够展现3个难堪的起步画面。
  6. 您能够在渐进式Web应用中提供全数全屏体验的施用。
  7. 透过系统通报等花样进步用户的粘性。
  8. 渐进式Web应用将会在地面缓存要求的公文,所以渐进式Web应用会比常见的Web应用的属性越来越好。
  9. 轻量级安装——你只供给缓存几百KB的数额就可以。
  10. 有着的数据传输必须采纳安全的HTTPS连接
  11. 渐进式Web应用能够离线缓存数据,并且会在重新连接互联网时再次联合数据。

pwa

 

渐进式Web应用发展的现状

渐进式Web应用才刚刚初步发展,但事实上在境内,某个网址已经实际开始PWA的施行了,比如:新浪、豆瓣、天猫商城等楼台。可能这时候聪明的您可能就会产生疑问,那这么些PWA不正是和微信小程序同样啊,对是那般,贰者的目的是1模同样的,便是在移动端为用户提供丰富轻量且与原生应用使用体验周围的“轻”应用。

但就当下来讲,PWA是Google首荐的壹项手艺标准,Fire福克斯,Chrome以及部分基于Blink的浏览器已经协理渐进式Web应用了,艾德ge上对渐进式Web应用的支撑还在支付。Apple公司也表示会设想在本身Safari援助PWA。然则那项成效已经跻身了Web基特内核的五年布置中。短时间来看,对浏览器包容性的扶助地点应当早就不算太大标题了。况且在此时此刻,在不扶助渐进式Web应用的浏览器中,你的采纳也只是力不从心选择渐进式Web应用的离线功用而已,除了这一个之外的效能均能够健康使用。

而在微信那边,依靠巨大的用户基数和体积能或没办法与PWA分庭抗礼乃至笑到结尾近期还不得而知。

目前有过多有关 Progressive Web
Apps(PWAs)的音信,很几人都在问那是还是不是(移动)web
的前程。小编不想陷入native app 和 PWA 的纷争,不过有1件事是规定的 —
PWA比非常大的晋升了活动端表现,改革了用户体验。

图片 2

示范代码

超越3/6科目都讲述的是怎么在Chrome上从零起初制作1个像样原生分界面包车型大巴应用。不过在那篇教程中,大家并不筹划做三个单页面应用程序,所以在那我们也无需了然诸如Material
Design等文化。那么上面大家就平昔看示例吧。

您能够从GitHub中获得本课程对应的言传身教代码。

本示例中提供了八个有多少个网页的网站,八个CSS文件和1个JavaScript文件。那几个网址能够在颇具的现世浏览器上符合规律工作(IE拾+)。纵然您的浏览器帮衬渐进式Web应用,用户可以在离线状态下将会一向访问缓存中的页面。

要想运营此示例,请确认保证您早就设置了Node.js。并请打开命令行,使用以下命令来运行该示例:

node ./server.js [port]

1
node ./server.js [port]

上述命令中,[port]是可选部分,默感觉888八。使用 Ctrl + C 就可以停止Web服务器。

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

图片 3图片 4

查阅首页,也能够在页面上点击一下,然后利用以下措施进入离线方式:

当选Network标签也许Application -> 瑟维斯 Workers
标签下的“离线”选项。重新访问在此之前访问过的网页,在此之前网页依旧会加载:

图片 5图片 6

好音信是支付1个 PWA
并简单。事实上,我们可以将现成的网址实行革新,使之造成PWA。那也是我那篇作品要讲的
— 当你读完那篇文章,你能够将您的网址创新,让他看起来就像多少个 native
web app。他可以离线工作还要存有自个儿的主屏Logo。

 

总是移动端安装

除了在PC浏览器访问外,你也得以在运动设备上访问该示例。使用USB线缆将您的位移道具连接到计算机上,然后从右上角八个点菜单中开荒More
tools – Remote devices标签

图片 7图片 8

点击左侧的Settings菜单,然后加多一条端口映射(Port Forwarding)的条条框框,将8888映射为localhost:888八,未来你能够平素在二弟大打开Chrome然后拜会http://localhost:8888 。

您能够应用浏览器的“增加到主显示屏”功效将近来网页增添到主显示屏,在您拜访了多少个页面之后,浏览器会将那一个Web应用“安装”到您的配备上。浏览多少个页面,关闭Chrome并将配备与Computer断开连接,点击桌面上生成的Logo,你相会到一个Splash页面,并且你能够一而再浏览在此之前浏览过的页面。

图片 9图片 10

Progressive Web Apps 是什么?

Progressive Web Apps (下文以“PWAs”代指)
是四个令人快乐的前端本事的革新。PWAs综合了壹多级手艺使你的 web
app表现得就好像 native mobile app。比较于纯 web 消除方案和纯 native
消除方案,PWAs对于开拓者和用户有以下优点:

  1. 你只供给基于开放的 W3C 规范的 web
    开垦工夫来开拓1个app。不需求多客户端支付。

  2. 用户能够在装置前就感受你的 app。

  3. 不需求经过 AppStore 下载 app。app 会自动进级不需要用户晋级。

  4. 用户会受到‘安装’的提醒,点击安装会追加二个Logo到用户首屏。

  5. 被展开时,PWA 会议及展览示1个有吸重力的闪屏。

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

  7. 必备的公文仲被本地缓存,由此会比正规的web app
    响应越来越快(可能也会比native app响应快)

  8. 安装及其轻量 — 大概会有几百 kb 的缓存数据。

  9. 网站的数量传输必须是 https 连接。

  10. PWAs 能够离线专门的学业,并且在网络恢复生机时得以同步最新数据。

现行反革命还处在 PWA 的中期,但早已有
广大中标案例

PWA 才能近日被 Firefox,Chrome
和其它基于Blink内核的浏览器扶助。微软正在极力在艾德ge浏览器上得以完结。Apple未有动作
although there are promising comments in the WebKit five-year
plan。幸运的是,浏览器援救对于
PWA 就像不太主要…

一、什么是PWA

小结

通过本节对渐进式Web应用的牵线,相信大家对PWA是怎么样已经有了中央的认知。PWA有无需忧虑有无互联网的特色,并保有独立入口与独立的护卫体制。新标准的出产很也许会带着
Web 应用在移动设备上浴火重生。所以满意 PWA
模型的前端控件,如纯前端表格控件SpreadJS,将日趋成为运动操作系统的一等百姓,并将向Native
APP发起挑战。

在下节中我们将带您1块去看看,PWA的规律是何等,以及它毕竟是何许做事的,敬请期待。

1 赞 1 收藏
评论

图片 11

PWAs 是绳趋尺步加强的

你的app还是能够运作在不支持 PWA
技能的浏览器里。用户无法离线访问,然则别的职能都像原来同样未有影响。综合利弊得失,未有理由不把你的
app 立异为 PWA。

Progressive  Web  App
, (渐进式巩固 WEB 应用)
简称 PWA
,是进步WebApp的体验的一种新点子,能给用户原生应用的体会。

不只是 Apps

Google 引领了 PWA
的1多元动作,所以大多数学科都在说哪些从零开头构建1个依据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]是可计划的,私下认可为 888八。打开 Chrome
可能别的基于Blink内核的浏览器,比方 Opera 恐怕 Vivaldi,然后输入链接
http://localhost:8888/(或许您钦点的某部端口)。你也得以张开开辟者工具看一下顺序console音信。

图片 12

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

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

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

重复浏览大4从前浏览过的页面,它们依旧可以浏览到。浏览四个事先并未有看过的页面,你会师到三个特意的离线页面,标志“you’re
offline”,还有1个您能够浏览的页面列表:

图片 13

壹.一 
PWA
的 主要特色

连天手提式有线电话机

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

图片 14

在左手采用 Settings ,点击 Add Rule 输入 8888端口。你能够在你的无绳电话机上开发Chrome,展开
http://localhost:8888/。

您能够点击浏览器菜单里的 “Add to Home
screen”。浏览多少个页面,浏览器会提示您去安装。那三种办法都得以创设一个新的Logo在你的主屏上。浏览几个页面后关掉Chrome,断开设备连接。你照旧可以展开
PWA Website app —
你会看到二个起步页,并且能够离线访问在此之前您拜访过的页面。

将你的网址创新为2个 Progressive Web App 总共有八个必备步骤:


可信 
      (
Reliable ) –
纵然在不安宁的网络情形下,也能须臾间加载并显现

第一步:开启 HTTPS

由于局地醒目标原故,PWAs 供给 HTTPS 连接。

HTTPS 在示范代码中并不是必须的,因为 Chrome 允许利用 localhost 或然别的127.x.x.x 的地点来测试。你也能够在 HTTP 连接下测试你的 PWA,你供给动用
Chrome ,并且输入以下命令行参数:

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


快 
   (
法斯特 ) –
连忙响应,并且 动画平滑流畅

第一步:创制1个 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”。

图片 15



粘性 
 (
Engaging ) –
用户能够增加到桌面和接收公告

其三步:创制三个 瑟维斯 Worker

Service Worker
是挡住和响应你的互连网请求的编制程序接口。那是2个位于你根目录的3个单独的
javascript 文件。

您的 js 文件(在示范代码中是 /js/main.js)能够检查是还是不是扶助 ServiceWorker,并且注册:

if ('serviceWorker' in navigator) {

  // register service worker
  navigator.serviceWorker.register('/service-worker.js');

}

固然您不供给离线作用,能够轻易的始建2个空的 /service-worker.js文件 ——
用户会被提拔安装你的 app。

Service Worker
很复杂,你可以修改示例代码来完成自个儿的目的。那是三个正规的 web
worker,浏览器用3个独自的线程来下载和实施它。它并未有调用 DOM 和其他页面
api
的才干,但她能够阻碍网络请求,包蕴页面切换,静态财富下载,ajax请求所引起的网络请求。

那便是急需 HTTPS
的最重大的原委。想象一下第2方代码能够阻挡来自别的网站的 service
worker, 将是八个不幸。

service worker 主要有两个事件: installactivatefetch


沉浸式的用户体验

Install 事件

那么些事件在app被安装时接触。它日常用来缓存供给的公文。缓存通过 Cache
API来实现。

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

  1. 缓存名称(CACHE)和版本号(version)。你的使用能够有三个缓存可是只好引用二个。咱们设置了版本号,这样当我们有珍视革新时,我们得以立异缓存,而忽略旧的缓存。

  2. 三个离线页面包车型大巴U奇骏L(offlineURL)。当离线时用户计划访问此前未缓存的页面时,那一个页面会呈现给用户。

  3. 二个装有离线功用的页面须求文件的数组(installFilesEssential)。这一个数组应该包括静态资源,比方CSS 和 JavaScript
    文件,但自己也把主页面(/)和Logo文件写进去了。假若主页面能够四个UXC60L访问,你应有把她们都写进去,举个例子//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()措施增添文件到缓存,那个方法用到了依赖 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 和 #二 都未果了,那就回到贰个合适的值。

// 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()格局检查是还是不是是三个图形请求,尽管是,那么重回1个饱含
“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,
取到全部 UCRUISERL的key的列表,移除全数无用 ULANDL,排序全部的列表并且把她们加到
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 隐藏

我们的以身作则代码隐藏了 USportageL 栏,我不引入那种做法,除非你有二个单 url
应用,比方三个娱乐。对于绝大繁多网址,manifest 选项 display: minimal-ui
或者 display: browser是最棒的选项。


主屏Logo     (
App Manifest )  

缓存太多

你可以缓存你网址的持有页面和富有静态文件。那对于二个小网址是实用的,但那对于上千个页面包车型客车巨型网址实际吗?未有人会对你网址的装有内容都感兴趣,而器物的内部存款和储蓄器体积将是贰个范围。即便你像示例代码同样只缓存访问过的页面和文件,缓存大小也会抓实的相当慢。

或是你要求留意:

  • 只缓存主要的页面,类似主页,和近年来的稿子。
  • 毫无缓存图片,摄像和其他大型文件
  • 常常删除旧的缓存文件
  • 提供一个缓存开关给用户,让用户决定是不是缓存


通知 
     (
Push API & Notification API )  

缓存刷新

在示范代码中,用户在央求网络前先反省该公文是或不是缓存。假如缓存,就选择缓存文件。那在离线情形下很棒,但也表示在联网状态下,用户获得的也许不是流行数据。

静态文件,类似于图片和录制等,不会时不时改造的财富,做长日子缓存未有不小的标题。你能够在HTTP
头里设置 Cache-Control 来缓存文件使其缓存时间为一年(3一,53陆,000
seconds):

Cache-Control: max-age=31536000

页面,CSS和 script
文件会时时转移,所以你应当改设置1个相当短的缓存时间比方 24时辰,并在联网时与服务端文件举办求证:

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

译自 Retrofit Your Website as a Progressive Web
App

 

1.3 
PWA
的 DEMO
  

 

天气PWA

能够在移动器物上的
Chrome
浏览器 (version
> 52) 访问

 

 

 

图片 19

 

一.三.1有网络的景色下,在
谷歌浏览器展开页面效果

 

图片 20  图片 21

 

 

图片 22  图片 23

 

1.3.
二有互联网的意况下
,点击荧屏上新调换的
天气APP图标展开页面显示效果

 

图片 24

 

此间能够见见张开的页面中
只体现内容区域
, 未有状态栏,导航栏,工具栏

 

一.3.三无网络的动静下,在QQ浏览器张开

 

 

图片 25

 

 

 

 

 

1.3.4无网络的图景下,在谷歌浏览器张开

 

 

图片 26

 

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

 

 

 

 

一.三.伍无互联网的情景下
,点击荧屏上变化的气象
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地图