如何构建 PWA

2025-05-28

如何构建 PWA

这是从我的博客转发的一篇文章。

什么是渐进式 Web 应用程序 (PWA)？

为了保持文章简洁，我将用我自己的简单术语来定义什么是 PWA。PWA是一种 Web 应用，它利用一系列浏览器/操作系统增强功能，使其使用起来更像原生应用。

如果您想要更官方的定义，请参阅维基百科或Google 的 Web 开发者网站。

PWA 基础知识

如何将网站/Web 应用升级为渐进式 Web 应用？这里有一份不错的 PWA 清单……不过清单内容有点长。我们就从基础开始，尽量简单点，好吗？

对我来说，PWA 至少具有以下 4 个特征/特性：

1. 安全（通过 HTTPS 提供）

我以前觉得通过 HTTPS 提供内容是一项既困难又昂贵的工作……后来Let's Encrypt出现了，让它免费了……然后Netlify出现了，让它变得超级简单（而且仍然免费）。事实上，多亏了 Netlify，在 CDN 上使用 HTTPS 自定义域名托管静态网站就像推送 git 提交一样简单。顺便说一句，这不是广告。我只是喜欢简单好用的工具。

现在就注册 Netlify，连接你的 github/gitlab/bitbucket 仓库吧，你很快就能通过 HTTPS 为你的站点/应用提供服务。更多详情，请参阅 Netlify 官方的部署指南。

如果您已经设置了主机，那么可能只需在网上搜索一下就能找到一些关于设置 SSL/HTTPS 的教程。不过，为了方便用户，请务必将所有 HTTP 流量重定向到 HTTPS（顺便说一下，Netlify 会帮您完成这项操作），这样用户就不会看到以下信息：

连接不安全

2. 全屏/独立

我认为并非所有 Web 应用都应该固定在主屏幕上，像独立应用一样运行——有些 Web 应用很少使用，放在浏览器中的收藏夹/书签里就很好用。但如果用户希望更快地访问你的 Web 应用并将其固定在主屏幕/桌面，那么我们可以通过不显示浏览器“shell”来提升用户体验。

浏览器 vs 独立

要让你的网页应用显示在浏览器“外部”（如右图所示），你只需在页面中添加一个网页应用清单display，并将其设置为standalone。清单示例如下：

{
  "name": "My App",
  "scope": "/",
  "display": "standalone",
  "start_url": "./index.html",
  "theme_color": "#b859ed",
  "background_color": "#000000",
  "icons": [
    {
      "src": "./icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

然后在你的 HTML 中确保链接到你的清单：

<html>
    <head>
        <!-- other stuff in head -->
        <link rel="manifest" href="./manifest.json" />
    </head>
    <body>
        <!-- body stuff -->
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Android 和 iOS 都遵循清单中的 display 属性，因此操作起来很简单。可惜的是，iOS 并不遵循清单中的所有内容，这给我们带来了太多……

3.启动图标

良好的 PWA 体验包括当您的应用固定到主屏幕时显示真实的图标。

无图标 vs 图标

提供图标的标准方法是像上面的示例清单一样，在 manifest.json 中填写icons数组。遗憾的是，iOS（即使是最新的 iOS 13 公测版）不支持此值，因此对于 iOS 系统，您需要在 HTML 中添加“apple-touch-icon”链接：

<html>
    <head>
        <!-- other stuff in head -->
        <link rel="apple-touch-icon" sizes="180x180" href="./icons/logo180.png" />
    </head>
</html>
Enter fullscreen mode Exit fullscreen mode

4. 服务工作者

关于如何使用 Service Worker，有很多可以写的内容……但现在我们先简单介绍一下。我们只需设置一下，让你的 Web 应用每次都从缓存中提供应用的“shell”，并在后台检查是否有任何更新（这样应用下次启动时就能保持最新状态）。

我总是担心我的应用程序会过度依赖第三方库，但在这种情况下，我认为workbox是一个很好的解决方案。

如果您想查看手写的服务人员，请查看sw.js 中的背景噪音。

首先，在支持 Service Worker 的浏览器上注册 Service Worker，方法是将这段小脚本添加到 HTML 代码中。请注意，我们在页面加载完成后才加载 Service Worker，这样不会拖慢页面的初始加载速度。

<html>
    <head>
        <script>
            if ('serviceWorker' in navigator) {
                window.addEventListener('load', () => {
                    navigator.serviceWorker.register('./sw.js');
                });
            }
        </script>
    </head>
</html>
Enter fullscreen mode Exit fullscreen mode

现在创建一个sw.js文件：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

if (workbox) {
    workbox.routing.registerRoute(
        /\.(?:html|js|css|png|jpg|jpeg|svg|gif)$/,
        new workbox.strategies.StaleWhileRevalidate()
    )
}
Enter fullscreen mode Exit fullscreen mode

注意，这里的 Workbox 版本是硬编码的。最终，你可能需要访问 Workbox 的网站来获取最新版本，看看是否值得更新。

该文件的作用是，所有html、js、css和图像文件都将从缓存中获取，然后在后台通过网络更新。您可以修改扩展正则表达式，以捕获其他文件类型（例如mp3音频文件）。如果您的 Web 应用从任何服务器端点获取这些格式的文件，请务必谨慎缓存json/xml文件，因为这样您的应用就会显示过时的数据（即使在线）。缓存此类数据超出了本文的讨论范围，但我可能会在以后的文章中深入探讨。

PWA 示例

Background Noise是我常用的 PWA 示例。源代码可以在 GitHub 上找到。我喜欢用它作为示例，因为有时人们认为 PWA 必须构建为 SPA（单页应用），或者使用像 React 这样优秀的前端框架来构建，但事实并非如此。任何网站/Web 应用（我倾向于交替使用这些术语）都可以增强为 PWA，即使是原生的 HTML/CSS/JS Web 应用。

希望您发现这篇文章有所帮助，如果您有任何疑问，可以在 Twitter 上找到我。

文章来源：https://dev.to/wes_goulet/how-to-build-a-pwa-2kgd
Devto 翻译
PREV
Bootstrap CSS 仍然很糟糕。但我们可以让它变得更好。
NEXT
LLM 将从根本上改变软件工程