Google Play拥有一个由Chilango Lab开发的应用程序，该应用程序的下载量超过一百万，并且评分很高。 它被称为
Nothing ，可以翻译为“ Nothing”，它的奇妙之处在于它什么都不做。 的确，其中隐藏了令人愉悦的复活节彩蛋，但这并没有改变问题。 如果您分析此应用程序，结果发现它的大小为14 MB，在安装过程中需要19.24 MB。
该材料的作者（我们今天将其翻译发表）说，看着这个应用程序，他想知道是否可以重写它，以便占用更少的空间。
他成功了。 即，他使用HTML，CSS和JavaScript重新创建了Nothing的功能，使其成为了一个渐进式Web应用程序（
PWA ，渐进式Web App）。 它可以在没有Internet连接的情况下工作，您可以像在常规屏幕上一样从主屏幕中调用它。 常规Android应用程序与其PWA副本之间的主要区别在于大小。 第一次调用时，在设备上占用了19.24 MB。 第二个-205 Kb。
正常应用和PWA一无所有创建图标
在我告诉您代码之前，为PWA Nothing创建一个图标。 为了解决这个问题，我使用了出色的
开源工具
Launcher Icon Generator 。
启动器图标生成器使用启动器图标生成器，我能够立即为Nothing选项创建一个图标。 该程序会自动生成各种大小的图标。
普瓦康帕特
图标完成后，我需要创建一个
Web应用程序清单 。 多亏了它，当PWA启动时，用于Android的Chrome浏览器将显示启动屏幕。 是否可以使这样的屏幕出现在其他浏览器中？ 是的，这是可能的，为此，我们需要PWACompat库，该库使我们能够准确实现所需的内容。 它和清单一起足以连接到PWA代码中：
<link rel="manifest" href="manifest.json" /> <script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js" integrity="sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA" crossorigin="anonymous"></script>
这是Safari（iOS）中的初始屏幕。
Safari初始画面但这不限于PWACompat的功能。 尤其是，该库允许您为各种浏览器创建描述PWA如何打开的元标记，还可以基于Web应用程序的清单设置主题颜色。
将应用程序添加到主屏幕
我最喜欢的PWA功能之一是A2HS（添加到主屏幕），由于它，您可以在主屏幕上添加一个图标来启动该应用程序。 但是，从Android上的Chrome 68开始，现在显示的是带有适当建议的小
信息面板 ，而不是大型的A2HS标语。
再见A2HS标语（Chrome 67及更低版本）无论如何，一旦从Chrome中删除此功能，仪表板就是一个中间解决方案。 因此，我需要为PWA Nothing创建一个更好的A2HS接口。
安装按钮（左），安装按钮和A2HS面板（中间），添加到主屏幕对话框（右）在这种情况下，如果浏览器支持将应用程序添加到主屏幕的功能，它将在页面顶部显示“安装”按钮。 当用户单击此按钮时，将调出“添加到主屏幕”对话框。
这是相关的代码。
var installPromptEvent; var btnInstall = document.querySelector('#install'); window.addEventListener('beforeinstallprompt', function (event) { event.preventDefault(); installPromptEvent = event; btnInstall.removeAttribute('disabled'); }); btnInstall.addEventListener('click', function () { btnInstall.setAttribute('disabled', ''); installPromptEvent.prompt(); installPromptEvent.userChoice.then((choice) => { if (choice.outcome === 'accepted') { console.log('User accepted the A2HS prompt'); } else { console.log('User dismissed the A2HS prompt'); } installPromptEvent = null; }); });
如果站点符合A2HS标准，则浏览器将引发
beforeinstallprompt事件。
复活节彩蛋
注意，会有剧透！
严格来说，PWA Nothing Easter Egg是Konami代码和
YouTube上的
10小时视频 。
复活节彩蛋呼叫（向上，向上，向下，向下，向左，向右，向左，向右和两次触摸）用户完成编码后，PWA将打开
此视频 。
为了向我的应用程序添加Konami代码支持，我使用了
Konami-JS库。 它体积小，易于使用，并且尤其支持移动设备。 这是我的PWA与原始Android应用程序之间的唯一区别。 特别是我在输入代码时需要进行两次触摸的地方，在原始应用程序中，您需要使用带有按钮的面板。
拉动时关闭页面刷新
在处理应用程序的过程中，我遇到了一个小问题。 当用户尝试在移动设备上向下拉伸页面时，这将导致页面刷新（拉动刷新）。 我不需要
不需要的页面刷新幸运的是，处理此问题很容易。 您只需要
一行CSS代码 ：
overscroll-behavior-y: contain
代管
Netlify被选为PWA Nothing的主持人。 这是现代Web项目的通用平台。 我之所以决定将应用程序托管在Netlify上，是因为在这里可以轻松配置所有内容。 此外，所有这些都是免费的。
Netlify控制面板要在Netlify上部署项目，可以使用以下三种方法之一。 我们正在谈论命令行工具，手动部署以及持续部署。
▍Netlify命令行工具
这是部署Web项目的经典方法。 为了使用它，您需要安装Netlify CLI，登录到您的帐户，初始化项目并部署它。 看起来像这样：
> brew tap netlify/netlifyctl > brew install netlifyctl > netlifyctl login > netlifyctl init > netlifyctl deploy
▍手动部署
此方法可能是最简单的方法，只需几次鼠标移动即可执行应用程序部署。
手动部署我非常喜欢此功能，因此我希望这样的东西出现在Firebase中。 实际上，项目的部署归结为将其文件夹拖放到网页上。
▍持续部署
现在，我使用此特定方法。 将我的GitHub存储库链接到Netlify之后，当我向其中发送代码时，Netlify会自动构建并部署该项目。 魔术，并非如此。
▍HTTPS
由于必须通过HTTPS从安全来源为PWA提供服务，因此我需要确保在我的站点上启用了HTTPS。 的确，由于Netlify为所有域（包括其自己的用户域）提供了免费的HTTPS，因此我在这方面无需付出很多努力。
Https此外，从Netlify控制面板，您可以启用到HTTPS（
HSTS ）的强制转换。 这将为站点提供持续的保护。
灯塔项目分析
Lighthouse是用于提高网页质量的开源自动化工具。 借助其帮助，您可以分析任何页面-公共页面或需要身份验证的页面。 它尤其使您能够分析页面的性能和可访问性，探索渐进式Web应用程序。
灯塔我的应用程序在性能方面获得了97分，在其他指标上获得了100分。 这是完整的
报告 。
总结
如您所见，一个无所事事的渐进式Web应用程序比具有相同功能的Android应用程序小得多。
在这里，您将不会体验PWA。
在这里您可以找到其源代码。
亲爱的读者们！ 您认为您想以PWA形式重新创建什么Android应用程序？
