Progressive Web Apps with Java Backend

Overview

Progressive Web Apps (PWAs) combined with Java backend provide native-app-like experiences with web technologies. This guide covers building PWAs with Java backend services.

Architecture

Frontend (PWA) ↔ Java Backend ↔ Database
ↆ
Service Worker
ↆ
Cache API

1. Java Backend Setup

Spring Boot Configuration

// pom.xml dependencies
/*
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
*/
@SpringBootApplication
public class PwaBackendApplication {
public static void main(String[] args) {
SpringApplication.run(PwaBackendApplication.class, args);
}
}

CORS Configuration

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("https://your-pwa-domain.com", "http://localhost:3000")
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.allowedHeaders("*")
.allowCredentials(true)
.maxAge(3600);
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
// Serve static PWA files
registry.addResourceHandler("/**")
.addResourceLocations("classpath:/static/")
.setCachePeriod(3600)
.resourceChain(true)
.addResolver(new PathResourceResolver());
}
}

2. PWA Manifest and Service Worker Controller

Manifest Controller

@RestController
@RequestMapping("/api/manifest")
public class ManifestController {
@GetMapping(value = "/web-app-manifest.json", produces = "application/json")
public Map<String, Object> getWebAppManifest() {
Map<String, Object> manifest = new LinkedHashMap<>();
// Basic manifest properties
manifest.put("name", "My Progressive Web App");
manifest.put("short_name", "MyPWA");
manifest.put("description", "A progressive web app with Java backend");
manifest.put("start_url", "/");
manifest.put("display", "standalone");
manifest.put("background_color", "#ffffff");
manifest.put("theme_color", "#000000");
manifest.put("orientation", "portrait-primary");
// Icons
List<Map<String, Object>> icons = new ArrayList<>();
icons.add(createIcon("icons/icon-72x72.png", "72x72", "image/png"));
icons.add(createIcon("icons/icon-96x96.png", "96x96", "image/png"));
icons.add(createIcon("icons/icon-128x128.png", "128x128", "image/png"));
icons.add(createIcon("icons/icon-144x144.png", "144x144", "image/png"));
icons.add(createIcon("icons/icon-152x152.png", "152x152", "image/png"));
icons.add(createIcon("icons/icon-192x192.png", "192x192", "image/png"));
icons.add(createIcon("icons/icon-384x384.png", "384x384", "image/png"));
icons.add(createIcon("icons/icon-512x512.png", "512x512", "image/png"));
manifest.put("icons", icons);
// Screenshots
List<Map<String, Object>> screenshots = new ArrayList<>();
screenshots.add(createScreenshot("screenshots/desktop.png", "1280x720", "wide"));
screenshots.add(createScreenshot("screenshots/mobile.png", "750x1334", "narrow"));
manifest.put("screenshots", screenshots);
// Categories
manifest.put("categories", Arrays.asList("business", "productivity"));
return manifest;
}
private Map<String, Object> createIcon(String src, String sizes, String type) {
Map<String, Object> icon = new HashMap<>();
icon.put("src", src);
icon.put("sizes", sizes);
icon.put("type", type);
icon.put("purpose", "any maskable");
return icon;
}
private Map<String, Object> createScreenshot(String src, String sizes, String form) {
Map<String, Object> screenshot = new HashMap<>();
screenshot.put("src", src);
screenshot.put("sizes", sizes);
screenshot.put("type", "image/png");
screenshot.put("form", form);
return screenshot;
}
}

Service Worker Registration Controller

@RestController
@RequestMapping("/api/service-worker")
public class ServiceWorkerController {
@GetMapping(value = "/sw.js", produces = "application/javascript")
public String getServiceWorker() {
return """
const CACHE_NAME = 'pwa-cache-v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/app.js',
'/images/logo.png'
];
// Install event
self.addEventListener('install', event => {
console.log('Service Worker installing.');
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});
// Fetch event
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
// Return cached version or fetch from network
return response || fetch(event.request);
})
);
});
// Activate event
self.addEventListener('activate', event => {
console.log('Service Worker activating.');
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== CACHE_NAME) {
return caches.delete(cacheName);
}
})
);
})
);
});
""";
}
@PostMapping("/push/subscribe")
public ResponseEntity<?> subscribeToPush(@RequestBody PushSubscription subscription) {
// Store subscription in database
pushSubscriptionService.saveSubscription(subscription);
return ResponseEntity.ok().build();
}
@PostMapping("/push/send")
public ResponseEntity<?> sendPushNotification(@RequestBody PushMessage message) {
pushNotificationService.sendNotificationToAll(message);
return ResponseEntity.ok().build();
}
}

3. Data Models and Services

PWA Data Models

@Entity
@Table(name = "push_subscriptions")
public class PushSubscription {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(columnDefinition = "TEXT")
private String endpoint;
@Column(columnDefinition = "TEXT")
private String p256dh;
@Column(columnDefinition = "TEXT")
private String auth;
private LocalDateTime createdAt;
// Constructors, getters, setters
public PushSubscription() {
this.createdAt = LocalDateTime.now();
}
}
@Entity
@Table(name = "app_cache")
public class AppCache {
@Id
private String cacheKey;
@Column(columnDefinition = "TEXT")
private String cacheValue;
private LocalDateTime expiresAt;
private LocalDateTime lastAccessed;
// Constructors, getters, setters
}
@Entity
@Table(name = "offline_actions")
public class OfflineAction {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String actionType; // CREATE, UPDATE, DELETE
private String entityType; // USER, ORDER, etc.
private String entityData; // JSON data
@Enumerated(EnumType.STRING)
private SyncStatus syncStatus;
private LocalDateTime createdAt;
private LocalDateTime syncedAt;
// Constructors, getters, setters
}
enum SyncStatus {
PENDING, SYNCED, FAILED
}

Service Layer

@Service
public class PushNotificationService {
@Value("${vapid.public.key}")
private String vapidPublicKey;
@Value("${vapid.private.key}")
private String vapidPrivateKey;
private final PushSubscriptionRepository subscriptionRepository;
public PushNotificationService(PushSubscriptionRepository subscriptionRepository) {
this.subscriptionRepository = subscriptionRepository;
}
public void sendNotificationToAll(PushMessage message) {
List<PushSubscription> subscriptions = subscriptionRepository.findAll();
for (PushSubscription subscription : subscriptions) {
sendNotification(subscription, message);
}
}
public void sendNotification(PushSubscription subscription, PushMessage message) {
try {
// Create JWT token for VAPID
String token = createVapidToken(subscription.getEndpoint());
// Create push message
PushService pushService = new PushService();
Notification notification = Notification.builder()
.title(message.getTitle())
.body(message.getBody())
.icon("/icons/icon-192x192.png")
.badge("/icons/badge-72x72.png")
.data(message.getData())
.build();
// Send notification (pseudo-code - use webpush library)
// pushService.send(subscription, notification, token);
} catch (Exception e) {
System.err.println("Failed to send push notification: " + e.getMessage());
}
}
private String createVapidToken(String audience) {
// Implement VAPID token creation
// This is a simplified version
return "vapid-token";
}
}
@Service
public class OfflineSyncService {
private final OfflineActionRepository actionRepository;
public OfflineSyncService(OfflineActionRepository actionRepository) {
this.actionRepository = actionRepository;
}
@Transactional
public OfflineAction queueAction(String actionType, String entityType, String entityData) {
OfflineAction action = new OfflineAction();
action.setActionType(actionType);
action.setEntityType(entityType);
action.setEntityData(entityData);
action.setSyncStatus(SyncStatus.PENDING);
return actionRepository.save(action);
}
@Transactional
public void processPendingActions() {
List<OfflineAction> pendingActions = actionRepository.findBySyncStatus(SyncStatus.PENDING);
for (OfflineAction action : pendingActions) {
try {
processAction(action);
action.setSyncStatus(SyncStatus.SYNCED);
action.setSyncedAt(LocalDateTime.now());
actionRepository.save(action);
} catch (Exception e) {
action.setSyncStatus(SyncStatus.FAILED);
actionRepository.save(action);
System.err.println("Failed to process action: " + action.getId());
}
}
}
private void processAction(OfflineAction action) {
// Process the action based on type and entity
switch (action.getActionType()) {
case "CREATE":
// Handle create operation
break;
case "UPDATE":
// Handle update operation
break;
case "DELETE":
// Handle delete operation
break;
}
}
public List<OfflineAction> getPendingActions() {
return actionRepository.findBySyncStatus(SyncStatus.PENDING);
}
}

4. REST API Controllers

PWA API Controller

@RestController
@RequestMapping("/api/pwa")
public class PwaApiController {
private final ProductService productService;
private final OfflineSyncService offlineSyncService;
public PwaApiController(ProductService productService, OfflineSyncService offlineSyncService) {
this.productService = productService;
this.offlineSyncService = offlineSyncService;
}
@GetMapping("/products")
public ResponseEntity<List<Product>> getProducts(
@RequestParam(defaultValue = "0") int page,
@RequestParam(defaultValue = "20") int size) {
List<Product> products = productService.getProducts(page, size);
// Add cache headers for PWA
return ResponseEntity.ok()
.cacheControl(CacheControl.maxAge(1, TimeUnit.HOURS))
.eTag(String.valueOf(products.hashCode()))
.body(products);
}
@PostMapping("/products")
public ResponseEntity<Product> createProduct(@RequestBody Product product) {
try {
Product savedProduct = productService.saveProduct(product);
return ResponseEntity.status(HttpStatus.CREATED).body(savedProduct);
} catch (Exception e) {
// Queue for offline sync
String productJson = convertToJson(product);
offlineSyncService.queueAction("CREATE", "PRODUCT", productJson);
return ResponseEntity.status(HttpStatus.ACCEPTED).build();
}
}
@GetMapping("/sync/status")
public ResponseEntity<SyncStatusResponse> getSyncStatus() {
List<OfflineAction> pendingActions = offlineSyncService.getPendingActions();
SyncStatusResponse response = new SyncStatusResponse();
response.setPendingActionsCount(pendingActions.size());
response.setLastSyncAttempt(LocalDateTime.now());
response.setOnline(true);
return ResponseEntity.ok(response);
}
@PostMapping("/sync/now")
public ResponseEntity<?> triggerSync() {
offlineSyncService.processPendingActions();
return ResponseEntity.ok().build();
}
private String convertToJson(Object object) {
try {
ObjectMapper mapper = new ObjectMapper();
return mapper.writeValueAsString(object);
} catch (Exception e) {
return "{}";
}
}
// DTO classes
public static class SyncStatusResponse {
private int pendingActionsCount;
private LocalDateTime lastSyncAttempt;
private boolean online;
// Getters and setters
}
}

Background Sync Controller

@RestController
@RequestMapping("/api/background-sync")
public class BackgroundSyncController {
private final BackgroundSyncService backgroundSyncService;
public BackgroundSyncController(BackgroundSyncService backgroundSyncService) {
this.backgroundSyncService = backgroundSyncService;
}
@PostMapping("/register")
public ResponseEntity<?> registerBackgroundSync(@RequestBody SyncRegistration registration) {
backgroundSyncService.registerSyncTask(registration);
return ResponseEntity.ok().build();
}
@GetMapping("/tasks")
public ResponseEntity<List<SyncTask>> getSyncTasks() {
List<SyncTask> tasks = backgroundSyncService.getPendingTasks();
return ResponseEntity.ok(tasks);
}
@PostMapping("/execute/{taskId}")
public ResponseEntity<?> executeSyncTask(@PathVariable String taskId) {
backgroundSyncService.executeTask(taskId);
return ResponseEntity.ok().build();
}
}
@Service
public class BackgroundSyncService {
private final Map<String, SyncTask> syncTasks = new ConcurrentHashMap<>();
public void registerSyncTask(SyncRegistration registration) {
SyncTask task = new SyncTask();
task.setId(UUID.randomUUID().toString());
task.setTag(registration.getTag());
task.setTaskData(registration.getData());
task.setCreatedAt(LocalDateTime.now());
task.setStatus(SyncTaskStatus.PENDING);
syncTasks.put(task.getId(), task);
}
public List<SyncTask> getPendingTasks() {
return syncTasks.values().stream()
.filter(task -> task.getStatus() == SyncTaskStatus.PENDING)
.collect(Collectors.toList());
}
public void executeTask(String taskId) {
SyncTask task = syncTasks.get(taskId);
if (task != null) {
try {
// Process the background sync task
processTask(task);
task.setStatus(SyncTaskStatus.COMPLETED);
task.setCompletedAt(LocalDateTime.now());
} catch (Exception e) {
task.setStatus(SyncTaskStatus.FAILED);
task.setError(e.getMessage());
}
}
}
private void processTask(SyncTask task) {
// Implement task processing logic
System.out.println("Processing background sync task: " + task.getTag());
}
}

5. PWA Frontend Integration

HTML Template with PWA Features

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My PWA</title>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Progressive Web App with Java Backend"/>
<!-- PWA Manifest -->
<link rel="manifest" href="/api/manifest/web-app-manifest.json">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">
<!-- Service Worker Registration -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/api/service-worker/sw.js')
.then(function(registration) {
console.log('ServiceWorker registration successful');
})
.catch(function(error) {
console.log('ServiceWorker registration failed: ', error);
});
});
}
</script>
</head>
<body>
<div id="app">
<header>
<h1>My PWA</h1>
<div id="connection-status"></div>
</header>
<main>
<!-- App content -->
</main>
</div>
<script src="/js/app.js"></script>
</body>
</html>

JavaScript PWA Features

// app.js - PWA Frontend Logic
class PWAApp {
constructor() {
this.init();
}
init() {
this.registerServiceWorker();
this.setupOfflineDetection();
this.setupBackgroundSync();
this.setupPushNotifications();
this.loadAppData();
}
// Service Worker Registration
async registerServiceWorker() {
if ('serviceWorker' in navigator) {
try {
const registration = await navigator.serviceWorker.register('/api/service-worker/sw.js');
console.log('SW registered: ', registration);
// Set up periodic sync
if ('periodicSync' in registration) {
this.setupPeriodicSync(registration);
}
} catch (error) {
console.error('SW registration failed: ', error);
}
}
}
// Offline Detection
setupOfflineDetection() {
window.addEventListener('online', () => {
this.updateConnectionStatus(true);
this.syncOfflineData();
});
window.addEventListener('offline', () => {
this.updateConnectionStatus(false);
});
// Initial status
this.updateConnectionStatus(navigator.onLine);
}
updateConnectionStatus(online) {
const statusElement = document.getElementById('connection-status');
if (statusElement) {
statusElement.textContent = online ? 'Online' : 'Offline';
statusElement.className = online ? 'online' : 'offline';
}
}
// Background Sync
async setupBackgroundSync() {
if ('serviceWorker' in navigator && 'SyncManager' in window) {
const registration = await navigator.serviceWorker.ready;
// Register background sync
try {
await registration.sync.register('sync-data');
console.log('Background sync registered');
} catch (error) {
console.error('Background sync registration failed:', error);
}
}
}
async setupPeriodicSync(registration) {
try {
await registration.periodicSync.register('data-update', {
minInterval: 24 * 60 * 60 * 1000 // 24 hours
});
console.log('Periodic sync registered');
} catch (error) {
console.error('Periodic sync failed:', error);
}
}
// Push Notifications
async setupPushNotifications() {
if ('Notification' in window && 'serviceWorker' in navigator) {
const permission = await Notification.requestPermission();
if (permission === 'granted') {
this.subscribeToPush();
}
}
}
async subscribeToPush() {
const registration = await navigator.serviceWorker.ready;
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: this.urlBase64ToUint8Array('YOUR_VAPID_PUBLIC_KEY')
});
// Send subscription to backend
await fetch('/api/service-worker/push/subscribe', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(subscription)
});
}
urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/-/g, '+')
.replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
// Data Management
async loadAppData() {
try {
const response = await fetch('/api/pwa/products');
const products = await response.json();
this.renderProducts(products);
} catch (error) {
console.error('Failed to load data:', error);
this.loadFromCache();
}
}
async syncOfflineData() {
// Sync any pending offline actions
try {
await fetch('/api/pwa/sync/now', { method: 'POST' });
console.log('Offline data synced');
} catch (error) {
console.error('Sync failed:', error);
}
}
// Cache Management
async loadFromCache() {
if ('caches' in window) {
const cache = await caches.open('pwa-cache-v1');
const response = await cache.match('/api/pwa/products');
if (response) {
const products = await response.json();
this.renderProducts(products);
}
}
}
renderProducts(products) {
// Render products in UI
const main = document.querySelector('main');
main.innerHTML = products.map(product => `
<div class="product">
<h3>${product.name}</h3>
<p>${product.description}</p>
</div>
`).join('');
}
// Offline Data Storage
async storeOfflineAction(action) {
if (!navigator.onLine) {
const actions = JSON.parse(localStorage.getItem('offlineActions') || '[]');
actions.push(action);
localStorage.setItem('offlineActions', JSON.stringify(actions));
}
}
}
// Initialize the app
new PWAApp();

6. Advanced PWA Features

Install Prompt Handling

@RestController
@RequestMapping("/api/install")
public class InstallPromptController {
@GetMapping("/criteria")
public ResponseEntity<InstallCriteria> getInstallCriteria() {
InstallCriteria criteria = new InstallCriteria();
criteria.setMinVisits(2);
criteria.setMinEngagementTime(30); // seconds
criteria.setRequiredFeatures(Arrays.asList("serviceWorker", "appInstalled"));
return ResponseEntity.ok(criteria);
}
@PostMapping("/track")
public ResponseEntity<?> trackInstallEvent(@RequestBody InstallEvent event) {
// Track installation metrics
metricsService.trackInstall(event);
return ResponseEntity.ok().build();
}
// DTO classes
public static class InstallCriteria {
private int minVisits;
private int minEngagementTime;
private List<String> requiredFeatures;
// Getters and setters
}
public static class InstallEvent {
private String eventType; // BEFORE_INSTALL_PROMPT, INSTALL_ACCEPTED, INSTALL_DISMISSED
private String userAgent;
private LocalDateTime timestamp;
// Getters and setters
}
}

Performance Monitoring

@Service
public class PwaMetricsService {
private final MetricRepository metricRepository;
public PwaMetricsService(MetricRepository metricRepository) {
this.metricRepository = metricRepository;
}
@Async
public void trackPerformanceMetric(PerformanceMetric metric) {
metricRepository.save(metric);
// Alert if performance degrades
if (metric.getLoadTime() > 3000) { // 3 seconds
alertSlowPerformance(metric);
}
}
@Async
public void trackCoreWebVitals(CoreWebVitals vitals) {
// Track Core Web Vitals
if (vitals.getLcp() > 2500) { // Largest Contentful Paint
alertPoorLCP(vitals);
}
if (vitals.getFid() > 100) { // First Input Delay
alertPoorFID(vitals);
}
if (vitals.getCls() > 0.1) { // Cumulative Layout Shift
alertPoorCLS(vitals);
}
}
public PerformanceReport generatePerformanceReport(LocalDate from, LocalDate to) {
List<PerformanceMetric> metrics = metricRepository.findByDateRange(from, to);
PerformanceReport report = new PerformanceReport();
report.setAverageLoadTime(calculateAverageLoadTime(metrics));
report.setP75LoadTime(calculatePercentileLoadTime(metrics, 75));
report.setP95LoadTime(calculatePercentileLoadTime(metrics, 95));
report.setTotalVisits(metrics.size());
return report;
}
private void alertSlowPerformance(PerformanceMetric metric) {
// Send alert (email, Slack, etc.)
System.out.println("Slow performance detected: " + metric.getLoadTime() + "ms");
}
// Similar methods for other alerts...
}
@Entity
@Table(name = "performance_metrics")
public class PerformanceMetric {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String pageUrl;
private Long loadTime; // in milliseconds
private Long firstContentfulPaint;
private Long largestContentfulPaint;
private Long firstInputDelay;
private Double cumulativeLayoutShift;
private String userAgent;
private String connectionType;
private LocalDateTime measuredAt;
// Constructors, getters, setters
}

7. Configuration and Deployment

Application Properties

# application.properties
server.port=8080
spring.web.resources.static-locations=classpath:/static/
# PWA Configuration
pwa.name=My Progressive Web App
pwa.short-name=MyPWA
pwa.theme-color=#000000
pwa.background-color=#ffffff
# VAPID Keys for Push Notifications
vapid.public.key=YOUR_VAPID_PUBLIC_KEY
vapid.private.key=YOUR_VAPID_PRIVATE_KEY
# Cache Configuration
spring.cache.type=caffeine
spring.cache.caffeine.spec=maximumSize=500,expireAfterAccess=3600s
# Database
spring.datasource.url=jdbc:h2:file:./pwa-db
spring.datasource.driverClassName=org.h2.Driver
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

Security Configuration

@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http
.cors().and()
.csrf().disable() // For API endpoints, consider CSRF configuration
.authorizeHttpRequests(authz -> authz
.requestMatchers("/api/public/**", "/api/manifest/**", 
"/api/service-worker/**", "/", "/static/**").permitAll()
.anyRequest().authenticated()
)
.headers(headers -> headers
.contentSecurityPolicy(csp -> csp
.policyDirectives("default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';")
)
);
return http.build();
}
}

This comprehensive PWA with Java backend setup provides:

Service worker integration for offline functionality
Push notifications with VAPID
Background sync capabilities
Performance monitoring
Offline data synchronization
Install prompt management
Comprehensive caching strategies

The architecture ensures your web app works reliably regardless of network conditions while providing a native-app-like experience.