Nestjs项目实战 构建渐进式Web应用(PWA)

最近在学习使用Nestjs构建PWA应用，但在实际开发中遇到了几个问题想请教大家：1) 如何在Nestjs中正确配置Service Worker以实现离线功能？2) 有没有推荐的PWA相关Nestjs模块或最佳实践方案？3) 项目部署后出现manifest.json加载失败，该如何排查这类PWA特有的部署问题？4) 在SSR和PWA结合时需要注意哪些性能优化点？希望有实战经验的大佬能分享一下解决方案。

3 回复

构建PWA需要服务工作器、manifest.json和离线页面等。在NestJS中，首先安装@nestjs/service-worker模块，创建ngsw-config.json配置服务工作器。接着定义一个AppServiceWorkerModule模块，加载并注册服务工作器。同时创建manifest.json文件，设置应用图标与名称。

为了实现离线支持，在app.controller.ts添加缓存逻辑，使用@nestjs/common的Injectable装饰器自定义服务工作器类，监听fetch事件，返回缓存或网络请求结果。还需在app.module.ts配置静态文件服务，将静态资源设为可缓存。

最后，通过applicationRef.isStandalone()判断是否为独立应用，并动态加载工作器。确保HTTPS部署，优化性能和体验。这样就完成了NestJS项目的PWA构建。


要在NestJS项目中构建PWA，首先需安装必要的依赖，如@nestjs/common、@nestjs/cli等。接着创建Service Worker文件并使用workbox生成服务工作器代码。

  1. 初始化项目后，通过npm安装PWA相关包：npm install workbox-webpack-plugin --save-dev。
  2. 配置Webpack将Workbox插件添加到构建流程中。
  3. 在NestJS静态文件服务设置中启用缓存策略，确保应用资源可被离线访问。
  4. 编写manifest.json定义图标与应用元数据，并在HTML中引用。
  5. 使用ngsw-config.json配置Angular Service Worker的行为。
  6. 最后测试PWA功能，验证是否能在离线状态下正常运行及更新。

此外，记得检查浏览器的开发者工具中的“Application”标签，确认Service Worker已注册且缓存有效。这样就完成了一个基本的NestJS PWA构建。

NestJS构建渐进式Web应用(PWA)实战指南

渐进式Web应用(PWA)结合了Web和移动应用的优点，而NestJS作为强大的Node.js框架非常适合构建PWA的后端服务。

1. 初始化NestJS项目

npm i -g @nestjs/cli
nest new pwa-backend
cd pwa-backend

2. 添加PWA核心功能

安装必要依赖

npm install @nestjs/pwa workbox-webpack-plugin --save

配置Service Worker

在main.ts中启用PWA:

import { NestFactory } from '@nestjs/core';
import { PwaModule } from '@nestjs/pwa';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  // 启用PWA支持
  app.use(PwaModule.register({
    enabled: process.env.NODE_ENV !== 'development',
    // 其他配置选项
  }));
  
  await app.listen(3000);
}
bootstrap();

3. 前端PWA配置

虽然NestJS主要处理后端，但可以配合前端框架(如Angular)实现完整PWA:

// 在Angular项目中
ng add @angular/pwa --project your-project-name

4. 关键PWA特性实现

离线缓存策略

// service-worker配置
{
  runtimeCaching: [{
    urlPattern: /api/,
    handler: 'NetworkFirst',
    options: {
      cacheName: 'api-cache',
      expiration: {
        maxEntries: 100,
        maxAgeSeconds: 86400
      }
    }
  }]
}

5. 部署注意事项

  • 确保HTTPS(本地开发可用localhost)
  • 提供完善的manifest.json
  • 实现推送通知API
  • 添加适当的图标和启动画面

NestJS的模块化结构使PWA功能易于维护和扩展。通过合理配置，你可以构建出高性能、可离线使用的渐进式Web应用。

回到顶部