PWA 技术在游戏落地中的探索

什么是 PWA

PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。[摘自 MDN]

本质：一个跨平台的 Web App。 需要特别说明的是，PWA 不是特指某一项技术，而是应用了多项技术的 Web App。其核心技术包括 App Manifest、Service Worker、Web Push 等等。

PWA 的特点

跨终端适配

利用响应式布局，可以做到多种终端适配，适应任何屏幕，无论是显示器、平板电脑、手机还是任何其他有屏幕的设备。

加载速度快

避免自检资源版本等操作，同时结合前端的按需加载方案，这类应用加载速度要比一般的 app 要快许多。

离线工作

利用 Service Worker^[1] 实现 PWA 的离线功能，Service Worker 是浏览器和网络之间的虚拟代理。它们终于解决了前端开发人员多年来一直在努力解决的一些问题，其中最值得关注的是，解决了如何正确缓存网站资源并使其在离线时可用的问题。

安全性高

使用 HTTPS 协议，保护从服务器发送到设备的内容免受不必要访问的协议。

推送通知

用通知和消息推送提高用户参与度，并且随时提供新的内容。

无需更新

实时从服务端获取数据，不需要定期更新版本上架应用商店。

可安装

这种应用程序可以安装在支持 PWA 任何操作系统上，多端兼容。目前桌面和移动设备上的所有主流浏览器都支持 PWA。

易分享

可以简单地通过 URL 分享，点击即可浏览，无需下载。

辨别一个 Web 应用是否是 PWA 有一些关键原则，一个 PWA 应该具有以下特点：

• 可发现（Discoverable）, 可以通过搜索引擎发现。
• 可安装（Installable）, 可以出现在设备的主屏幕。
• 可链接（Linkable）, 可以简单地通过 URL 分享。
• 独立于网络（Network independent）, 可以在离线状态或者是在网速很差的情况下运行。
• 渐进式（Progressive）, 在老版本的浏览器仍旧可以使用，在新版本的浏览器上可以使用全部功能。
• 可重入（Re-engageable）, 无论何时有新的内容，都可以发送通知。
• 响应式（Responsive）, 在任何具有屏幕和浏览器的设备上可以正常使用——包括手机、平板电脑、笔记本、电视、冰箱等。
• 安全（Safe）, 在用户、应用和服务器之间的连接是安全的，第三方无法访问你的敏感数据。

这里有一篇 MDN 的文章详细的介绍了 PWA 的优势，感兴趣的同学也可以看看：
https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Introduction

PWA 在互联网产品中的应用

PWA 应用范例

• 出行类（Uber / Lyft）
  https://appsco.pe/category/travel
• 外卖 / 点餐（星巴克 / 饿了么）
  https://appsco.pe/category/food
• 新闻/阅读类（少数派 / Flipboard）
  https://appsco.pe/category/news
• 购物类（Alibaba / Walmart）
  https://appsco.pe/category/shopping
• 社交类（TikTok/Twitter / Instagram/微博）
  https://appsco.pe/category/social

PWA 应用去哪儿找

• AppScope
  https://appsco.pe/

  AppScope 就是近年来出现的 PWA 应用商店中最值得介绍的那一个：因为它无论是从 UI 界面设计、应用详情页、以及应用推荐机制（热门应用/新应用），以及应用详情页来看，都无愧于「应用商店」这一称号，甚至已经可以与 Play Store 或 App Store 相提并论。

• PWA Stats
  https://www.pwastats.com/

  除此之外，你还可以前往 PWA Stats^[2] 找到更多 PWA 应用；这个网站主要收录 PWA 应用的开发动态与实例，你还能从这里找到 Google 与 饿了么^[3] 合作开发 PWA 的相关细节以及「为什么应用开发商仍然想让你安装原生应用」的文章，是一个偏开发者向的 PWA 资源站。

• pwapp
  https://pwapp.net/

  PWA 集散地帮助用户发现最好的 PWA 应用。一个私人维护的网站，收录一些比较知名的 PWA APP。

• pwaappstore.cn
  https://pwaappstore.cn

  很可惜，国内的这个 PWA 集散地已经打不开了，可见在国内 pwa 应用是多么的没落和不为人知。国内 PWA 都没做起来，PWA 应用商店更加做不起来。

PWA 在国内的现状

它凉了，而且是凉透透的了～

PWA 是 Google 在 2016 年提出的概念，2017 年落地的 web 技术。

微信小程序是在 2017 年正式上线，依托微信的流量，迅速占领了大部分的市场份额，后续各厂商又陆陆续续推出自家的小程序快应用等。

互联网经过五年的发展，我们记住了“Native App”、“小程序”、“快应用”、“App clips”、“Hybrid App”、“Web App”，似乎独独没有 PWA。

其实我个人更倾向把各种小程序认为是 PWA 在国内的实践落地，换句话说，各种小程序其实是拿来主义的。

那么这究竟是什么原因导致现在这样的局面呢？

• 国内较重视 iOS，而 iOS 目前对 PWA 的支持度不高，只能通过添加到主屏幕变相安装。
• 国内的 Android 实为「安卓」，不自带 Chrome ，可能还会有其他兼容问题。
• 国内厂商可能并不会像三星那样对推动自家浏览器支持 PWA 那么感兴趣。
• 依赖 GCM 推送的通知不可用，Web Push Protocol 还没有国内的推送服务实现。
• 国内 webview 环境较为复杂（比如微信），黑科技比较多。
• Google 的妥协，Google 可以说已经放弃了中国市场，对 PWA 的定位在之前的开发者大会上也把矛头对准了"第三世界"，并美其名曰：“为了互联网的下一个十亿用户”。

PWA 其实是一个美好的技术方案，但感觉很明显的一点，就是不符合各大厂商的利益。你这样搞，完全不方便厂商做信息孤岛吗，他们肯定更愿意在自己的圈地里做小程序。同时也方便 app store 收益抽成，技术要热起来的前提是必须得能挣钱啊，但 PWA 及其理念却一直在推动着前端领域前进。

PWA 游戏

在聊 PWA 游戏之前，我们先来看几份数据：

中国游戏产业细分市场收入占比（2022 年 1-6 月）

《数据来源：中国音数协游戏工委 (GPC) 中国游戏产业研究院 伽马数据》

《报告》显示，2022 年 1-6 月，中国移动游戏市场实际销售收入占市场总收入 74.75%，占比略有下降，首次出现负增长，但仍是游戏市场主流。网页游戏市场实际销售收入为 27.06 亿元，占总收入 1.83%，同比下降 10.4%，整体呈下降态势，网页游戏市场进一步萎缩。

值得一提的是，在我国游戏市场总体销售收入和移动游戏销售收入均有下滑的背景下，上半年的中国游戏市场中，客户端游戏占 20.80%，其市场规模在稳步增长、逆势增长，发展潜力凸显。

中国网页游戏实际销售收入

《数据来源：中国音数协游戏工委 (GPC) 中国游戏产业研究院 伽马数据》

《报告》显示，2022 年 1-6 月，中国网页游戏市场实际销售收入为 27.06 亿元，同比下降 10.4%。网页游戏市场整体呈下降态势，市场进一步萎缩。

详细报告数据可以移步游戏产业网查看。《2022 年 1-6 月中国游戏产业报告》：https://www.cgigc.com.cn/details.html?id=08da81c5-4133-4811-82e2-c78bb821a1f5&tp=report

从上面两张图我们可以看出以下几点：

• 国内依然是移动游戏占据主流市场
• 网页游戏收入进一步下降
• 客户端游戏和其他游戏市场收入略微提升

PWA 游戏推荐

• 塔游戏
  https://www.towergame.app/

  通过玩 Tower Game 测试您的耐心和战略思维能力——您的一举一动都很重要的游戏。在 Tower Game 中，您的目标是通过对齐定期从天而降的积木来建造尽可能高的塔。当您未能在塔顶放置方块 3 次时，游戏就输了。

• 魔方
  https://appsco.pe/app/thecube

  就像 Rubik 的立方体一样，您玩立方体我配置其组件以将立方体的每一面返回到一种颜色。Cube 只是 Rubik 魔方的现代化、响应式和轻量级版本，可以在 Web 上和离线的任何地方访问。

• 2048
  https://appsco.pe/app/2048

  前几年火爆的拼贴游戏现在 Progressive Web Apps 提供支持，而且速度比以往任何时候都快。通过将两个具有相同数字的方块组合在一起以将它们合并为一个更大的数字，从而获得数字 2048。目标如此简单，您认为游戏会很无聊，但恰恰相反，2048 被认为是最好的游戏之一游戏为了消磨时间。

更多 PWA 游戏体验：https://appsco.pe/category/games

PWA 游戏尝试

这里就是提出一个假设，如果把国内的网页游戏都做成 PWA 游戏的话，网页游戏是否可以迎来市场收入的增长呢？

这里说下个人的真实案例，我之前通过短视频软件广告玩过好几款手游，都是先通过短视频软件宣传说是无需下载，微信小程序直接就可以玩，本人其实很讨厌下载各种 APP 的，就觉得还蛮好的，点击链接打开了小程序的游戏，即玩即走，当我发生了充值行为后，就会有客服联系我，让我下载 App 或者是网页版，然后给一点福利。

分析：

• 为什么在短视频软件广告宣传，不直接宣传是网页游戏而是宣传的小程序游戏？网页游戏也不用下载 app？

  目前的小程序游戏的体验是要比网页游戏要好的。网页游戏给玩家的感受还停留在体验，画质一般。

• 为什么进入小程序游戏后，又让用户下载 app 或者是在网页上玩呢？

  App 能够保留玩家的原生体验，并且自己的 app 和网页端能够获取留存用户信息，同时还能摆脱微信的小程序限制（可能还有消费抽成，类似于 appstore）。

• PWA 游戏既能保留原生体验还没有微信小程序瓶颈限制，那么 PWA 游戏能成功吗？

  这个问题的答案是否定的，因为游戏的市场收入并没有提高，只能说做到了降本，PWA 游戏可以做到一套代码多端公用，无疑成本侧多少会有所降低，但是游戏的收入和之前多端的收入没有本质上的区别，因为游戏的收入往往依靠的是游戏内容，并不是载体。

• WebGPU/WebRTC/WebGL 等技术的兴起结合 PWA 游戏有搞头吗？

  我想不同的人，不同的企业，都会有不同的答案。我个人是非常看好 PWA 的发展前景，首先随着 Web 图形技术的发展，PWA 游戏无疑会在效果和体验上有所进步的，和 Native 移动游戏的效果和体验肯定是越多越小的，包括虚幻引擎也支持直接构建 HTML5 项目，web 游戏的效果肯定是可以做到越来越好的。但是其实还是那句话：但是技术前景好不等于市场就一定会选择，因为市场是滞后的，是利益导向的，是急功近利的，是希望偷懒的，非常受制于现有生态。

参考资料