Skip to content

A Java and Vue demo program for web push notification

License

Notifications You must be signed in to change notification settings

kitsook/web-push-test

Folders and files

NameName
Last commit message
Last commit date

Latest commit

5e0930f · Apr 9, 2024

History

31 Commits
Jan 28, 2024
Apr 9, 2024
Jan 28, 2024
Jan 28, 2024
Apr 3, 2024
Jan 28, 2024
Jan 28, 2024
Apr 9, 2024

Repository files navigation

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

About

A Java and Vue demo program for web push notification

Resources

License

Stars

Watchers

Forks