Web 应用和原生应用的未来
原生应用和Web应用之间的差距正在缩小。因此，让我们一起探索不断发展的Web应用世界，看看它们如何帮助我们提升应用体验。.
自静态页面时代以来，网站和应用程序的功能已经发生了翻天覆地的变化。即使在最近，我们也看到了显著的进步，包括：
原生动画、简洁灵活的布局、逼真的 3D 图形和流媒体视频正在兴起。虽然发展势头“微乎其微”，但仍有许多工作要做。尤其是在网络想要与原生操作系统有效竞争的情况下。.
资深撰稿人和浏览器工程师一直在寻找能够提升原生操作系统及其应用程序普及度的功能。如今，我们看到网络正在积极行动，试图弥补操作系统功能的不足。这导致人们的关注点集中在少数几个功能上，其中一些易于实现，而另一些则不然。以下列举的功能并非全部，但涵盖了主要方面。.
本土项目包括：
- 关联： 您可以通过给定的 URL 重定向到 Web 应用程序。.
- 反应式： 借助媒体查询等工具，您可以创建适用于各种格式（方向、分辨率、屏幕尺寸等）的复杂布局。事实上，默认的网页布局模型本身就具有响应式特性，这使得它尤其适用于文本操作。.
- 数据驱动： 使用 HTML，您可以提供意义和结构，而网络最擅长处理数据。.
- 先进的： 您可以设计 Web 应用程序，为现代浏览器提供最新功能，同时在旧版浏览器中提供可接受的体验。.
- 安全： 网络提供了一些功能，例如单源安全模型和 HTTPS，可以确保应用程序的安全。这要归功于像……这样的程序。 Let's Encrypt 保护Web应用程序变得更加容易了。.
然而，互联网也具有一些优势，例如：
- 安装能力： 设备上的应用程序可用性以及与操作系统的完全集成会带来良好的用户体验——如果主屏幕上能有应用程序的小图标，并且应用程序可以全屏或以小窗口打开，那就更好了。这些都是很简单的事情，对吧？
- 可发现性： 美国网络极客们大多不愿接受封闭式应用商店。但我们不能否认，他们查找应用的方式确实有所改进——尽管有人认为，即使是最好的封闭式应用商店也因为用户过多而走向失败。.
- 离线状态： 世界各地都有网络连接。但你不能依赖 100%。你却因为离线而无法使用某个应用程序，而且别无他法。.
- 魅力： 一旦用户开始使用你的应用，你就成功了一半。但如何才能让他们保持参与度并及时收到更新呢？原生应用开发者一直以来都受益于推送通知功能，可以有效地与用户保持沟通。.
- 快的： 许多人认为原生代码比 Web 代码性能更好，但正如你稍后将看到的，这种差距正在迅速缩小。.
pokedex.org 网站是高级 Web 应用程序的最佳范例，同时也是一项有趣的爱好。.
√我们希望设计的网络能够让用户通过原生应用访问各种实用功能，但又不会因此而牺牲那些已经过测试的基础功能。这种趋势被称为“Web应用革命”，它由Mozilla等公司引领。 谷歌 他们得到了支持。.
√稍后我们将探讨实现这些进步的新技术，但首先，让我们更深入地了解一下网络，以便我们能够领先于原生应用程序。.
√注：另一方面，原生操作系统正在研究哪些有趣的技术来弥合自身与网络之间的差距？例如，类似鲁布·戈德堡机械的深度链接技术。.
之前是什么样的？
首先断开网络连接很重要。.
经验丰富的粉丝希望构建可以离线运行的 Web 应用程序，默认情况下仅在需要更新时才连接到互联网。.
具备原生功能的应用程序并非什么新鲜事物。早在之前，就有很多“网络”软件包和应用程序模板出现在各种平台上——例如 Chrome 应用——它们允许用户在设备上安装经过认证的软件包以供离线使用，并允许访问硬件等功能。.
我们经常会遇到“混合应用”这个概念，例如 Cordova 和 Electron。这些技术允许开发者使用 Web 技术编写应用，然后将其移植到 iOS 和 Android 等原生平台上运行。这类应用非常流行。但它们需要构建和分发同一应用的多个版本，而且功能也存在局限性。“一次编写，到处运行”的说法并不完全正确，我们都知道。.
首先，单页应用（SPA）也值得一提，这一点毋庸置疑。单个 HTML 页面可以作为应用程序的主页面，并使用 XHR（或类似技术）动态加载不同的视图，从而提升 Web 应用程序的速度和响应能力。Ember.js 和 AngularJS 等流行的框架都支持这种应用程序模型，而离线优先策略则构成了大部分高级 Web 应用程序的基础。.
安装和设置功能
在《高级 Web 应用》的第一部分，我们将介绍安装和设置。这将允许您使用 Web 应用皮肤，该皮肤会创建一个 JSON 文件，其中包含有关 Web 应用的信息，例如图标、名称和打开应用时使用的显示模式：
这样的代码可以用于进一步将应用程序与主操作系统集成（例如在主屏幕上显示图标、全屏打开而不是在浏览器中打开等），还可以提高应用程序在应用程序列表中的可查找性——例如，它可以出现在搜索引擎结果中。.
该信息已在手机上的 Opera 和 Chrome 浏览器中用于跨平台集成，Firefox 浏览器也将很快支持该信息。.
离线
时至今日，我们迎来了服务应用；Firefox、Chrome 和 Opera 中的这项新技术允许开发者编写离线应用，其工作方式类似于 AppCache，甚至更多。这是 API 的最低层级，因此其结构也更为复杂。但它确实赋予了开发者更大的控制权，让他们能够更好地掌控服务的功能。.
另一方面，资产存储则完全不同。一段时间以来，AppCache 之类的方案似乎能够解决这个问题，但它过于假设应用一定能够成功启动，而且开发者对应用的运行机制缺乏足够的控制。.
离线网络问题由来已久，乍看之下似乎很简单。问题在于，实现一套有效的离线技术并非易事。离线存储大量数据本身并不难。现代浏览器早已具备类似 IndexedDB 的应用程序接口 (API)，而 Web Storage 的支持也从 IE8 开始就已存在。.
服务器应用程序是一段用 JavaScript 编写的独立文件，运行在特定的线程中。它充当互联网和你的应用程序（以及浏览器）之间的代理服务器。当收到请求时，服务器应用程序可以拦截该请求并进行自定义处理，然后再将其发送到浏览器使用。.
要使用该服务程序，您必须先运行 () 导航器。服务工作者。登记 在首页注册。.
航海家.服务工作者.登记(‘'sw.js'’)
.然后(功能(reg) {
// 执行一些初始化应用程序的操作
});
然后使用实用程序部分的安装程序进行安装。有时，所有使用缓存 API 的应用程序（恰好与通信应用程序独立使用）都会存储这些必要的文件。
这.添加事件监听器(‘'安装'’, 功能(事件) {
事件.等待直到(
缓存.打开(‘'v1'’).然后(功能(缓存) {
返回 缓存.全部添加([
‘'/sw-test/'’,
‘'/sw-test/index.html'’,
‘'/sw-test/style.css'’,
‘'/sw-test/app.js'’
]);
})
);
});
服务应用程序中的事件监听器会在收到请求后发送代码，允许开发者自定义响应结果。因此，开发者可以请求将更改不多的文件（例如 UI 皮肤）存储在安装目录中，然后在需要时使用存储库中的版本（而不是在线版本）。瞧，离线应用程序就此诞生。.
这.添加事件监听器(‘'拿来'’, 功能(事件) {
变量 回复;
事件.回复(缓存.匹配(事件.要求).抓住(
//编写代码来处理请求的文件为空的情况
// 尚未离线存储在缓存中
);
});
需要注意的是，服务应用程序仅支持 HTTPS 通信。.
↑ 上图展示了服务应用程序的安装周期 ↑
重新吸引用户
原生操作系统长期以来都依赖推送通知——即服务器向客户端系统发送消息以通知用户系统变更的功能——即使应用程序已关闭。例如，新闻应用可能想要推送新的更新？或者你的宝可梦游戏需要维护？现在，Web 应用也具备了这些功能。.
如前所述，要使用此程序，必须在程序页面安装并激活服务程序。之后，即可通过订阅该程序来使用它。您可以使用以下公式。 () ServiceWorkerRegistration.pushManager.subscribe 用于完成这项工作：
航海家.服务工作者.准备好.然后(功能(reg) {
reg.pushManager.订阅({用户可见: 真的})
.然后(功能(订阅) {
// 根据订阅情况更新用户界面等
// 更新服务器上当前用户的订阅状态
变量 端点 = 订阅.端点;
变量 钥匙 = 订阅.获取密钥(‘'p256dh'’);
更新状态(端点,钥匙,‘'订阅'’);
})
});
这种方法会发送一种用于解决共享问题的抵押品。它有一个端点属性（其中包含指向服务器的唯一 URL）和一个方法。 getKey()， 它用于生成加密所需的公钥。您需要获得双方的许可，然后将结果发送到应用服务器。.
要向服务器发送警报消息，请向端点地址发出请求。这将从服务器向服务应用程序发送消息。您也可以根据需要随消息一起发送数据，但这必须使用加密密钥。基于数据的警报消息目前仅适用于 Firefox，但其他浏览器也应该很快会支持。.
该服务应用程序使用推送事件处理程序监听警报消息。每当发送警报事件时，您都可以使用事件对象的 data 属性访问它。然后，您可以根据需要以任何方式响应该消息——例如，发送新闻条目，或向主页发送消息以任何方式更新您的应用程序。.
自己.添加事件监听器(‘'推'’, 功能(e) {
变量 对象 = e.数据.JSON();
// 以某种方式响应推送消息
例如，通知或频道消息
});
注：许多技术服务（例如警报）在 Chrome 和 Firefox 中都能得到较好的支持，其他浏览器也在考虑支持这些服务。截至撰写本文时，警报数据仅在 Firefox 中有效。.
Mozilla 的这项计划提供有关在浏览器中实现现代 Web 应用程序界面进展情况的信息。.
表现
性能一直是Web应用和原生应用之间的一大痛点，原生开发者往往因此放弃Web的高性能优势。但近年来，随着浏览器中Java引擎速度的大幅提升，以及Web端用于运行动画和3D图形等内容的更快代码的出现，这种差距已显著缩小，这些内容能够更好地利用GPU的强大性能。.
此外，我们还可以使用 Emscripten 等技术将原生应用程序代码（例如 C++）转换为 Java。这里所说的 Java，实际上指的是 asm.js，它是 Java 的一个高度优化的子集，可以利用 AOT 编译技术实现接近原生性能。asm.js 已经非常流行，不仅 Firefox 支持它，Chrome 和 Edge 也支持它，而且 Web 也已将 asm.js 添加为 Unity 和 Unreal 等流行 3D 引擎的发布目标。.
下一代技术即将到来——一些浏览器厂商已经建立合作关系，共同搭建和实现 WebAssembly，其功能与 Emscripten 类似，但速度更快、标准更好、性能更高。.
它与 (asm.js) 和 wasm 格式一起使用，因为它具有更好的设置，我们应该能够依赖编译器生成有效的 wasm 输出，并且浏览器应该能够以一致的性能运行它，无论它是哪个编译器生成的。.
结果
正如你所见，网络正在不断发展，一些令人兴奋的新技术旨在解决我们挚爱的传统平台仍然存在的不足之处，而且其性能甚至比宣传的还要出色。这使得Web应用程序能够与原生应用程序并驾齐驱。前提是我们不要忘记最初使网络伟大的那些因素。.
