构建离线web应用(二)

本文由哔哩哔哩前端工程师 墨白 翻译分享

上一篇文章中,我们成功尝试使用 service workers。我们也可以在应用中缓存一些资源。这篇文章我们准备了解这些:service workers 以及缓存是如何一起配合给用户一个完美的离线体验。

在前一个章节当我们学习如何 debugger 的时候,我们了解到浏览器的缓存存储。提及缓存时,不仅仅是指存储,还包括浏览器内用来保存数据以供离线使用的策略。

在这篇文章中,我们将要:

  • 了解社区中常见的缓存策略
  • 尝试可用的缓存 api
  • 做一个用来展示 Github trending project 的 demo
  • 在 demo 中演示离线状态下利用缓存所带来的体验

缓存策略

软件工程中的每一个理论都是对同一类问题解决方案的总结,每一个都需要时间整理并被大众接受,成为推荐的解决方案。对于 PWA 的缓存策略来说同样如此。Jake Archibald 汇总了很多常用的方案,但我们只打算介绍其中一些常用的:

Install 期间缓存

这个方案我们在上一篇文章中介绍过,缓存 app shell 展示时需要的所有资源:

self.addEventListener('install', function(e) {  console.log('[ServiceWorker] Install');  e.waitUntil(    caches.open(cacheName).then(function(cache) {      console.log('[ServiceWorker] Caching app shell');      return cache.addAll(filesToCache);    })  );});

缓存的资源包括 HTML 模板,CSS 文件,JavaScript,fonts,少量的图片。

缓存请求返回的数据

这个方案是指如果之前的网络请求数据被缓存了,那么就用缓存的数据更新页面。如果缓存不可用,那直接去网络请求数据。当请求成功返回时,利用返回的数据更新页面并缓存返回的数据。

self.addEventListener('fetch', function(event) {  event.respondWith(    caches.open(cacheName).then(function(cache) {      return cache.match(event.request).then(function (response) {        return response || fetch(event.request).then(function(response) {          cache.put(event.request, response.clone());          return response;        });      });    })  );});

这种方案主要应用用户频繁手动更新内容的场景,比如用户的收件箱或者文章内容。

先展示缓存,再根据请求的数据更新页面

这种方案将同时请求缓存以及服务端的数据。如果某一项在缓存中有对应的数据,好,直接在页面中展示。当网络请求的数据返回时,利用返回的数据更新页面:

let networkReturned = false;if ('caches' in window) {  caches.match(app.apiURL).then(function(response) {    if (response) {      response.json().then(function(trends) {        console.log('From cache...')        if(!networkReturned) {          app.updateTrends(trends);        }      });    }  });}fetch(app.apiURL).then(response => response.json()).then(function(trends) {  console.log('From server...')  networkReturned = true;  app.updateTrends(trends.items)}).catch(function(err) {  // Error});

在大多数情况下,网络请求返回的数据会将从缓存中取出的数据覆盖。但在网页中,什么情况都有可能发生,有时候网络请求数据比从缓存中取数据要快。因此,我们需要设置一个 flag 来判断网络请求有没有返回,这就是上例中的 networkReturned。

缓存部分技术选型

目前有两种可持续性数据存储方案 -- Cache Storage 以及 Index DB(IDB)。

  • Cache Storage:在过去的一段时间里,我们依赖 AppCache 来进行缓存处理,但我们需要一个可操作性更强的 API。幸运的是,浏览器提供了 Cache 这样的一个 API,给 Service Worker 的缓存操作带来了更多的可能。并且,这个 API 同时支持 service workers 以及 web 页面。在前一篇文章中,我们已经使用过了这个 API。
  • Index DB:Index DB 是一个异步数据存储方案。对于这个 API 是又爱又恨,还好,像localForage这样的类库使用类似localStorage的操作方式简化了API。

Service Worker 对于这两种存储方案都提供支持。那么问题来了,什么场景下选择哪一种技术方案呢? Addy Osmani 的博客已经总结好了。

对于利用 URL 可直接查看的资源,使用支持 Service Worker 的 Cache Storage。其它类型的资源,使用利用 Promise 包裹之后的 IndexedDB。

SW Precache

上文已经介绍了缓存策略以及数据缓存数据。在实战之前,还想给大家介绍一下谷歌的 SW Precache。

这个工具还有一个额外的功能:将我们之前讨论的缓存文件设置利用正则简化成一个配置对象。所有你需要做的就是在一个数组中定义缓存的项目。

让我们来尝试使用一下 precache,让其自动生成 service-worker.js。首先,我们需要在项目的根目录下新增一个 package.json 文件:

npm init -y

安装 sw-precache:

npm install --save-dev sw-precache

创建一个配置文件:

// ./tools/precache.jsconst name = 'scotchPWA-v1'module.exports = {  staticFileGlobs: [    './index.html',    './images/*.{png,svg,gif,jpg}',    './fonts/**/*.{woff,woff2}',    './js/*.js',    './css/*.css',    'https://fonts.googleapis.com/icon?family=Material+Icons'  ],  stripPrefix: '.'};

staticFileGlobs 里面利用正则匹配我们想要缓存的文件。只需要利用正则,比之前枚举所有的文件简单很多。

package.json 中新增一个 script 用来生成 service worker 文件:

"scripts": {  "sw": "sw-precache --config=tools/precache.js --verbose"},

运行下面的命令即可生成 service worker 文件:

npm run sw

查看生成的文件,是不是很熟悉?

完成 demo

在做 web 应用离线功能之前,让我们先来完成应用的基本功能。

回到 app.js 文件,我们要在页面加载完成时去获取当前 Github 流行的项目(项目以 star 数的多少来排序):

(function() {  const app = {    apiURL: `https://api.github.com/search/repositories?q=created:%22${dates.startDate()}+..+${dates.endDate()}%22%20language:javascript&sort=stars&order=desc`  }  app.getTrends = function() {    fetch(app.apiURL)    .then(response => response.json())    .then(function(trends) {      console.log('From server...')      app.updateTrends(trends.items)    }).catch(function(err) {      // Error    });  }  document.addEventListener('DOMContentLoaded', function() {    app.getTrends()  })  if ('serviceWorker' in navigator) {    navigator.serviceWorker     .register('/service-worker.js')     .then(function() {         console.log('Service Worker Registered');       });  }})()

注意 API URL 字符串中的日期。我们是这样构造的:

Date.prototype.yyyymmdd = function() {  // getMonth is zero based,  // so we increment by 1  let mm = this.getMonth() + 1;  let dd = this.getDate();  return [this.getFullYear(),          (mm>9 ? '' : '0') + mm,          (dd>9 ? '' : '0') + dd        ].join('-');};const dates = {  startDate: function() {     const startDate = new Date();     startDate.setDate(startDate.getDate() - 7);     return startDate.yyyymmdd();   },   endDate: function() {     const endDate = new Date();     return endDate.yyyymmdd();   } }

yyyymmdd 帮我们将日期构造成 Github API 所规定的格式( yyyy-mm-dd)。

getTrends 获取数据之后,调用了 updateTrends 方法,传入获取到的数据。让我们看看这个方法做了些什么:

app.updateTrends = function(trends) { const trendsRow = document.querySelector('.trends');  for(let i = 0; i < trends.length; i++) {    const trend = trends[i];    trendsRow.appendChild(app.createCard(trend));  }}

遍历请求返回的数据,利用 createCard 来创建 DOM 模板,然后,将这段 DOM 插入 .trends 元素:

<!-- ./index.html --><div class="row trends"> <!-- append here --></div>

createCard 利用下面的代码来创建模板:

const app = {  apiURL: `...`,  cardTemplate: document.querySelector('.card-template')}app.createCard = function(trend) {  const card = app.cardTemplate.cloneNode(true);  card.classList.remove('card-template')  card.querySelector('.card-title').textContent = trend.full_name  card.querySelector('.card-lang').textContent = trend.language  card.querySelector('.card-stars').textContent = trend.stargazers_count  card.querySelector('.card-forks').textContent = trend.forks  card.querySelector('.card-link').setAttribute('href', trend.html_url)  card.querySelector('.card-link').setAttribute('target', '_blank')  return card;}

下面就是所创建的 DOM 结构:

<div class="row trends">  <divclass="col s12 m4 card-template">    <div class="card horizontal">      <div class="card-stacked">        <div class="card-content white-text">          <span class="card-title">Card Title</span>          <div class="card-sub grey-text text-lighten-2">            <i class="material-icons">info</i><span class="card-lang"> JavaScript</span>            <i class="material-icons">star</i><span class="card-stars"> 299</span>            <i class="material-icons">assessment</i><span class="card-forks"> 100</span>          </div>          <p>A set of best practices for JavaScript projects</p>        </div>        <div class="card-action">          <a href="#" class="card-link">Visit Repo</a>        </div>      </div>    </div>  </div></div>

运行时缓存的内容

在应用程序运行时,需要缓存从服务端获取的动态内容。不再是 app shell 了,而是用户真正浏览的内容。

我们需要提前配置告诉 service worker ,在运行时需要缓存的文件:

// ./tools/precache.jsconst name = 'scotchPWA-v1'module.exports = {  staticFileGlobs: [    // ...  ],  stripPrefix: '.',  // Run time cache  runtimeCaching: [{    urlPattern: /https:\/\/api\.github\.com\/search\/repositories/,    handler: 'networkFirst',    options: {      cache: {        name: name      }    }  }]};

我们定义了一个 url 正则匹配符,匹配成功时,读取缓存。这个正则匹配所有的 Github 搜索 API。我们打算应用“Cache, Then network.”的策略。

这样,我们先展示缓存的内容,当有网络连接时候,更新内容:

app.getTrends = function() { const networkReturned = false;  if ('caches' in window) {    caches.match(app.apiURL).then(function(response) {      if (response) {        response.json().then(function(trends) {          console.log('From cache...')          if(!networkReturned) {            app.updateTrends(trends);          }        });      }    });  }  fetch(app.apiURL)  .then(response => response.json())  .then(function(trends) {    console.log('From server...')    app.updateTrends(trends.items)    networkReturned = true;  }).catch(function(err) {    // Error  });}

precache.js 中更新缓存的版本,重新生成 service worker:

const name = 'scotchPWA-v2'
npm run sw

当你运行应用的时候,尝试刷新,打开控制台,勾选 offline 选项。之后,刷新,以及见证奇迹的时刻:

刷新

用户可能需要在网络情况更佳的时候刷新页面,我们需要给予用户这样的权利。我们可以给刷新按钮添加一个事件,当时间触发时,调用 getTrends 方法:

document.addEventListener('DOMContentLoaded', function() { app.getTrends() // Event listener for refresh button const refreshButton = document.querySelector('.refresh'); refreshButton.addEventListener('click', app.getTrends)})

下一步?

感觉不是很满足?现在你已经知道了如何创建离线应用,在接下来的文章中,我们将继续讨论这项技术的有趣之处,包括推送通知,主屏幕图标创建等等···

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2017-12-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏工科狗和生物喵

搭建你自己的网站--LAMP架构(Ubuntu 16.04)

笔者目前算是一个WEB方向的踽踽前行的小菜鸟,但是也是现在手上有两台云服务器在手的人了,网站也做了两个了,所以,今天接着昨天的话题,我们来搭建一个自己网站,这样...

8895
来自专栏美团技术团队

LsLoader——通用移动端Web App离线化方案

背景 由于JavaScript(以下简称JS)语言的特性,前端作用域拆分一直是前端开发中的首要关卡。从简单的全局变量分配,到RequireJS实现的AMD模块方...

45717
来自专栏Android群英传

PWA程序实践

882
来自专栏IT派

Python入门网络爬虫之精华版

首先列举一下本人总结的相关文章,这些覆盖了入门网络爬虫需要的基本概念和技巧:宁哥的小站-网络爬虫

1222
来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性。主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5...

2498
来自专栏软件测试经验与教训

看图说话:持久式XSS(跨站)漏洞示例

读书与实践是获取知识的主要渠道,学习的权力只掌握在每个人自己手中,让学习成为一种生活的习惯,这比任何名牌大学的校徽重要得多!

2402
来自专栏全栈之路

工作以来用过的工具和网站

这是一个特别棒的编辑器,支持各种语言,内部集成了插件下载工具和git版本管理工具,而且界面结构特别简洁优雅,重要的它还是免费的。目前用它来开发服务器端,使用语言...

1062
来自专栏沈唁志

如何在Ubuntu 16.04上安装PrestaShop

如果您曾经考虑过开设在线商店,您可能会感受到各种免费的开源电子商务解决方案。虽然有这么多的选择意味着几乎可以肯定有一个可用的有效解决方案适合您的特定情况,但它也...

3113
来自专栏腾讯NEXT学位

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(上)

? 小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打...

1671
来自专栏用户2442861的专栏

Chrome开发者工具不完全指南(二、进阶篇)

上篇向大家介绍完了基础功能篇,这次分享的是Chrome开发工具中最有用的面板Sources。  Sources面板几乎是我最常用到的Chrome功能面板,也是...

951

扫码关注云+社区

领取腾讯云代金券