渐进式 Web 应用程序 (PWA)：综合指南

您是否知道使用 HTML、CSS、JavaScript 或任何前端框架构建的 Web 应用程序可以安装并离线工作以提供增强的用户体验？

本文将向初学者以及任何希望提升前端开发技能的人介绍渐进式 Web 应用。在本文中，你将学习：

开始构建渐进式 Web 应用所需的一切
如何创建可安装的 Web 应用程序。
如何在渐进式 Web 应用程序中实现离线功能。
如何分析网络性能、可访问性、SEO 等。
提高应用程序性能、加载时间和用户体验的技巧。

先决条件：要完全理解本文，需要具备 HTML 和 CSS 的基本知识。

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

渐进式 Web 应用 (PWA) 是一种融合了传统网站和原生移动应用最佳功能的 Web 应用。PWA 旨在提供快速、可靠且引人入胜的 Web 体验，提供类似原生应用的 Web 体验。

为什么要使用渐进式 Web 应用程序？

PWA 的好处包括但不限于：

改进的性能： PWAs 加载速度更快，性能更好，可以增强用户体验和参与度。
离线功能：借助服务工作者，PWAs 可以缓存网页内容并在离线或网络状况较差的情况下运行。
提高参与度：推送通知和主屏幕安装，无需前往应用商店即可提高用户参与度和体验。
搜索引擎优化 (SEO) 友好： PWAs 可被搜索引擎发现，从而提高可见性和覆盖面。
安全：通过 HTTPS 提供服务，以防止窥探并确保内容未被篡改。

渐进式 Web 应用示例

许多大公司，例如YouTube、Facebook，甚至Dev.to，都将其 Web 应用打造为可安装的。如果使用移动浏览器，请点击右上角的三个点，然后点击“安装或添加到主屏幕”。如果使用桌面浏览器，请点击浏览器右上角的“安装”图标，如下图所示。

如何让你的 Web 应用可安装

无论您使用纯 HTML、React、Vue 还是其他任何前端框架构建，让渐进式 Web 应用可安装的步骤都是相同的。
本 PWA 教程将带您完成所有步骤。

步骤 1：设置您的项目。

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>PWA tutorial</title>
</head>
<body>
    <section class="main">
        <h1>Recipe App</h1>
        <p>The best culinary treats</p>
        <button>Explore</button>
    </section>
</body>
</html>

CSS



body{
    background-color: aliceblue;
}
.main{
    margin: 0 auto;
    background-color: cadetblue;
    text-align: center;
    padding: 3rem;
}

h1{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #fff;
    font-size: 3rem;
}
button{
    padding: 1rem 2rem;
    color: darkcyan;
    border:#fff;
    background-color: #fff;
}
p{
    color: #fff;
    font-size: 1.6rem
}

输出

步骤 2：创建“Manifest.json”文件。此步骤使应用程序可安装。以下详细信息将用于创建应用程序的启动画面。



{
    "name": "Recipe Application",
    "short_name": "My Recipes",
    "description": "A recipe application for creating awesome recipes",
    "start_url": "/",
    "theme_color": "#000000",
    "background_color": "#ffffff",
    "display": "standalone",
    "icons": [
        {   "src": "./icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }]
  }

步骤 3-将此清单文件链接到您的 HTML。



    <link rel="manifest" href="manifest.json"/>

瞧！你的应用可以安装了！

启动画面
这是访问应用程序时显示的第一个屏幕。

在渐进式 Web 应用中实现离线功能

渐进式 Web 应用中的离线功能增强了用户体验。它确保用户无论是否连接互联网都能流畅地使用应用。这可以通过 Service Worker、后台同步、缓存等方式实现。

当网络连接不可用时，服务工作线程 (SW) 会拦截网络请求并从缓存中获取响应。在离线
状态下，您可以手动编写服务工作线程代码，也可以使用 Workbox、PWA Builder Online、PWA Studio 等工具。
本教程将使用 Google 旗下的Workbox库，因为它提供了预缓存、后台同步、推送通知、易用性等全面的功能。

如何集成 Workbox 以实现离线功能

步骤 1：在命令行中安装 Workbox。
使用“npx”可确保始终安装最新版本。如果您使用 React.js 构建，请在此步骤之前运行“npm run build”以生成构建文件夹（包含可部署的静态文件）。

npx 工作箱向导

步骤 2：如下图所示，回答 Workbox 向导中的问题提示。
对于 React.js 项目，build文件夹应作为应用程序的根目录。

步骤 3：生成 Service Worker 文件

npx 工作箱生成 SW 工作箱配置.js

步骤 4：将此脚本代码粘贴到您的 index.js 文件中，以注册 SW。确保它已链接到您的 HTML 文档。



if('serviceWorker' in navigator){
    window.addEventListener('load', () =>{
      navigator.serviceWorker.register('/sw.js')
    })
  }

步骤 5：部署
服务工作线程需要 https:// 以确保安全性。将项目部署到Netlify或Vercel。在浏览器中查看 Web 应用。

如何分析 Web 应用程序性能、可访问性和 SEO

Chrome Lighthouse是进行此类分析的强大工具。分析 Web 性能、可访问性和 SEO 对于构建提供卓越用户体验的高质量 Web 应用至关重要。
执行此分析的步骤如下：

右键单击您的网页打开 Chrome 开发工具。
单击“检查”，然后导航至“Lighthouse”选项卡
根据偏好，在选项卡上单击“移动设备”或“桌面”
生成报告

查看灯塔分数

PWA 性能优化的最佳实践

预加载 URL 和字体可能会减慢 PWA 的加载过程。
实现延迟加载以推迟加载图像等资产，直到需要它们为止。
确保干净的代码架构
删除不需要的代码和空格，以提高 PWA 的整体性能。

总之，

PWA 是提供类似原生应用体验的 Web 应用。从离线功能到安装提示，从后台同步到推送通知，功能不胜枚举。
构建渐进式 Web 应用是一项有趣且充满挑战的壮举，但只要不断练习并注重细节，就能达到最佳的用户满意度。

感谢您的阅读。点赞并关注，获取更多网页开发和技术相关文章。请我喝杯咖啡来支持我的工作。

文章来源：https://dev.to/udoka033/progressive-web-apps-pwa-a-compressive-guide-57ii