由于互联网连接可能不太稳定或不存在,因此您需要考虑离线优先:在编写应用没有互联网连接的情况下编写应用。当应用离线工作后,您可以添加所需的任何网络功能,以便应用在离线状态下执行更多操作。请继续阅读,了解有关实现支持离线功能的应用的提示。
概览
Chrome 应用可免费获得以下功能:
- 您应用的文件(所有 JavaScript、CSS 和字体,以及应用所需的其他资源,例如图片)均已下载。
- 您的应用可以使用 Chrome Storage API 保存并视需要同步少量数据。
- 您的应用可以通过监听线上和线下事件来检测网络连接的变化。
但是,这些能力不足以保证您的应用可以离线工作。您的离线应用应遵循以下规则:
- 尽可能使用本地数据。
- 使用互联网上的资源时,请使用
XMLHttpRequest
获取资源,然后在本地保存数据。您可以使用 Chrome Storage API、IndexedDB 或 Filesystem API 将数据保存在本地。 - 将应用的界面与其数据分离开来。
- 将界面和数据分离不仅可以改进应用的设计,简化启用离线使用的任务,还可以提供用户数据的其他视图。MVC 框架可以帮助您将界面和数据分开。
- 假设您的应用可以随时关闭。
- 保存应用状态(尽可能在本地和远程保存),以便用户从上次停下的地方继续。
- 全面测试应用。
- 确保您的应用能够在常见和棘手的场景中正常运行。
安全限制
Chrome 应用可放置资源的位置有限:
- 由于本地数据显示在用户的计算机上,且无法进行安全加密,因此敏感数据必须保留在服务器上。例如,不要在本地存储密码或信用卡号。
- 应用执行的所有 JavaScript 都必须包含在应用的软件包中。它不能是内嵌的。
所有 CSS 样式、图片和字体最初都可以位于应用的软件包或远程网址中。如果资源远程,则无法在 HTML 中指定。请改为使用
XMLHttpRequest
获取数据(请参阅引用外部资源)。然后,使用 blob 网址引用数据,或(最好)保存并使用 Filesystem API 加载数据。
不过,您可以加载大型媒体资源,例如来自外部网站的视频和音频。导致规则出现这种异常的一个原因是,当应用的连接受限或没有连接时,<video>
和 <audio>
元素具有良好的回退行为。另一个原因是,使用 XMLHttpRequest
和 blob 网址提取和传送媒体目前不支持流式传输或部分缓冲。
若要提供沙盒化 iframe,您可以创建 <webview>
代码。其内容可以远程,但无法直接访问 Chrome 应用 API(请参阅嵌入外部网页)。
Chrome 应用的一些限制是由内容安全政策 (CSP) 强制执行的,该政策始终如下,且无法更改:
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 存储 API | 少量字符串数据 | 非常适合设置和状态。轻松进行远程同步(但您不必做到)。由于配额问题,不适合存储大量数据。 |
IndexedDB API | 结构化数据 | 支持快速搜索数据。使用 unlimitedStorage 权限。 |
Filesystem API | 其他 | 提供可存储文件的沙盒区域。使用 unlimitedStorage 权限。 |
远程保存数据
一般来说,远程保存数据的方式由您自行决定,但有些框架和 API 会有所帮助(请参阅 MVC 架构)。如果您使用 Chrome Storage API,那么每当应用处于在线状态且用户登录 Chrome 时,所有可同步的数据都会自动同步。如果用户没有登录,系统会提示他们登录。但请注意,如果用户卸载您的应用,其已同步数据会被删除。{QUESTION: true?}
考虑在卸载您的应用后保存用户数据至少 30 天,以便用户在重新安装您的应用后能够获得良好的体验。
将界面与数据分开
使用 MVC 框架有助于您设计和实现应用,使数据与应用对数据的视图完全分开。有关 MVC 框架的列表,请参阅 MVC 架构。
如果您的应用与自定义服务器通信,则服务器应向您提供数据,而不是 HTML 块。考虑采用 RESTful API
将数据与应用分离后,提供备用的数据视图就更容易了。例如,您可以提供任何公开数据的网站数据视图。网站视图不仅能带来用户离开 Chrome 的实用性,还能让搜索引擎找到相关数据。
测试
请确保您的应用可在下列情况下正常运行:
- 应用会在安装后立即进入离线状态。换句话说,用户第一次使用应用时处于离线状态。
- 应用安装在一台计算机上,然后同步到另一台计算机。
- 卸载应用,然后重新安装。
- 应用同时在两台具有相同配置文件的计算机上运行。当一台计算机离线,用户在该计算机上执行许多操作,然后该计算机重新联网时,应用必须保持合理的行为。
- 应用的连接时断时续,经常在在线和离线之间切换。
此外,请确保应用没有在用户的机器上保存敏感的用户数据(如密码)。