从零到 15 — 15 分钟内构建 Nothing PWA

什么都不是？

“Nothing” Android 应用程序的原始版本由Chilango Lab 开发，在 Google Play Store 上的下载量已超过 100 万次，并获得 4.2 星评价🎉。

Nothing Android 应用程序基本上什么都不做，除了应用程序中有一个非常酷的复活节彩蛋（͡°͜ʖ͡°）。

然而，Nothing Android 应用的 APK 大小为 14MB，安装后占用了 19.24MB 的手机存储空间。这让我不禁思考，有什么方法可以让它更小一些吗？

（左）Nothing Android 应用：19.24MB — （右）Nothing Progressive Web 应用：205KB

解决方案很简单。我可以用 HTML、CSS 和 JavaScript 重新构建整个应用。为了更上一层楼，我可以将其升级为渐进式 Web 应用 (PWA)，这样用户无需连接互联网即可运行它，并且能够将 PWA 添加到主屏幕。

👩🏻‍🎨图标设计

在我开始讨论代码之前，让我们先为 Nothing PWA 设计一个图标！我用来生成应用图标的工具叫做Launcher Icon Generator。这是一款非常神奇的开源工具，由Roman Nurik开发。

使用启动器图标生成器，我可以快速为 Nothing PWA 设计并生成应用图标（使用 Material Design 风格？）。生成器会自动生成不同尺寸的图标：48px、72px、96px、144px、192px 和 512px。

PWA兼容

现在我已经准备好了应用图标，下一步是创建Web 应用清单。这样，Android 版 Chrome 浏览器在加载 PWA 时就会自动显示启动画面。但是，有什么方法可以将这个启动画面功能移植到其他老版本的浏览器中吗？

认识一下PWACompat，PWACompat 是一个将 Web App Manifest 带到不兼容浏览器以获得更好的渐进式 Web 应用程序的库。

该库非常简单，只需添加 Web App Manifest 文件和 PWACompat 脚本，就可以开始了！

<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>

动图

好了！就这样，我成功地将启动画面带到了旧版浏览器。然而，PWACompat 的功能就只有这些吗？不！它其实可以做得更多！

PWACompat 还为清单中的所有图标（包括图标）创建元图标标签，为各种浏览器创建后备元标签来描述 PWA 应如何打开，并根据 Web 应用程序清单设置主题颜色。

🏠 添加到主屏幕

我最喜欢的渐进式 Web 应用功能之一是添加到主屏幕 (A2HS)。然而，从 Android 版 Chrome 68 开始，Chrome 会显示 A2HS 迷你信息栏，而不是巨大的 A2HS 横幅：

😵 RIP 旧的 A2HS 横幅（Chrome 67 及之前版本）

尽管如此，A2HS 迷你信息栏只是一个临时解决方案，未来某一天它会从 Chrome 中移除。因此，我应该为 Nothing PWA 提供更好的 A2HS 用户体验。

（左）安装按钮 — （中）安装按钮 + A2HS 迷你信息栏 — （右）
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;
    });
});

"beforeinstallprompt"如果网站符合“添加到主屏幕”标准，浏览器将触发事件

🥚 复活节彩蛋

剧透警告！！！

这是 Nothing PWA 的复活节彩蛋：Konami Code + 10 小时 YouTube 视频。

动图

一旦用户成功完成 Konami 代码，Nothing PWA 就会将用户重定向到YouTube 视频。

对于 Konami Code，我使用这个库：Konami-JS。它轻量级且易于实现。此外，这个库也适用于移动设备！唯一的缺点是，Konami Code 会变成“上、上、下、下、左、右、左、右、点击、点击”。

禁用下拉刷新

不过，还有一个小问题，当用户在移动设备上尝试向下滑动页面时，会触发“下拉刷新”操作。

动图

好消息是，我们可以使用一行 CSS 来禁用下拉刷新操作：overscroll-behavior-y: contain。

☁️ 托管

Nothing PWA 托管在 Netlify 上。Netlify 是一个用于自动化现代 Web 项目的一体化平台。

我选择在 Netlify 上托管 Nothing PWA 的原因是，它设置起来非常简单。而且，Netlify 还是免费使用的！

Netlify 仪表板

对于站点部署，您有三种方法可供选择：通过命令行工具、手动部署或持续部署。

命令行工具

这基本上是部署网站最经典的方式。安装Netlify CLI，登录你的 Netlify 帐户，初始化项目，然后就可以将网站部署到 Netlify 了。

> brew tap netlify/netlifyctl 
> brew install netlifyctl
> netlifyctl login
> netlifyctl init
> netlifyctl deploy

手动部署

对于任何想要部署其网站的人来说，这种方法基本上是最轻松的方式：拖放。

这个功能太酷了，真希望 Firebase 也能实现。只需拖放你的项目文件夹，就可以开始使用了！

持续部署

这是我目前在这个项目中使用的方法。一旦我的 GitHub 仓库链接到 Netlify，每当我将代码推送到 git 仓库时，Netlify 就会自动构建并部署网站，就像变魔术一样🧙🏻‍。

🔒HTTPS！

由于渐进式 Web 应用必须从安全来源提供服务，因此我需要确保网站已启用 HTTPS。好消息是，Netlify 为所有人（包括自定义域名）提供免费的 HTTPS。

此外，您还可以从 Netlify 仪表板启用强制 HTTPS（HTTP 严格传输安全，HSTS）。这将确保网站始终受到 HTTPS 的保护。

💡灯塔

Lighthouse是一款开源的自动化网页质量提升工具。您可以针对任何网页（无论是公开的还是需要身份验证的）运行它。它提供性能、可访问性、渐进式 Web 应用等方面的审核。

还不错吧？我在性能方面得了 97 分，在 PWA、可访问性、最佳实践和 SEO 方面也得了 100 分。🔥

您可以在此处查看完整的 Lighthouse 报告：
https://builder-dot-lighthouse-ci.appspot.com/report.1533954675085.html

🎉立即尝试

🚀 您可以在这里尝试 Nothing PWA：nothing.limhenry.xyz

源代码也可以在 GitHub 上找到：nothing.limhenry.xyz