在之前的文章IntroducingProgressiveWebApp(Offline)-Part1中，我们讨论了一个典型的pwa应该是什么样子，也介绍了serverworker。到目前为止，我们已经缓存了应用程序外壳。在index.html和latet.html页面中，我们的应用实现了缓存数据的离线加载。在重复访问时，它们加载速度更快。在教程的第一部分结束时，我们能够离线加载latest.html，但无法在用户离线时显示动态数据。在本研究中，我们将：当用户离线时，将显示在最新页面上以缓存应用程序的数据。使用localStorage来存储应用程序的数据。当用户连接到互联网时，替换应用程序的旧数据并获取更新的数据。离线存储在构建PWA时，需要考虑各种存储机制：IndexedDB：这是一个用于客户端存储数据的事务数据库系统。IndexedDB允许您存储和检索使用键索引的对象，以便对存储在其中的数据进行高性能搜索。IndexedDB公开了一个异步API以避免阻塞DOM加载。但一些研究表明，在某些情况下，它是阻塞的。我建议在使用IndexedDB时使用一些第三方库，因为在JavaScript中操作它可能非常冗长和复杂。比如：localForage、idb、idb-keyval等第三方模块都很好。indexDB在浏览器中的兼容性CacheAPI：这是存储URL地址资源的最佳选择。它与Serviceworker配合得很好。PouchDB：是用于CouchDB的开源JavaScript数据库。它使应用程序能够在本地、离线存储数据，然后在应用程序恢复在线时与CouchDB和兼容的服务器应用程序同步，无论用户下次在哪里登录，都可以保持用户数据同步。PouchDB支持所有现代浏览器。如果IndexedDB引擎出现故障，它将降级为WebSQL。Firefox29+（包括FirefoxOS和FirefoxforAndroid）、Chrome30+、Safari5+、InternetExplorer10+、Opera21+、Android4.0+、iOS7.1+、WindowsPhone8+等均兼容。WebStorage如localStorage：它是同步的，防止DOM加载，在浏览器中最多使用5MB，有一个简单的api来操作和存储键值对数据。WebStorage的浏览器兼容表WebSQL：这是浏览器的关系数据库解决方案。它已被弃用，因此浏览器将来可能不支持它。根据PouchDB维护者NolanLawson的说法，在使用数据库时，问自己这些问题是个好主意：这个数据库是在内存中还是在磁盘上？（PouchDB、IndexedDB）？什么需要存储在磁盘上？应用程序关闭或崩溃时应保存哪些数据？执行快速查询需要哪些索引？我可以使用内存索引而不是磁盘索引吗？我应该如何构建我的内存数据与我的数据库数据？我在两者之间的映射策略是什么？我的应用程序的查询需求是什么？显示视图真的需要获取全部数据，还是只需要获取所需数据的一小部分？我可以延迟加载任何东西吗？您可以查看考虑数据库选择以更全面地了解主题。事不宜迟，让我们在我们的网络应用程序中实现即时加载。我们将使用localStorage。由于我在本教程前面强调的限制，我建议您不要在生产中使用localStorage。我们正在构建的应用程序非常简单，因此使用了localStorage。打开您的js/latest.js文件，我们更新fetchCommits方法以将从GithubAPI拉取的数据存储在localStorage中。代码如下：functionfetchCommits(){varurl='https://api.github.com/repos/unicodeveloper/resources-i-like/commits';fetch(url).then(function(fetchResponse){returnfetchResponse.json();}).then(function(response){console.log("来自Github的响应",response);varcommitData={};for(vari=0;i作者："+响应[i].commit.author.name+"
"+"提交时间："+(newDate(response[i].commit.author.date)).toUTCString()+"
"+""+"
";}app.spinner.setAttribute('hidden',true);//隐藏微调器}).catch(function(error){console.error(error);});};上面有这段代码，当第一个页面加载时，提交的数据会存储在localStorage中，那么现在我们再写一个函数来渲染这些localStorage数据代码如下：//从WebStorage获取提交数据functionfetchCommitsFromLocalStorage(data){varlocalData=JSON.parse(data);app.spinner.setAttribute('隐藏',true);//hidespinnerfor(vari=0;i作者："+localData[posData[i]].author+"
"+"提交时间："+(newDate(localData[posData[i]].time)).toUTCString()+"
"+""+"
";}};此代码从本地存储中获取数据并将其呈现给dom节点。现在我们需要知道在什么条件下调用fetchCommits函数和fetchCommitsFromLocalStorage函数。js/latest.js代码如下(function(){'usestrict';varapp={spinner:document.querySelector('.loader')};varcontainer=document.querySelector('.container');varcommitContainer=['.first','.second','.third','.fourth','.fifth'];varposData=['first','second','third','fourth','fifth'];//检查localStorage是否受支持且可用returntrue;}catch(e){returnfalse;}}//从GithubAPI函数获取提交数据fetchCommits(){varurl='https://api.github.com/repos/unicodeveloper/resources-i-like/commits';fetch(url).then(function(fetchResponse){returnfetchResponse.json();}).then(function(response){console.log("来自Github的响应",response);varcommitData={};对于（变量i=0;i作者："+response[i].commit.author.name+"
"+"提交时间："+(newDate(response[i].commit.author.date)).toUTCString()+"
"+""+"
";}app.spinner.setAttribute('hidden',true);//隐藏微调器}).catch(函数(错误){console.error(错误);});};//从WebStorage获取提交数据functionfetchCommitsFromLocalStorage(data){varlocalData=JSON.parse(data);app.spinner.setAttribute('隐藏',true);//hidespinnerfor(vari=0;i作者："+localData[posData[i]].author+"
"+"提交时间："+(newDate(localData[posData[i]].time)).toUTCString()+"
"+""+"
";}};if(storageAvailable('localStorage')){if(localStorage.getItem('commitData')===null){/*用户是第一次使用该应用，或者用户还没有*保存了任何提交数据，因此向用户显示一些虚假数据。*/fetchCommits();console.log("从API获取");}else{fetchCommitsFromLocalStorage(localStorage.getItem('commitData'));console.log("从本地存储获取");}}else{toast("我们还不能缓存你的应用数据..");}})();在上面的代码片段中，我们正在检查浏览器是否支持本地存储，如果支持，我们继续检查提交的数据是否已被缓存。如果没有，我们请求数据，将其显示在页面上并缓存请求的数据。现在，再次刷新浏览器，确保清除缓存，强制刷新，否则我们将看不到代码更改的结果。现在，离线并加载最新页面。会发生什么？耶！！！它加载数据没有任何问题。查看DevTools，你可以看到数据缓存在localStorage中，当用户离线时，看看加载速度有多快！！！现在还有一件事，我们可以立即从本地存储中获取数据。但是我们如何获得最新的数据呢？我们需要一种在用户在线时仍能获取新数据的方法。如此简单，让我们添加一个刷新按钮，触发对GitHub的请求以获取最新数据。打开latest.html文件并在
