离线优先

由于互联网连接可能不稳定或不存在,因此您需要先考虑离线操作: 像没有互联网连接一样编写应用。当您的应用可离线工作后,添加任何 所需的网络功能,让应用在线时能够执行更多操作。继续阅读,了解 实现已启用离线功能的应用。

概览

Chrome 应用可免费获得以下功能:

  • 应用的文件,包括应用的所有 JavaScript、CSS 和字体,以及所需的其他资源(例如 图片)- 已下载
  • 您的应用可以使用 Chrome Storage API 保存并选择同步少量数据。
  • 您的应用可以通过监听在线和离线事件检测连接变化

但这些功能并不足以保证您的应用可离线工作。您已启用离线功能 应用应遵循以下规则:

尽可能使用本地数据。
在使用互联网上的资源时,请使用 XMLHttpRequest 获取,然后保存数据 。您可以使用 Chrome Storage API、IndexedDB 或 Filesystem API 在本地保存数据。
将应用界面与数据分开。
分离界面和数据不仅能改善应用的设计,还能简化启用所需功能的任务 离线使用,但也可让您提供用户数据的其他视图。MVC 框架可以帮助您 需要将界面和数据分开。
假设您的应用可以随时关闭。
保存应用状态(尽可能在本地和远程),以便用户随时随地轻松继续 继续进行后续操作
全面测试您的应用。
确保您的应用在常见和棘手的场景中都能正常运行。

安全限制

Chrome 应用在可放置资源方面受到限制:

  • 由于本地数据在用户的计算机上可见,无法进行安全加密,因此 数据必须保留在服务器上。例如,请勿将密码或信用卡号存储在本地。
  • 应用执行的所有 JavaScript 都必须位于应用的软件包中。它不能内嵌。
  • 所有 CSS 样式图片字体最初都可以位于应用的软件包中 或远程网址如果资源是远程资源,则您无法在 HTML 中指定它。而是获取 使用 XMLHttpRequest 的数据(请参阅引用外部资源)。然后参阅 数据,或者(最好)保存数据,然后使用 Filesystem API 加载数据。

不过,您可以加载大量媒体资源,例如来自外部网站的视频和声音。一个 这条规则例外的原因是,<video><audio> 元素具有良好的回退 行为。另一个原因是 具有 XMLHttpRequest 和 blob 网址的媒体目前不支持流式传输或部分缓冲。

若要提供沙盒化 iframe,您可以创建 <webview> 代码。其内容可以远程访问 无法直接访问 Chrome 应用 API(请参阅嵌入外部网页)。

针对 Chrome 应用的部分限制是由内容安全政策 (CSP) 强制执行的,该政策 始终为以下值,并且无法针对 Chrome 应用进行更改:

default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;

指定 offline_enabled

假定您的应用在离线状态下运行良好。如果不是,您就应该宣传这一事实, 在用户离线时,其启动图标会变暗。为此,请将 offline_enabled 设置为 false应用清单文件中:

{
  "name": "My app",
  ...
  "offline_enabled": false,
  ...
}

在本地保存数据

下表显示了在本地保存数据的选项(另请参阅管理数据)。

API最佳用途备注
Chrome Storage API少量字符串数据非常适合设置和状态。易于远程同步(但无需您这样做)。由于配额限制,不适合处理大量数据。
索引型数据库 API结构化数据支持快速搜索数据。使用 unlimitedStorage 权限
文件系统 API其他提供一个可用于存储文件的沙盒区域。使用 unlimitedStorage 权限

远程保存数据

一般来说,您可以自行决定如何远程保存数据,但一些框架和 API 可以提供帮助(请参阅 MVC “架构”部分。如果您使用 Chrome Storage API,则所有可同步的数据都会自动 在应用处于在线状态且用户登录 Chrome 时进行同步。如果用户没有登录, 系统会提示他们登录不过请注意,如果用户的已同步数据 卸载您的应用。{QUESTION: true?}

考虑保存用户的确保用户在卸载应用后至少能保留 30 天的数据 为他们提供良好的使用体验

将界面与数据分离开

MVC 框架可以帮助您设计和实现您的应用 与应用的数据视图分开显示有关 MVC 框架的列表,请参阅 MVC 架构

如果您的应用与自定义服务器通信,该服务器应为您提供数据,而不是 HTML 块。考虑 来介绍 RESTful API

将数据与应用分离后,提供数据的其他视图就容易多了。 例如,您可以提供包含所有公开数据的网站视图。网站浏览不仅是 在用户没有使用 Chrome 时很有用,但它可以让搜索引擎找到数据。

测试

请确保您的应用可在下列情况下正常运行:

  • 应用在安装完毕后立即进入离线状态。也就是说,用户首次使用该应用 处于离线状态。
  • 应用安装在一台计算机上,然后同步到另一台计算机上。
  • 系统会卸载该应用,然后立即重新安装。
  • 应用同时在两台计算机上运行,并使用同一配置文件。应用必须 当一台计算机离线时,用户会在这台计算机上 做很多事 那么这台计算机又恢复了在线状态。
  • 应用的连接时断时续,经常会在在线和离线之间切换。

此外,还需确保应用不会为用户保存任何敏感用户数据(例如密码) 虚拟机。