如何使用 Angular 构建渐进式 Web 应用程序如何使用 Angular 构建渐进式 Web 应用程序如何使用 Angular 构建渐进式 Web 应用程序如何使用 Angular 构建渐进式 Web 应用程序
  • 业务
  • 目标
  • 支持
  • 登录
找到的结果: {phrase} (显示: {results_count} 共: {results_count_total})
显示: {results_count} 共: {results_count_total}

加载更多搜索结果...

搜索范围
模糊匹配
搜索标题
搜索内容

如何使用 Angular 构建渐进式 Web 应用程序

发表 admin at 2024年8月26日
类别
  • 未分类
标签

介绍

渐进式 Web 应用是使用使其行为与原生应用类似的技术构建的 Web 应用。渐进式 Web 应用的一个优点是能够在网络覆盖不稳定的情况下顺利运行。此外，与原生应用不同的是，它们无需安装，但速度比典型的 Web 应用更快。

在本文中，您将使用Angular构建渐进式 Web 应用程序并使用Firebase进行部署。

角度 PWA

本教程的代码可在 GitHub 上找到。

注意：目前有一个@angular/pwa软件包可以帮助完成此过程。本教程将介绍一种早期的替代方法。

先决条件

要完成本教程，您需要：

  • Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境进行操作。
  • 安装在您本地机器上的最新版本的Google Chrome 网络浏览器。
  • 在 Chrome 中安装Lighthouse Chrome 扩展程序，以便稍后测试您的应用是否具有渐进性。
  • 如果您希望将应用程序上传到 Firebase，则需要一个 Google 帐户。

本教程已通过 Node v14.5.0 和 v6.14.5 验证npm。

第 1 步 - 创建一个新的 Angular 项目

您可以使用 Angular CLI 创建新项目。默认情况下，Angular 将生成本教程项目中未使用的测试文件。为了防止生成此文件，您需要将标志添加--skip-tests到以下命令以创建新项目：

npx @angular/cli@10.0.0 new ng-pwa --skip-tests

系统将提示您一些配置选项：

Output
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

这将创建一个名为ng-pwa。

导航到新目录：

cd ng-pwa

现在您已经有了一个启动项目，您可以继续创建 Web 应用清单。

第 2 步 - 创建 Web 应用清单

Web应用清单是一个 JSON 文件，其中包含使 Web 应用能够保存在用户主屏幕上的配置。它还定义了从主屏幕启动时的外观和行为。Web 应用清单是渐进式 Web 应用的基本要求，但可用于任何网站。

要为您的应用创建 Web 应用清单，您需要manifest.json在文件夹根目录中创建一个名为的新文件src：

nano src/manifest.json

在文件中添加以下内容：

src/manifest.json
{
   "name": "Angular Progressive Web App",
   "short_name": "Ng-PWA",
   "start_url": "./",
   "theme_color": "#008080",
   "background_color": "#008B8B",
   "display": "standalone",
   "description": "A PWA that is built with Angular",
   "icons": [
       {
           "src": "/assets/images/icons/icon-16x16.png",
           "sizes": "16x16",
           "type": "image/png"
       },
       {
            "src": "/assets/images/icons/icon-32x32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-150x150.png",
            "sizes": "150x150",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-180x180.png",
            "sizes": "180x180",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/assets/images/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
   ]
}

在我们的 Web 应用清单中，我们定义了name将附加到用户主屏幕上的应用图标的 ，以及short_name将替换它（以防它太长）。我们还使用 指定了从主屏幕启动应用时的登录页面start_url。theme_color指定当用户访问我们的网站时浏览器 UI（用户界面）将采用的颜色。 属性background_color控制当用户从主屏幕启动我们的应用时，我们的应用图标将显示的背景颜色。使用display，您可以指定当用户访问您的网站时是否应隐藏浏览器 UI。

我们预计用户会使用具有不同屏幕尺寸的不同类型的设备访问我们的网站，因此需要复制多个尺寸的应用程序图标。

添加完图像资产后，转到文件index.html并将以下内容添加到<head>部分：

src/index.html
...
<head>
  ...
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#008080">
</head>

除非我们指示 Angular 这样做，否则 Web 应用清单不会添加到构建文件夹中。我们将通过将文件添加到文件部分manifest.json的资产数组中来实现这一点：apps.angular-cli.json

.angular-cli.json
...
"apps": [
    {
     ...
      "assets": [
       ...
        "manifest.json"
      ],
...

注意：如果您的应用程序是使用 Angular 6 或更高版本构建的，则需要编辑angular.json而不是.angular-cli.json：

angular.json
...
"projects": {
  "ng-pwa": {
    ...
    "architect": {
      "build": {
        ...
        "assets": [
          "src/manifest.json"
        ],
...

创建manifest.json、修改index.html和编辑angular-cli.json（或angular.json）后，您即可进行下一步。

第 3 步 - 添加服务工作者

服务工作线程是渐进式 Web 应用的基础。服务工作线程以 JavaScript 编写，可帮助缓存重要资产和文件，从而帮助应用在网络覆盖不可用或不可靠时保持正常运行。服务工作线程还可以拦截请求并管理来自服务器的响应等。

在将应用推送到生产环境之前，我们需要对其进行构建webpack。我们的服务工作者必须能够跟踪和缓存构建文件。

有了包之后，我们安装该包并进行配置。sw-precache-webpack-plugin npm

注意：目前，的开发人员sw-precache-webpack-plugin建议GenerateSW使用workbox-webpack-plugin。

然后我们可以运行一个命令，它将在构建文件夹中自动生成服务工作线程。

npm install从目录运行命令ng-pwa来安装包：

npm install --save-dev sw-precache-webpack-plugin@1.0.0

安装软件包后，创建一个名为的文件precache-config.js：

nano precache-config.js

在文件中添加以下内容：

预缓存配置.js
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

module.exports = {
    navigateFallback: '/index.html',
    navigateFallbackWhitelist: [],
    stripePrefix: 'dist',
    root: 'dist/',
    plugins:[
        new SWPrecacheWebpackPlugin({
            cacheId: 'ng-pwa',
            filename: 'service-worker.js',
            staticFileGlobs: [
                'dist/index.html',
                'dist/**.js',
                'dist/**.css'
            ],

        })
    ],
    stripePrefix: 'dist/assets',
    mergeStaticsConfig: true
};

该precache-config.js文件配置sw-precache-webpack-plugin使用文字对象键值对。

Angular 作为构建单页应用程序的前端框架，使用客户端 URL 路由。这意味着它可以生成自动生成的服务工作线程未缓存的任意 URL。在这种情况下，我们将定义一个 HTML 条目，请求的 URL 将映射到该条目，并navigateFallback处理该条目。HTML 条目应该能够提供所需的资源。因为我们的应用程序是一个 SPA（单页应用程序），并且index.html是入口点 - 它可以处理任意 URL - 因此它必须在数组中选择要缓存的文件之一staticFileGlobs。navigateFallbackWhitelist可以为空，也可以包含定义将要使用的 URL 类型或模式的正则表达式navigateFallback。

要更深入地了解如何配置sw-precache-webpack-plugin，请阅读其文档。

为了完成服务工作线程设置，我们将创建一个自定义npm脚本或命令，用于构建我们的应用程序并在构建文件夹中自动生成服务工作线程文件。转到文件package.json并将以下内容添加到scripts：

包名.json
 ...
 "scripts": {
    ...
    "pwa": "ng build --prod && sw-precache --root=dist --config=precache-config.js"
  },
 ...

安装sw-precache-webpack-plugin、创建precache-config.js和编辑后package.json，您就可以进行下一步了。

第 4 步 - 创建视图

我们只有一个视图，因为我们主要关注使用 Angular 构建渐进式 Web 应用程序的过程。

编辑app.component.html并替换内容为以下代码：

src/app/app.component.html
<div class="container">
  <h1>
    A Progressive Web App Built with Angular.
  </h1>
  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" alt="Angular logo">
  <h2>Get Started With Progressive Web Apps:</h2>
  <ul>
    <li>
      <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/primers/service-workers/">Service Workers</a></h4>
    </li>
    <li>
      <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/web-app-manifest/">Web App Manifest</a></h4>
    </li>
    <li>
      <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/">Code Lab (PWA)</a></h4>
    </li>
  </ul>
</div>

此代码生成一个包含图像、一些文本和三个链接的网页。

如果出于安全和性能原因而设置锚元素的属性，则该rel="noopener属性在渐进式 Web 应用中至关重要。target_blank

编辑styles.css并替换内容为以下代码：

src/styles.css
body {
    background-color: teal;
}

.container {
    text-align: center;
}

ul {
    list-style: none;
}

h1, h2, a {
    color: white;
}

此代码创建了青色背景颜色、使文本居中并使文本呈现白色。

现在，您已完成视图并可以继续部署应用程序。

第 5 步 - 部署您的应用程序

服务工作线程是任何渐进式 Web 应用的核心。但是，为了让服务工作线程正常工作，我们的应用必须通过安全连接提供服务。因此，我们将把应用部署到通过安全连接托管的 Firebase。在此步骤中，您将把应用部署到 Firebase。

创建新的 Firebase 项目

要开始使用，请访问firebase.google.com。如果您还没有帐户，请创建一个帐户以访问控制台。从控制台创建一个新的 Firebase 项目。

登录后，点击右上角的转到控制台链接。在控制台页面上，选择创建项目。系统将提示您输入项目名称。系统还将提示您启用 Google Analytics。本教程不需要 Google Analytics。

单击创建项目并等待该过程完成。

项目创建完成后，您可以单击“继续”进入项目仪表板。出于本教程的目的，我们将关注“开发”部分和“托管”页面。

现在您可以返回命令终端。运行npm install命令以全局安装该firebase-tools包：

npm install -g firebase-tools@8.4.3

该firebase-tools软件包将允许我们从命令终端测试运行并将应用程序部署到 Firebase。

安装完成后，我们需要构建我们的应用程序以准备部署。

要构建 Angular 应用并自动生成服务工作线程，请从目录运行以下命令ng-pwa：

npm run pwa

这将运行我们之前创建的自定义脚本并使我们的应用程序准备好投入生产。

角度构建过程

现在是时候将 Firebase 引入应用程序了。运行以下命令登录 Firebase：

firebase login

此时，系统将提示您输入凭证。在终端中输入您的帐户信息。

验证后，运行以下命令在项目中初始化 Firebase：

firebase init

然后回答以下问题：

Are you ready to proceed? (Y/n) = Y
Which Firebase CLI features do you want to setup for this folder? = Hosting
Select a default Firebase project for this directory = Your-Firebase-Project-Name
What do you want to use as your public directory? = dist
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) = Y
File dist/index.html already exists. Overwrite? (y/N) = N

Firebase 命令行显示上述选项

我们的应用已准备好部署。运行以下命令将应用部署到 Firebase：

firebase deploy

最后，运行此命令来查看应用程序：

firebase open hosting:site

PWA 在 Chrome 移动版中开放

PWA 启动画面

故障排除

如果您看到“Firebase 托管设置完成”消息而不是您的应用，则您可能已覆盖您的index.html。使用 、 重建npm run pwa，firebase init并确保选择“否”以覆盖index.html。

根据您的配置，您的应用可能存在于"ng-pwa"（Angular 项目的名称）下。在 期间firebase init，您可以将公共目录设置为dist/nw-pwa而不是dist以避免这种情况。

您的渐进式 Web 应用程序现已构建并部署。现在，我们可以使用工具来测试它。

第 6 步 - 使用 Lighthouse 进行测试

Lighthouse是 Google 开发的一款 Chrome 扩展程序。除了其他测试外，它还可用于测试渐进式 Web 应用是否符合渐进式 Web 应用标准。

最高分为100%，该应用的PWA分数为91%。

PWA Lighthouse 测试

要测试您的 PWA，请在您的 Google Chrome 网络浏览器中打开托管应用。单击扩展程序按钮并选择Lighthouse。将显示一个窗口并提示您单击生成报告按钮。单击按钮后，您将暂时看到一个屏幕，其中显示等待 Lighthouse 结果消息。测试完成后，您将看到测试结果的屏幕。

结论

在本文中，您使用 Angular 构建了一个渐进式 Web 应用并通过 Firebase 进行了部署。渐进式 Web 应用为用户提供了与原生应用类似的体验。不过，PWA 更轻量且更加灵活。

©2015-2025 Norria support@alaica.com