The May Angular Montevideo Meetup was a resounding success, celebrating the release of Angular 18. Held at our offices, attendees dove into the latest features, enhancements, and best practices that promise to revolutionize web development. The event provided a unique opportunity to explore Angular 18’s potential and network with fellow developers passionate about the technology.

Event details

📅 Date: May 23rd

⏰ Time: 19:00 h

📍 Location: Qubika Buceo office

🖊️​ Follow Angular MVD on meetup.com: https://www.meetup.com/angular-mvd/ 

 

Talk recap

Push notifications

Speaker: Emilio Cortés from Qubika

Emilio Cortés kicked off the talks with an engaging presentation on push notifications. 

What are push notifications?

Push notifications allow you to “push” information to users, even when they’re not actively using your website. This functionality is invaluable for re-engaging users with your application. Push notifications enable communication from the server to the client, ensuring users stay informed and engaged.

Why use push notifications?

Key features

• Cross-platform: Compatible with various browsers and devices.
• Engagement: Reaches users even when they’re not on the website.
• Rich media: Supports text, images, icons, and action buttons.

Use cases

• News alerts: Deliver breaking news or important updates.
• Reminders: Send reminders for events, appointments, or tasks.
• Promotions: Notify users about sales, offers, or new products.

How push notifications work

Components

• User’s browser: Receives and displays the push notification.
• Application server: Creates and sends push notification requests to the push service.
• Push service: Routes messages from the server to the user’s browser (e.g., Firebase Cloud Messaging (FCM) for Chrome, Mozilla’s Push Service for Firefox).

Workflow – Setup

1. User opt-in: The user must grant permission for the website to send push notifications.
2. Service worker registration: The website registers a service worker to handle push events.
3. Subscription: The browser generates a unique subscription endpoint (URL) and keys, which are sent to the application server.

Workflow – Messaging

1. Send request: The application server sends a push notification request to the push service using the subscription endpoint.
2. Delivery: The push service routes the message to the user’s browser.
3. Display: The service worker receives the notification and displays it to the user.

 

Security considerations

Push service authentication

• VAPID keys: Public/private key pair used for authentication and security.
  • Public key: Shared with the website, used to generate PushSubscription.
  • Private key: Used to sign requests, kept secure.
• Authorization header: Ensures the push message is from a trusted server.

Message encryption

• Purpose: Ensures that only the intended recipient can decrypt and read the notification content, protecting the message from intermediaries.

Implementation tools

Client side

• @angular/pwa: Enables service worker abstractions in an Angular application, turning it into a Progressive Web App.
  • Installation: ng add @angular/pwa
• SwPush service: Handles push notifications and their subscriptions.
  • Key methods and properties:
    • requestSubscription(options: { serverPublicKey: string; }): Subscribes to web push notifications.
    • isEnabled: Indicates if the Service Worker is supported and enabled.
    • subscription: Emits the active PushSubscription or null.
    • messages: Emits payloads of received push notification messages.
    • notificationClicks: Emits payloads of received messages and user actions.

Server side

• web-push library: Facilitates web push protocol requests using PushSubscription data.
  • Functions:
    • setVapidDetails(subject: string, publicKey: string, privateKey: string): Configures VAPID keys.
    • sendNotification(subscription: PushSubscription, payload?: string | Buffer | null, options?: RequestOptions): Sends push notification requests.

 

The power of decorators in Angular

Speaker: Juanse Mastrangelo from Naic

Juanse Mastrangelo captivated the audience with his presentation on the magic of decorators. He unraveled the power and versatility of decorators in Angular, showcasing their potential to enhance development workflows.

 

Angular 18 review

The event concluded with an in-depth review of Angular 18, the newest major release. This session covered all the exciting new features, providing attendees with a comprehensive understanding of what’s new and improved.