基于 Angular 实现 PWA 开发的详细教程-JavaScript中文网-JavaScript教程资源分享门户

前言

基于 Angular 开发 PWA 应用，既能提高用户体验，又能提高应用加载速度和离线使用体验。本文将详细介绍如何基于 Angular 开发 PWA 应用。

需要掌握的知识

PWA 基础概念和特性
Angular 基础知识和开发环境
Service Worker 基础知识

Angular PWA 应用的基础设施

首先我们需要创建一个 Angular 应用程序。使用 Angular CLI 快速生成一个基础设施，比如执行下面命令：

ng new my-pwa-app --routing --style=scss

然后我们需要添加 PWA 支持。最简单的方式是执行下面命令：

ng add @angular/pwa --project my-pwa-app

这个命令将会在应用程序中自动添加必要的文件和模块，并生成一个 manifest.json 文件和一个 service-worker 文件。

添加 PWA 支持后，我们需要为网站配置 SSL。你可以在 Firebase、Netlify 或 Ngrok 上进行配置。

配置 manifest.json 文件

现在我们需要在 index.html 文件中添加 manifest.json 文件的链接，并配置 manifest.json 文件。

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

manifest.json 文件描述了应用程序的元信息，包括应用程序名称、图标、主题色、启动 URL 等等。下面是一个基础的 manifest.json 文件配置：

// javascriptcn.com 代码示例
{
  "name": "My PWA App",
  "short_name": "My App",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#FFF",
  "theme_color": "#F60",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

配置 service-worker.js 文件

service-worker.js 文件是 PWA 的核心。在该文件中，我们需要处理缓存和推送通知等功能。

在 Angular 项目中，我们需要编写一个 service-worker.ts 文件，然后使用 Workbox CLI 将其编译成 service-worker.js 文件。执行下面命令：

npm install workbox-cli --save-dev

接着在 package.json 文件中添加一个脚本：

{
  "scripts": {
    "build:sw": "workbox generateSW workbox-config.js"
  }
}

然后创建一个 workbox-config.js 文件：

// javascriptcn.com 代码示例
module.exports = {
  "globDirectory": "dist/my-pwa-app/",
  "globPatterns": [
    "**/*.{js,css,html,png,json}"
  ],
  "swDest": "dist/my-pwa-app/service-worker.js",
  "swSrc": "src/service-worker.ts",
  "maximumFileSizeToCacheInBytes": 10000000,
  "dontCacheBustURLsMatching": new RegExp('.+\.[a-f0-9]{20}\..+')
};

最后编译 service-worker.js 文件：

npm run build:sw

实现缓存机制

PWA 的一个重要特性就是离线缓存。我们需要配置 service-worker.js 文件，使用缓存机制提高应用加载速度。

// javascriptcn.com 代码示例
import {precacheAndRoute, cleanupOutdatedCaches} from 'workbox-precaching';
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';

// 预缓存文件
precacheAndRoute(self.__WB_MANIFEST);

// 清除过时缓存
cleanupOutdatedCaches();

// 缓存 Google Fonts
registerRoute(
  new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
  new CacheFirst({
    cacheName: 'google-fonts',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxAgeSeconds: 60 * 60 * 24 * 365,
        maxEntries: 30,
      }),
    ],
  })
);

实现推送通知

PWA 还可以实现推送通知功能，向用户发送通知消息。

// javascriptcn.com 代码示例
const applicationServerPublicKey = 'YOUR_PUBLIC_KEY';

self.addEventListener('push', event => {
  let payload = {};
  try {
    payload = JSON.parse(event.data.text());
  } catch (err) {
    payload = {title: '', body: ''};
  }

  const options = {
    body: payload.body,
    icon: '/assets/icons/icon-72x72.png',
    badge: '/assets/icons/icon-72x72.png',
  };

  event.waitUntil(self.registration.showNotification(payload.title, options));
});

self.addEventListener('notificationclick', event => {
  event.notification.close();

  const targetUrl = 'https://example.com/redirect-path';
  event.waitUntil(
    clients.matchAll({type: 'window'}).then(windowClients => {
      for (const windowClient of windowClients) {
        if (windowClient.url === targetUrl && 'focus' in windowClient) {
          return windowClient.focus();
        }
      }
      if (clients.openWindow) {
        return clients.openWindow(targetUrl);
      }
    })
  );
});

self.addEventListener('pushsubscriptionchange', event => {
  event.waitUntil(
    self.registration.pushManager.getSubscription().then(subscription => {
      if (!subscription) {
        return;
      }

      // 更新订阅信息
    })
  );
});

// 生成 VAPID 认证
function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);
  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

const publicKey = urlBase64ToUint8Array(applicationServerPublicKey);

self.registration.pushManager
  .subscribe({
    userVisibleOnly: true,
    applicationServerKey: publicKey,
  })
  .then(subscription => {
    // 发送订阅信息到服务器
  });

总结

本文介绍了如何使用 Angular 构建 PWA 应用，包括基本设施和技巧，也包含了详细的代码示例和开发指南。希望能够对 PWA 开发感兴趣的读者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6534832a7d4982a6eb927426