创建一个离线优先的渐进式 Web 应用  

构建一个渐进式 Web 应用,该应用具有 Web 应用的便捷性与原生应用的高性能

Description

购物清单(Shopping List)是一系列离线优先的渐进式 Web 应用演示,这些演示是使用 Vanilla JS(纯 JavaScript)、React、Preact、Polymer、Ember.js 和 Vue.js 构建的。所有实现都使用 PouchDB。此应用可在离线时运行,并在联网时与 Cloudant® NoSQL DB 进行数据同步。

概览

我们创建了一系列离线优先的演示应用,其中每个应用都是使用不同堆栈构建的。具体的实现包括 Vanilla JS(纯 JavaScript)、React、Preact、Polymer、Ember.js 和 Vue.js。通过使用 Service Worker 和 PouchDB,可在本地缓存购物清单数据,以允许应用离线运行。当联网时,PouchDB 将与 Cloudant NoSQL DB 或 Apache CouchDB 同步,以允许跨设备共享购物清单。

使用您所选的技术堆栈完成此 Code Pattern 后,您将学会如何:

  • 实现一个应用数据库,可在离线时使用本地数据在浏览器中运行,并且在联网时与远程数据库同步。
  • 创建一个离线优先的渐进式 Web 应用。

  1. 用户使用离线优先的渐进式 Web 应用(Offline First Progressive Web App)来管理购物清单。
  2. 使用 Vanilla JS(纯 JavaScript)、React、Preact、Polymer、Ember.js 或 Vue.js. 构建渐进式 Web 应用,利用 Service Worker 支持此应用离线运行。
  3. 离线时购物清单存储在本地 PouchDB 数据库中。
  4. 在联网时,PouchDB 数据库会与 IBM Cloudant 数据库进行同步。

相关博客

相关链接

英文原文

本 Code Pattern 翻译自:Create an offline-first shopping list progressive web application(2017-12-01)

架构中心

了解如何将本 Code Pattern 融入到 Web 应用程序参考架构中。

Web 组件

了解可定制、可重用的封装组件和窗口小部件的开放标准。

Polymer App Toolbox

查看使用 Polymer 和 Web 组件构建渐进式 Web 应用所需的组件、工具和模板。