/web-push-test

A Java and Vue demo program for web push notification

Primary LanguageJavaMIT LicenseMIT

Java web push notification demo

A web push notification demo with Java Spring Boot backend and Vue frontend.

Quick start

Assuming the system has JDK (17 or later, with JAVA_HOME environment variable set) and npm installed:

git clone https://github.com/kitsook/web-push-test.git
# to build and start backend
cd web-push-test
./mvnw clean package spring-boot:run
# in another shell, to build and start frontend
cd web-push-test/src/ui
npm install && npm run serve

The backend restful API will be listening on http://localhost:8081 and frontend is served via http://localhost:8080.

Technical details

Backend

  • A Spring Boot application with restful APIs for managing subscriptions and triggering the backend to push notifications
  • Key components
    • controllers/MessageController: serving APIs for pushing notification
    • controllers/SubscriptionController: serving APIs for managing subscription
    • dto/NotificationMessage: bean for the notification message. Only a few available fields are included for demo purposes
    • services/MessageService: service to communicating with Push server using webpush-java
    • utils/Storage: temporary storage for the demo. The public/private key pair should be stored in securied storage for production deployment. Also the subscriptions should be stored in persistent storage
    • WebPushTestApplication: main application. It uses WebMvcConfigurer to open CORS calling for demo purposes. Should setup properly for actual deployment
  • Since it has no persistent storage, whenever the backend is restarted, user will need to re-subscribe for the notification to work
  • The Swagger document of the backend restful API is available at http://localhost:8081/v1/swagger-ui/index.html when backend is running

  • To start the backend for debugging:
./mvnw clean package spring-boot:run -Dspring-boot.run.jvmArguments="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5005"

Frontend

  • Implemented with Vue and Vuetify
  • Key components
    • ui/src/components/Subscribe.vue: UI for the subscriptions
      • Shows whether user has granted permission to display notofication
      • To subscribe / unsubscribe from the notification
    • ui/src/components/ManualScribe.vue: allow manually add subscriptions for testing purposes
    • ui/src/components/Message.vue: UI for triggering the backend to send notification
    • ui/src/services/Publishing.js and ui/src/services/Subscription.js: calling the restful APIs with hard-coded localhost URLs
    • ui/public/service-worker.js: the logic to run when receiving notifications. It is registered during the initialization of Subscribe.vue. Alternatively, instead of using a standalone js file, the logic can be part of the webpack