离线优先:下一个渐进增强技术

简介: 原生应用速度比较快。如果你要创造下一个愤怒的小鸟,这当然很重要。然而,罕有应用需要达到游戏级别的响应度。也就是说,多一点关注度,利用HTML5技术创建一个快速反应的游戏是有可能的。但这能否在一系列的设备中良好运行就是另外一个事情了。客户部不知道哪个更好:“这应用如此酷!我们的对头就有了——我们也需要一个”。其实这需要一点说服力就可以解决这个问题的。手机应用能够离线运行。但是webapp也可以——就是这技术比较前沿而且我们很少用到的缘故

你的客户需要原生手机应用而非webapp有三条基本缘由:


  1. 原生应用速度比较快。如果你要创造下一个愤怒的小鸟,这当然很重要。然而,罕有应用需要达到游戏级别的响应度。也就是说,多一点关注度,利用HTML5技术创建一个快速反应的游戏是有可能的。但这能否在一系列的设备中良好运行就是另外一个事情了。
  2. 客户部不知道哪个更好:“这应用如此酷!我们的对头就有了——我们也需要一个”。其实这需要一点说服力就可以解决这个问题的。
  3. 手机应用能够离线运行。但是webapp也可以——就是这技术比较前沿而且我们很少用到的缘故


采用应用缓存来做一个web应用,离线应用已经实现好几个年头了。过程是这样定义的:静态文件应该被缓存以便于在网络连接丢失的情况下浏览器能运行应用。描述简洁明了,但是:


  • web开发者在想到网络连接失败的情况是很害怕的。我在火车上写这篇文章就仿佛感觉到魂不守舍。即使连接速度在提高,但对于生活在偏远地区与发展中国家数以百万计的人们来说这仍旧是一个问题。
  • 为已经存在的应用增加离线功能是不容易的。你需要重构ajax调用与网络请求,然后考虑网络连接状态的变化。但是,我们为什么不能够刚开始就考虑好呢。

移动优先(mobile-first)被认为是不错的开发技术。你从一个简单的可能是你的网站在不管年代或者设备上的所有浏览器运行的线性视图开始。更多的现代浏览器运用媒体查询(media queries)来应用样式扩展,在比较典型的桌面大屏幕设备上表现样式。换而言之,更优秀的浏览器采用大屏幕展示的布局就是渐进增强的。


离线应用的技术能否更易用些?应用应该推测到它的离线模式适时响应。当连接恢复,应用能够渐进增强地检索到增加的数据或者保存到云服务器。


离线优先(offline-first)成为被一些开发者探讨的概念,虽然还没有广泛应用。这里有些能够利用的主要概念。


1. 可信赖的远程机器

开发应用的逻辑重点要从服务端转向客户端。服务端本质上要变为轻量级的数据存储角色——重要的是——客户端应用应该运行在任何的网络连接状态下。


2. 创建客户端数据代理

你不能依赖ajax调用。一个数据代理要管理所有路由,例如:

  1. 如果连接可用,一个ajax调用请求到服务端(假设有必要)
  2. 如果连接不可用——或者ajax调用失败——localStorage、IndexDB 或其他合适的客户端存储机制被采纳。 记住,HTML5服务线程(HTML5 Service Workers)通过命名的javascript文件发送数据请求。虽然现在没什么浏览器支持该特性,也没实现标准,这种技术正在为这个目标进行设计。


3. 尽可能快地同步

当连接正常的时候你需要一个处理客户端到服务端的同步机制。采用web worker(线程)后台处理与在空闲期批量上传下载会更加有效率。

4. 考虑设备存储因素


移动设备比较复杂。比如:

  1. 切换到另一个应用的行为可能会关闭浏览器。理想情况下,你的web 应用应该总要保存应用状态以便于用户返回到他们上次离开的地方
  2. 当你的应用没有运行在被打开的浏览器标签里(最小化或者后台运行),Page Visibility API可以被用来减少处理过程与带宽
  3. 理想情况下,你的应用应该运用Battery Status API。当电池电量低于正常水平的时候,它可以把数据存储在localStorage,即使连接可用的情况下。


5. 测试,再测试

如果你的应用需要在无连接或者有连接的情况下可操作,测试是比较困难的,下面是一些情况:

  1. 应用被安装在不支持localstorage或者不支持其他必要技术的设备上
  2. 网络连接丢失与重连发生在随机的时间间隔内(不稳定)
  3. 在与服务端第一次通信之前网络丢失应用却被缓存
  4. 应用同时运行在两个或更多的设备上
    在一系列的设备上进行严格的测试看起来只是可选项。


并非所有应用都适合采取离线优先的原则;一个多角色动作游戏运用离线优先的原则是没有意义的。但是,这种技术是否采纳应该被许多web应用在开发伊始首先考虑的。我喜欢这样,虽然我担心在已经存在的系统中开发这种技术所需要的成本。

相关文章
|
Go 开发者
错误处理不再难!Go语言错误处理完全指南
错误处理不再难!Go语言错误处理完全指南
489 0
|
开发者 Python
在Python中,异常处理通过`try`、`except`、`else`和`finally`关键字进行
【6月更文挑战第26天】在Python中,异常处理通过`try`、`except`、`else`和`finally`关键字进行。基本结构包括尝试执行可能抛出异常的代码,然后指定`except`来捕获特定或任何类型的异常。`else`块在`try`无异常时执行,`finally`块确保无论是否发生异常都会执行,例如用于清理。可以使用`raise`重新抛出异常,而自定义异常则允许创建特定的错误类。这种机制增强了代码的健壮性。
462 7
|
IDE 开发工具
鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0
本文介绍了如何使用 Flutter SDK 3.22.0 搭建鸿蒙开发环境。首先安装 Flutter SDK 3.22.0,并通过 FVM 管理多个版本。接着配置项目,使用 `fvm use custom_3.22.0` 设置自定义 SDK 版本。添加鸿蒙平台支持并进行项目签名,最后通过 `fvm flutter run` 运行项目。详细步骤包括安装、项目配置、签名和运行,确保开发环境顺利搭建。
734 7
鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0
微软代码签名证书新手篇
要使软件及驱动被微软信任,需通过微软认证,主体须为成立3个月以上、经营正常的公司。认证流程包括在线提交、实名审核(1-5工作日)、UK制作与快递(7-15天)。建议申请2-3年有效期,确保业务连续性。申请前需准备身份证扫描件、确认单位英文名称,并在获得代码签名证书后对驱动软件进行签名,以便提交微软WHQL认证。
293 1
|
Web App开发 缓存 Shell
PWA离线优先策略:提升用户体验的关键步骤
Progressive Web Apps (PWA) 采用Service Worker与Cache API实现离线优先策略,确保无网时仍可访问网站内容。通过注册Service Worker、配置缓存策略及manifest文件,结合App Shell架构和WebSocket支持,创建出即便在离线或弱网环境中也能提供流畅体验的高度可用应用。测试和持续优化对于保证PWA性能至关重要。
322 6
|
Windows
代码签名证书如何申请
代码签名证书如何申请
412 0
|
JavaScript 前端开发 API
JavaScript基础-事件监听与处理
【6月更文挑战第11天】本文介绍了JavaScript事件驱动编程的核心,包括事件流(捕获、目标、冒泡阶段)和监听方法(DOM Level 0、addEventListener/removeEventListener)。讨论了常见问题和易错点,如内存泄漏、事件委托和阻止默认行为的混淆,并提供了解决策略。通过代码示例展示了事件绑定、事件委托和阻止默认行为的用法,强调理解事件处理机制对于编写高效交互式Web应用的重要性。
908 6
|
JavaScript iOS开发 开发者
pnpm的安装与配置(Windows/macOS)
pnpm的安装与配置(Windows/macOS)
3887 0
Vue3如何使用element-ui,vue3使用Element,Element使用
Vue3如何使用element-ui,vue3使用Element,Element使用
|
存储 Linux 虚拟化
虚拟机使用pc麦克风声卡
虚拟机使用pc麦克风声卡
778 0
虚拟机使用pc麦克风声卡