Offline First(离线优先)

警告

重要提示：Chrome 将在所有平台上取消对 Chrome 应用程序的支持。 Chrome 浏览器和 Chrome 网上应用店将继续支持扩展。阅读公告并了解有关迁移应用程序的更多信息。

由于互联网连接可能不稳定或不存在，您需要首先考虑离线：编写您的应用程序，就好像它没有互联网连接一样。一旦您的应用离线工作，请添加您的应用所需的任何网络功能，以便在其在线时执行更多操作。继续阅读有关实施支持离线功能的应用程序的提示。

# Overview(概述)

Chrome 应用程序免费获得以下内容：

• 你的应用程序的文件——所有的 JavaScript、CSS 和字体，以及它需要的其他资源（比如图像）——已经下载。
• 您的应用程序可以使用 Chrome Storage API 保存和有选择地同步少量数据。
• 您的应用程序可以通过侦听online and offline events来检测连接的变化。

但这些能力不足以保证您的应用程序可以离线工作。您的离线应用应遵循以下规则：

• 尽可能使用本地数据。

  使用网络资源时，使用 XMLHttpRequest 获取，然后将数据保存到本地。您可以使用 Chrome Storage API、IndexedDB 或 Filesystem API 在本地保存数据。

• 将应用程序的 UI 与其数据分开。

  将 UI 和数据分开不仅可以改进应用程序的设计并简化启用离线使用的任务，还可以让您提供用户数据的其他视图。 MVC 框架可以帮助您将 UI 和数据分开。

• 假设您的应用程序可以随时关闭。

  保存应用程序状态（在可能的情况下本地和远程），以便用户可以从他们离开的地方继续。

• 彻底测试您的应用程序。

  确保您的应用程序在常见和棘手的场景（common and tricky scenarios）中都能正常运行。

# Security restrictions（安全限制）

Chrome 应用程序的资源放置位置受到限制：

• 因为本地数据在用户的机器上是可见的并且不能被安全地加密，所以敏感数据必须保留在服务器上。例如，不要在本地存储密码或信用卡号。

• 应用程序执行的所有 JavaScript 都必须在应用程序的包中。它不能内联。

• 所有 CSS 样式、图像和字体最初都可以位于应用程序包或远程 URL 中。如果资源是远程的，则无法在 HTML 中指定它。相反，使用 XMLHttpRequest 获取数据（请参阅引用外部资源）。然后要么使用 blob URL 引用数据，要么（更好）保存，然后使用 Filesystem API 加载数据。

  注意：样式可以是内联的，也可以是单独的 .css 文件。

但是，您可以从外部站点加载大型媒体资源，例如视频和声音。此规则例外的一个原因是 <video> 和 <audio> 元素在应用程序连接受限或没有连接时具有良好的回退行为。另一个原因是使用 XMLHttpRequest 和 blob URL 获取和提供媒体当前不允许流式传输或部分缓冲。

要提供沙盒 iframe，您可以创建一个 <webview> 标记。它的内容可以是远程的，但不能直接访问 Chrome 应用程序 API（请参阅嵌入外部网页）。

对 Chrome 应用程序的某些限制由内容安全策略 (Content Security Policy (CSP)) 强制执行，内容安全策略 (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:;

# Specifying offline_enabled(指定 offline_enabled)

假设您的应用在离线状态下表现良好。如果没有，您应该宣传该事实，以便在用户离线时其启动图标变暗。为此，请在app manifest文件中将 offline_enabled 设置为 false：

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

# Saving data locally(本地保存数据)

下表显示了用于在本地保存数据的选项（另请参阅管理数据）。

注意：打包的应用程序不能使用 Web SQL 数据库或 localStorage。 WebSQL 规范现在已经被弃用了一段时间，localStorage 同步处理数据（这意味着它可能很慢）。 Storage API 异步处理数据。

# Saving data remotely(远程保存数据)

通常，您如何远程保存数据取决于您，但一些框架和 API 可以提供帮助（请参阅 MVC 架构）。如果您使用 Chrome Storage API，那么只要应用在线且用户登录 Chrome，所有可同步的数据都会自动同步。如果用户未登录，系统会提示他们登录。但请注意，如果用户卸载您的应用，用户的同步数据将被删除。 {问题：真的吗？}

考虑在卸载您的应用后至少保存用户数据 30 天，以便用户重新安装您的应用时获得良好的体验。

# Separating UI from data(将 UI 与数据分离)

使用 MVC 框架可以帮助您设计和实现您的应用程序，以便数据与应用程序对数据的视图完全分离。有关 MVC 框架的列表，请参阅 MVC 架构。

如果您的应用程序与自定义服务器通信，则服务器应该为您提供数据，而不是 HTML 块。从 RESTful API 的角度考虑。

一旦您的数据与您的应用程序分离，就可以更轻松地提供数据的替代视图。例如，您可以提供任何公共数据的网站视图。当您的用户离开 Chrome 时，网站视图不仅很有用，而且还可以让搜索引擎找到数据。

# Testing

确保您的应用在以下情况下运行良好：

• 该应用程序已安装，然后立即脱机。换句话说，应用程序的第一次使用是离线的。
• 该应用程序安装在一台计算机上，然后同步到另一台计算机。
• 该应用程序被卸载，然后立即再次安装。
• 该应用程序同时在两台计算机上运行，具有相同的配置文件。当一台计算机脱机，用户在该计算机上执行大量操作，然后计算机再次联机时，该应用程序的行为必须合理。
• 该应用程序具有间歇性连接，经常在在线和离线之间切换。

By.一粒技术服务