PWA

[sgempi]

fixes #64

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced a new subscription endpoint for managing user subscriptions.
  • Added support for push notifications integrated with email notifications.
  • Implemented an installation banner for mobile users to guide app installation.
  • Enhanced user interface with offline and update notifications.
  • Added a manifest file for Progressive Web App (PWA) functionality.
  • Integrated service worker for improved offline capabilities.
  • Enhanced session management and user settings for better type safety.
  • Added detailed installation instructions for various platforms in localization files.

• Bug Fixes

  • Disabled user actions when the application is offline to prevent errors.

• Documentation

  • Updated localization files to include new keys and installation instructions.

• Chores

  • Updated package dependencies for improved functionality and development workflow.

These changes aim to enhance user experience, improve functionality, and ensure better communication with users regarding app status and updates.

[coderabbitai[bot]]

Walkthrough

The pull request introduces significant enhancements to session management and subscription handling within the backend application. A new subscription endpoint is added to process user subscription requests, and session management is refactored for improved reusability. Additionally, TypeScript definitions are updated to support new properties related to subscriptions and user settings. The frontend is enhanced with new components and features to manage offline states, service worker registration, and installation prompts, along with updates to localization files to support these features.

Changes

File	Change Summary
backend/app.ts	Added a reusable sessionStore variable and a new POST endpoint /subscribe for handling subscriptions.
backend/express-session.d.ts	Extended SessionData interface to include optional subscription and passport properties.
backend/mail/mail.ts	Integrated sendPushNotification function into sendMail, allowing push notifications to be sent alongside emails.
backend/models/user.ts	Added showInstallBanner field to settings in userSchema.
backend/package.json	Added web-push and @types/web-push dependencies.
backend/push.ts	Introduced functions for sending push notifications and managing user sessions.
backend/server.ts	Added VITE_PUBLIC_VAPID_KEY and VITE_PRIVATE_VAPID_KEY to environment variables.
common/forms/user.json	Added showInstallBanner property to the settings schema.
common/locales/de.json	Updated with new keys for installation prompts and reload instructions.
common/locales/en.json	Similar updates as the German localization, enhancing installation instructions.
common/types.ts	Introduced Subscription type and updated User interface to include showInstallBanner.
docker-compose.yml	Updated Dockerfile paths for ldap, inbucket, and mongo-express services to use a static reference.
frontend/Dockerfile.development	Integrated Nginx into the frontend Dockerfile for development.
frontend/index.html	Added link to manifest.json and script for service worker registration.
frontend/package.json	Updated dev and build scripts; added nodemon and vite-plugin-pwa dependencies.
frontend/src/App.vue	Enhanced user experience with offline status handling and installation prompts.
frontend/src/components/HomePage.vue	Added conditional disabling of buttons based on offline status.
frontend/src/components/elements/Installation.vue	Created a component for displaying installation instructions for mobile users.
frontend/src/components/elements/OfflineBanner.vue	Introduced a banner to indicate offline status to users.
frontend/src/components/elements/PaginationList.vue	Added data fetching logic based on online status.
frontend/src/components/travel/TravelPage.vue	Updated form elements to disable when offline.
frontend/src/components/travel/elements/TravelApplication.vue	Added disabled state to buttons based on offline status.
frontend/src/env.d.ts	Added VITE_PUBLIC_VAPID_KEY to environment variable definitions.
frontend/src/main.ts	Augmented Vue's global properties with new boolean states.
frontend/src/manifest.json	Created a new manifest file for PWA functionality.
frontend/src/registerSW.ts	Implemented service worker registration and update handling.
frontend/src/router.ts	Modified authentication logic to allow offline users to bypass checks.
frontend/sw.ts	Implemented service worker with caching and offline capabilities.
frontend/vite.config.ts	Added vite-plugin-pwa to enhance PWA capabilities.

Possibly related PRs

• #100: Enhancements in user management and project supervision.
• #106: Dynamic forms for better localization, potentially impacting subscription handling.
• #110: Corrections in settings that may relate to user sessions.
• #111: Rate limiting that could affect the new subscription endpoint.

🐰 "In the code, a new path we weave,
With subscriptions and banners, we believe.
Push notifications, oh what a delight,
For users to stay connected, day and night.
So hop along, let’s celebrate this cheer,
With every change, our goals are near!" 🐇✨

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.