PWA学习心得,改换你的网址

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

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

初稿出处: Craig
Buckler   译文出处:赐紫莺桃城控件   

近日关于渐进式Web应用有好多谈谈,有部分人还在困惑渐进式Web应用是或不是正是活动端今后。

但在那篇小说中自身并不会将渐进式应用软件和原生的APP进行比较,但有一点是足以一定的,那二种应用软件的靶子都以使用户体验变得越来越好。

挪动端Web应用有无数优异的定义让人无暇,但幸而编辑二个渐进式Web应用不是一个很拮据的事务。在那篇小说里将向你介绍怎样把八个惯常的网址转换来渐进式Web应用。你能够服从那篇小说一步一步地做,做完事后您的网站将得以兑现离线访问,并且能够在桌面上制造该网址的图标。那么下边即将上马入门教程。

图片 1

PWA学习心得

什么样是渐进式Web应用?

渐进式Web应用是壹种崭新的Web技术,让Web应用和原生应用程式的经验周围或雷同。

渐进式Web应用它能够横跨Web技术及Native
应用程式开荒的缓解方案,对于开垦者的优势如下:

  1. 你只需求关切W3C的Web标准,不用关怀各个Native 应用程式的代码。
  2. 用户能够在安装使用此前先试用。
  3. 在渐进式Web应用中,你不要求采纳种种应用商店来散发应用,也不用关爱应用发布时竟然的核查标准以及利用内购的阳台分红。此外,应用程序更新是自行举行的,无需用户交互,所以完全的使用体验对于用户来讲更为的平缓。
  4. 渐进式Web应用的“安装”进度急迅,只要求在主屏幕上增加二个图标就能够。
  5. 渐进式Web应用运转时能够呈现一个难堪的起步画面。
  6. 您可以在渐进式Web应用中提供全体全屏体验的施用。
  7. 透过系统通报等花样提升用户的粘性。
  8. 渐进式Web应用将会在当地缓存须要的公文,所以渐进式Web应用会比1般的Web应用的习性越来越好。
  9. 轻量级安装——你只须求缓存几百KB的多寡就可以。
  10. 拥有的数目传输必须接纳安全的HTTPS连接
  11. 渐进式Web应用能够离线缓存数据,并且会在再一次连接互联网时再次联合数据。

pwa

 

渐进式Web应用发展的现状

渐进式Web应用才刚刚初阶发展,但骨子里在境内,有些网址已经实际开头PWA的推行了,例如:今日头条、豆瓣、天猫商城等平台。可能那时候聪明的您或者就会发出疑问,那那几个PWA不便是和微信小程序壹样啊,对是这般,2者的指标是相同的,正是在移动端为用户提供丰富轻量且与原生应用使用体验周边的“轻”应用。

但就当下来讲,PWA是谷歌(Google)首选的壹项技术标准,FireFox,Chrome以及1些基于Blink的浏览器已经援助渐进式Web应用了,艾德ge上对渐进式Web应用的支撑还在付出。Apple公司也代表会思量在投机Safari扶助PWA。可是这项成效已经跻身了WebKit内核的5年安顿中。长时间来看,对浏览器包容性的扶助方面应当已经不算太大难点了。况且在时下,在不帮助渐进式Web应用的浏览器中,你的行使也只是无力回天选取渐进式Web应用的离线作用而已,除此而外的功用均能够寻常使用。

而在微信那边,凭借巨大的用户基数和体积能还是不可能与PWA分庭抗礼乃至笑到终极最近还不得而知。

近来有为数不少关于 Progressive Web
Apps(PWAs)的新闻,很多个人都在问那是还是不是(移动)web
的前程。作者不想陷入native app 和 PWA 的纷争,可是有1件事是分明的 —
PWA一点都不小的晋级换代了移动端表现,更始了用户体验。

图片 2

示范代码

绝超越1/二科目都讲述的是怎么在Chrome上从零初阶制作八个近似原生分界面包车型地铁使用。然则在那篇教程中,大家并不打算做三个单页面应用程序,所以在那大家也不必精晓诸如Material
Design等文化。那么上面我们就一贯看示例吧。

您能够从GitHub中获得本课程对应的以身作则代码。

本示例中提供了三个有多个网页的网址,叁个CSS文件和2个JavaScript文件。这么些网址能够在颇具的现世浏览器上健康工作(IE10+)。假使你的浏览器援助渐进式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

好音信是开垦3个 PWA
并简单。事实上,大家能够将现存的网站实行改进,使之变成PWA。那也是自笔者那篇小说要讲的
— 当你读完那篇作品,你能够将您的网址创新,让他看起来就如一个 native
web app。他可以离线工作同时具有本人的主屏图标。

 

延续移动端安装

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

图片 7图片 8

点击左侧的Settings菜单,然后加多一条端口映射(Port Forwarding)的平整,将888八映射为localhost:888八,今后你能够一向在哥哥大张开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. 用户会惨遭‘安装’的提醒,点击安装会追加1个图标到用户首屏。

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

  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发起挑战。

在下节中我们将带您一起去探视,PWA的法则是何许,以及它毕竟是何许做事的,敬请期待。

1 赞 1 收藏
评论

图片 11

PWAs 是遵纪守法巩固的

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

Progressive  Web  App
, (渐进式巩固 WEB 应用)
简称 PWA
,是升格WebApp的心得的1种新情势,能给用户原生应用的感受。

不只是 Apps

Google 引领了 PWA
的壹层层动作,所以当先二分一学科都在说什么样从零初叶营造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
文件。这几个网址能够运维在享有现代浏览器上(IE十+)。借使浏览器支持 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.一 
PWA
的 主要特征

连年手提式有线电话机

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

图片 14

在左边选取 Settings ,点击 Add Rule 输入 8888端口。你能够在您的手提式有线电话机上张开Chrome,张开
http://localhost:8888/。

你能够点击浏览器菜单里的 “Add to Home
screen”。浏览多少个页面,浏览器会提醒你去安装。那两种艺术都足以创建三个新的图标在您的主屏上。浏览多少个页面后关闭Chrome,断开设备连接。你依旧得以张开
PWA Website app —
你会看到1个运行页,并且能够离线访问在此之前您拜访过的页面。

将你的网站立异为叁个 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


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

第贰步:创制贰个 Web App Manifest

manifest 文件提供了1部分大家网址的消息,例如 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 —— 网页的先导 相对 UTiggoL(比如 /
  • scope —— 导航范围。比如,/app/的scope就限制 app 在这些文件夹里。
  • background-color —— 运维屏和浏览器的背景颜色
  • theme_color ——
    网址的宗旨颜色,一般都与背景颜色1样,它能够影响网址的呈现
  • 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 ) –
用户能够增多到桌面和接到通告

其三步:创造2个 Service Worker

Service Worker
是阻碍和响应你的互联网请求的编制程序接口。那是2个坐落你根目录的一个独立的
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,浏览器用2个单独的线程来下载和进行它。它从未调用 DOM 和其他页面
api
的力量,但他得以阻挡网络请求,包含页面切换,静态能源下载,ajax请求所引起的互连网请求。

那正是急需 HTTPS
的最要紧的缘故。想象一下第1方代码能够阻止来自别的网址的 service
worker, 将是贰个不幸。

service worker 主要有几个事件: installactivatefetch


沉浸式的用户体验

Install 事件

以此事件在app棉被服装置时接触。它时时用来缓存要求的文件。缓存通过 Cache
API来实现。

第一,大家来协会多少个变量:

  1. 缓存名称(CACHE)和版本号(version)。你的运用能够有多个缓存不过只好引用1个。大家设置了本子号,那样当我们有重点革新时,大家能够立异缓存,而忽视旧的缓存。

  2. 一个离线页面包车型大巴U锐界L(offlineURL)。当离线时用户准备访问之前未缓存的页面时,这几个页面会突显给用户。

  3. 三个怀有离线成效的页面须要文件的数组(installFilesEssential)。那些数组应该包罗静态能源,比如
    CSS 和 JavaScript
    文件,但自身也把主页面(/)和图标文件写进去了。假如主页面能够三个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()方式加多文件到缓存,那个主意用到了依照 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()方法检查是或不是是贰个图片请求,若是是,那么重回二个含有
“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奥迪Q5L的key的列表,移除全数无用 U中华VL,排序全数的列表并且把她们加到
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 陷阱

有几点必要留意:


离线可用     (
瑟维斯Worker )
 

URL 隐藏

咱俩的演示代码隐藏了 UEvoqueL 栏,笔者不推荐那种做法,除非你有一个单 url
应用,比如三个戏耍。对于大多数网址,manifest 选项 display: minimal-ui
或者 display: browser是最佳的抉择。


主屏图标     (
App Manifest )  

缓存太多

你能够缓存你网址的有着页面和持有静态文件。那对于八个小网址是有效的,但那对于上千个页面包车型大巴特大型网址实际吗?未有人会对你网址的拥有内容都感兴趣,而装备的内部存款和储蓄器体积将是二个限量。固然你像示例代码1样只缓存访问过的页面和文书,缓存大小也会增高的非常的慢。

也许你须求专注:

  • 只缓存首要的页面,类似主页,和近来的篇章。
  • 不用缓存图片,录制和其余大型文件
  • 平时删除旧的缓存文件
  • 提供一个缓存开关给用户,让用户决定是还是不是缓存


通知 
     (
Push API & Notification API )  

缓存刷新

在示范代码中,用户在伸手网络前先反省该公文是还是不是缓存。倘使缓存,就使用缓存文件。那在离线意况下很棒,但也意味着在联网状态下,用户获得的大概不是新型数据。

静态文件,类似于图片和录制等,不会时常转移的能源,做长日子缓存未有十分大的难点。你能够在HTTP
头里设置 Cache-Control 来缓存文件使其缓存时间为一年(3一,53陆,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) 访问

 

 

 

图片 19

 

壹.三.1有互联网的图景下,在
谷歌(谷歌(Google))浏览器展开页面效果

 

图片 20  图片 21

 

 

图片 22  图片 23

 

一.3.
二有网络的情事下
,点击显示器上新变化的
天气APP图标
张开页面显示效果

 

图片 24

 

那边能够见到张开的页面中
只展现内容区域
, 未有状态栏,导航栏,工具栏

 

1.三.叁无网络的气象下,在QQ浏览器打开

 

 

图片 25

 

 

 

 

 

1.三.4无互联网的景况下,在谷歌(谷歌)浏览器张开

 

 

图片 26

 

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

 

 

 

 

一.三.5无网络的景况下
,点击荧屏上变化的天气应用软件图标

 

图片 27

 

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

 

 

 参考资料

  1. Progressive Web Apps
  2. 什么是PWA

 

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

 


 
它是1种 Web Worker  


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


 
它是一种极度的Web Worker,能够阻挡网络请求


 
它不得不运转在HTTPS协议上


 
它还可以够经受推送消息和 处理后台同步


 
它 壹但被登记就恒久存在,除非显示unregister


 
它 是
PWA
的核心

 

 

什么是Web
Worker?

当在HTML页面中施行脚本时,页面包车型地铁事态是不行响应的,直到脚本已到位。
web
worker  是运作在后台的JavaScript,独立于别的脚本,不会潜移默化页面包车型客车天性。您能够三番五遍做任何愿意做的事体:点击、选拔内容等等,而那时候
web  worker在后台运转 .

 

浏览器一般有3类 web
Worker

Dedicated
Worker
:专用的worker,只可以被创立它的
JS 访问,创建它的页面关闭,它的生命周期就身故了。

Shared  Worker
:共享的
worker,能够被同壹域名下的JS访问,关联的页面都关门时,它的生命周期就得了了。

ServiceWorker :是事件驱动的
worker,生命周期与页面毫不相关,关联页面未关门时,它也得以脱离,未有提到页面时,它也足以运转,

 

二.1Service  Worker 怎样行事

图片 28

 

 

 

2.2
Service  Worker 兼容性

图片 29

单击能够查看详情

 

贰.三Service  Worker 生命周期

 

图片 30

 

生命周期分为这么多少个情景
 


安装中
  ( installing
 
)


安装
后  (
installed
)


激活
中 
    (
activating
)


激活后   (
activated
)


废弃 
 ( redundant
)


安装
( installing  )

以此意况发生在 ServiceWorker 注册之后,表示起初安装,触发 install
事件回调钦定一些静态能源进行离线缓存。

install
事件回调中有三个格局:

event.waitUntil()
:传入3个 Promise
为参数,等到该 Promise 为 resolve 状态甘休。

self.skipWaiting()
:self 是日前 context
的 global 变量,执行该措施表示强制当前处在 waiting 状态的 Service Worker
进入 activate 状态。


安装后(
installed
)

Service Worker
已经完毕了安装,并且等待其余的 Service Worker 线程被关门。

 


激活(
activating ):

在那些情状下未有被其余的
Service Worker 控制的客户端,允许当前的 worker
完毕安装,并且解决了别的的 worker 以及涉嫌缓存的旧缓存能源,等待新的
Service Worker 线程被激活。

activate
回调中有七个方法:

event.waitUntil()
:传入3个 Promise
为参数,等到该 Promise 为 resolve 状态甘休。

self.clients.claim()
:在 activate
事件回调中实践该措施表示收获页面包车型地铁控制权,
那样之后展开页面都会动用版本更新的缓存。旧的 Service Worker
脚本不再控制着页面,之后会被终止。


激活后(
activated
)

在那么些状态会处理
activate 事件回调
(提供了创新缓存策略的火候)。并得以处理功用性的轩然大波 fetch
(请求)、 sync
(后台同步)、
push
(推送)。


抛弃状态
 
(
redundant
)

其一地方表示一个Service Worker 的生命周期截止。

此处尤其说Bellamy(Bellamy)下,进入放任(redundant) 状态的缘故大概为那二种:

安装
(install) 失败

激活
(activating) 失败

新本子的
Service Worker 替换了它并改为激活状态

 

2.4
Service   Worker 注册

 

//index.html

if 
(
‘serviceWorker’
in
navigator
)
{
navigator
.serviceWorker.register(
‘/service-worker.js’
)
   
. then
(
function
(reg) 
{
console
.
log
(
‘Service
Worker registered’ ,
reg)
;
})
   
.catch( function 
(error) 
{
console
.
error
(
‘Error
registering  Service  Worker’ ,
error)
;
})
;
}

 

翻开是还是不是注册成功

可以在
PC 上chrome 浏览器, 输入 chrome://inspect/#service-workers

图片 31

2.5
Service  Worker 安装

 

//
service-worker.js

 

self
.
addEventListener
(
‘install’

function
(event) 
{
return
self
.skipWaiting()
;
})
;

 

 

2.6
Service  Worker 调试

 


借助
Chrome 浏览器 debug

运用 Chrome
浏览器,能够经过进入控制台 Application -> Service Workers
面板查看和调剂。如下图所示:

图片 32

 


查看
Service Worker 缓存内容

ServiceWorker 使用 Cache API 缓存只读能源,能够在 Chrome DevTools
上查看缓存的财富列表。

 图片 33

 

图片 34

 


网络跟踪

 

由此Service Worker 的 fetch 请求 Chrome 都会在 Chrome DevTools Network
标签页里标注出来,当中:

 


来自
Service Worker 的始末会在 Size 字段中标注为 from ServiceWorker


ServiceWorker 发出的乞求会在
Name
字段中增多‘齿轮’
图标。

 

图片 35

 


安卓真机
debug

 

2.7
其它
详细API

 

别的详细API可以参照【参考资料】中的
一和 陆

 

 参考资料

1.
Service
Wor k
e
r
s
Nigh t
l
y

2.
页面守护者:ServiceWorker

3.
PWA,准备好了吗?

4.
PWA兼容性

5.
怎样进展
Service Worker
调节和测试

6.
网址渐进式加强体验(PWA)更改:ServiceWorker 应用详解

 

3、
APPManifest 与丰裕到主显示屏

允许将站点增添至主显示器,是
PWA 提供的1项主要成效

三.一概念 manifest.json
配置加上到主荧屏功用


创设 manifest.json
文件,并将它放到你的站点目录中


在颇具页面引进该公文


能够在 Service Worker
中监听 beforeinstallprompt 事件做一些选择内的行为处理

 

在页面 head
区域增加如下内容:

<
link
rel= “manifest”
href=
“manifest.json”
/>

manifest.json

{
“name”
:
“Minimal
PWA” ,
“short_name”
:
“PWA
Demo” ,
“display”
:
“standalone”
,
“start_url”
:
“/”
,
“theme_color”
:
“#313131”
,
“background_color”
:
“#313131”
,
“icons”
:
[
   
{
“src”
:
“e.png”
,
“sizes”
:
“256×256”
,
“type”
:
“image/png”
}
 
]
}

 

在那几个manifest.json文件中,我们得以轻巧收获那几个PWA的新闻:

 


name
:定义此PWA的名称。


icons
:定义壹雨后苦笋的图标以适应不一致型号的装置。


theme_color
:主旨颜色(影响手机状态栏颜色)。


background_color
:背景颜色。


start_url
:运行地址。由于PWA实际上是二个web页面,所以需求定义PWA
在运维时应该访问哪个地点。


display
:“standalone”表示其以接近原生APP的全屏形式运转。

 

增多主屏幕效果

 

图片 36  图片 37

 

 

叁.2设置 IOS Safari
上的增多至主荧屏成分

 

利用图标:
<
link
rel= “apple-touch-icon”
href=
“apple-touch-icon.png”
>
起步画面:
<
link
rel= “apple-touch-startup-image”
href=
“launch.png”
>
行使名称:
<
meta
name= “apple-mobile-web-app-title”
content=
“Todo-PWA”
>
全屏效果:
<
meta
name= “apple-mobile-web-app-capable”
content=
“yes”
>
安装意况栏颜色:
<
meta
name= “apple-mobile-web-app-status-bar-style”
content=
“#fff”
>

 

 

 

 

叁.3 设置window十贴片图标

<
meta
name= “msapplication-TileImage”
content=
“images/logo/144×144.png”
>
<
meta
name= “msapplication-TileColor”
content=
“#2F3BA2”
>

3.4在线生成
manifest.json
文件


https://app-mani
f
est.firebaseapp.com/


https://tomitm.github.io/appmanifest/


https://brucelawson.github.io/manifest/

 

在概念好 manifest.json
文件后,我们可以透过Chrome的开荒者工具看到详细的始末:

图片 38

 

 参考资料

  1. Web
    App
    Manifest

  2. manifest.json
    简介

 

 

 

 

四、
App
Shell

App
Shell,顾名思义,正是“壳”的意思,也足以清楚为“ 骨架屏
”,说白了就是在内容并未有加载完全的时候,优先展现页面包车型大巴布局、占位图、主旨和背景颜色等,它们都以局部被强缓存的html,css和javascript。

 

要用好App
Shell,就非得保障那有的的能源被ServiceWorker缓存起来。大家在集团代码的时候,能够优先完毕App
Shell的部分,然后把那部分代码分别打包创设出来。

 

4.1 优势


始终火速的保证质量


就如本机一样的竞相


数据的经济使用

 

 参考资料

  1. App
    Shell
    模型

 

 

伍、
使用Offine-Plugin把网址进级成
PWA

 参考资料

  1. offline-plugin

  2. offline-plugin
    DEMO

  3. 动用offline-plugin搭配webpack轻易达成PWA

 

6、
与PWA相关的开源框架

6.1 Lavas

基于 Vue 的 PWA
化解方案,扶助开采者急迅搭建 PWA 应用,化解接入 PWA 的各个难题

图片 39

 

 参考资料

  1. Lavas

  2. Lavas
    GitHub

 

Post Author: admin

发表评论

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