随着最近在 MDN 上发布的 渐进式 Web 应用核心指南，让你的网站在移动设备上看起来和感觉起来像原生应用一样容易。但是游戏呢？

在这篇文章中，我们将探讨渐进式 Web 游戏的概念，看看这个概念在现代 Web 开发环境中是否实用且可行，使用 PWA 功能与 Web API 构建。

让我们看一下 Enclave Phaser 模板（EPT） - 一个免费的开源 HTML5 游戏移动样板，我使用 Phaser 游戏引擎 创建的。我自己也用它来构建所有 Enclave Games 项目。

该模板最近升级了一些 PWA 功能：服务工作者 提供在离线时缓存和提供游戏的能力，而清单文件允许它在主屏幕上安装。我们还提供了对通知的访问，以及更多。这些 PWA 功能已经内置到模板中，所以你可以专注于开发游戏本身。

我们将看到这些功能如何解决开发人员今天面临的问题：添加到主屏幕和离线工作。本文的第三部分将介绍渐进式加载的概念。

添加到主屏幕

Web 游戏可以在移动设备上展现其全部潜力，特别是如果我们为开发人员创建了一些功能和快捷方式。添加到主屏幕功能使构建能够与原生游戏竞争屏幕位置并作为移动设备上的一流公民的游戏变得更加容易。

借助此功能，可以在现代设备上安装渐进式 Web 应用。你可以通过包含清单文件来启用它 - 图标、模态框和安装横幅是根据ept.webmanifest中的信息创建的。

{
  "name": "Enclave Phaser Template",
  "short_name": "EPT",
  "description": "Mobile template for HTML5 games created using the Phaser game engine.",
  "icons": [
    {
      "src": "img/icons/icon-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    // ...
    {
      "src": "img/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "fullscreen",
  "theme_color": "#DECCCC",
  "background_color": "#CCCCCC"
}

但这并不是唯一的需求 - 务必查看 添加到主屏幕文章，以获取所有详细信息。

离线功能

开发人员经常遇到将桌面游戏（或在带有显示器的 PC 上展示的移动友好型游戏）离线运行的问题。在会议上使用不可靠的 Wi-Fi 演示游戏时，这尤其具有挑战性！最佳做法是提前计划并拥有所有游戏文件，以便你可以在离线时启动它们。

离线构建可能很棘手，因为你必须自己管理文件，记住版本，以及你是否已应用最新补丁或修复了来自先前会议的错误，解决硬件设置问题等。这需要时间和额外的准备。

当你有可靠的连接时，Web 游戏在线处理起来更容易：你将浏览器指向一个 URL，并且你的游戏最新版本会立即运行。网络连接是问题所在。能够离线使用会很棒。

好消息是，渐进式 Web 应用可以提供帮助 - 服务工作者会缓存和提供资产 离线，因此不稳定的网络连接不再是过去的问题。

Enclave Phaser 模板中的 服务工作者文件 包含我们所需的一切。它从要缓存的文件列表开始

var cacheName = 'EPT-v1';
var appShellFiles = [
  './',
  './index.html',
  // ...
  './img/overlay.png',
  './img/particle.png',
  './img/title.png'
];

然后处理安装事件，该事件将所有文件添加到缓存中

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(appShellFiles);
    })
  );
});

接下来是获取事件，它将从缓存中提供内容，并在需要时添加新的内容

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(r) {
      return r || fetch(e.request).then(function(response) {
        return caches.open(cacheName).then(function(cache) {
          cache.put(e.request, response.clone());
          return response;
        });
      });
    })
  );
});

务必查看 服务工作者 文章，以获取详细的解释。

渐进式加载

渐进式加载 是一个有趣的概念，它可以为 Web 游戏开发带来许多好处。渐进式加载本质上是后台的“延迟加载”。它不依赖于特定的 API，但它遵循 PWA 方法并使用我们刚刚描述的一些关键功能，专注于游戏及其特定要求。

就资源而言，游戏比应用更重 - 即使对于小型休闲游戏，你通常也需要下载 5-15 MB 的资产，从图像到声音。这应该是即时的，但你仍然需要在所有内容下载完之前等待加载屏幕。或者，如果玩家的连接很差，这可能会很麻烦：下载时间越长，放弃游戏和关闭标签的可能性就越大。

但是，如果你不是下载所有内容，而是先加载真正需要的部分，然后在后台下载其余部分呢？这样一来，玩家会比使用传统方法更快地看到你的游戏主菜单。他们在后台隐形获取游戏玩法文件时，至少会花几秒钟四处查看。即使他们真的快速点击了播放按钮，我们也可以在加载其他所有内容时显示一个加载动画。

即时游戏越来越受欢迎，休闲手机 HTML5 游戏开发人员应该考虑将它们放到 Facebook 或 Google 平台上。需要满足一些要求，特别是关于初始文件大小和下载时间，因为游戏应该是立即可玩的。

使用延迟加载技术，考虑到游戏可玩所需的数据量，游戏的感觉会比以往更快。你可以使用 Phaser 框架 来实现这些结果，该框架预先构建用于在主菜单资源到达后加载大多数资产。你也可以在纯 JavaScript 中自己实现，使用链接预取/延迟机制。实现渐进式加载的方法不止一种 - 这是一个强大的想法，它独立于你选择的特定方法或工具，遵循渐进式 Web 应用的原则。

结论

你还有关于如何增强游戏体验的想法吗？随意玩耍和试验，塑造 Web 游戏的未来。如果你有想法要分享，请在此处留下评论。