Progressive Web Apps (PWA) telah merevolusi cara kita membangun aplikasi web, menggabungkan keunggulan web dan native applications. Di tahun 2025, PWA menjadi standard untuk aplikasi web modern yang memberikan pengalaman seperti native app namun tetap accessible melalui browser. Artikel ini akan memberikan panduan lengkap untuk membangun PWA yang powerful dan user-friendly.<\/p>\n
Apa itu Progressive Web App?<\/p>\n
PWA adalah web applications yang menggunakan modern web capabilities untuk menyediakan user experience seperti native mobile app:<\/p>\n
1. Core PWA Characteristics
\n\u2022 Progressive: Works untuk semua users, regardless browser choice
\n\u2022 Responsive: Works di semua devices dan form factors
\n\u2022 Connectivity Independent: Works offline atau dengan poor network
\n\u2022 App-like: Feels like native app dengan navigation dan interactions
\n\u2022 Fresh: Always up-to-date dengan background sync
\n\u2022 Safe: Served melalui HTTPS untuk prevent tampering
\n\u2022 Discoverable: Searchable melalui search engines
\n\u2022 Re-engageable: Can send push notifications
\n\u2022 Installable: Can be added to home screen<\/p>\n
2. PWA Technology Stack
\n\u2022 Service Workers: Background processes untuk offline capability
\n\u2022 Web App Manifest: JSON file untuk app metadata
\n\u2022 HTTPS: Secure connection requirement
\n\u2022 Responsive Design: Multi-device compatibility
\n\u2022 Application Shell Architecture: Instant loading experience<\/p>\n
Service Workers Deep Dive<\/p>\n
1. Service Worker Fundamentals
\nService worker adalah JavaScript file yang berjalan di background, separate dari web page:<\/p>\n
“`javascript
\n\/\/ sw.js – Service Worker Implementation
\nconst CACHE_NAME = ‘pwa-app-v1.0.0’;
\nconst STATIC_CACHE = ‘static-v1’;
\nconst DYNAMIC_CACHE = ‘dynamic-v1’;<\/p>\n
\/\/ Files to cache immediately
\nconst STATIC_ASSETS = [
\n ‘\/’,
\n ‘\/index.html’,
\n ‘\/css\/main.css’,
\n ‘\/js\/main.js’,
\n ‘\/images\/logo.png’,
\n ‘\/images\/icons\/icon-192×192.png’,
\n ‘\/manifest.json’,
\n ‘https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap’
\n];<\/p>\n
\/\/ Install event – cache static assets
\nself.addEventListener(‘install’, (event) => {
\n console.log(‘Service Worker: Installing…’);<\/p>\n
event.waitUntil(
\n caches.open(STATIC_CACHE)
\n .then((cache) => {
\n console.log(‘Service Worker: Caching static assets’);
\n return cache.addAll(STATIC_ASSETS);
\n })
\n .then(() => self.skipWaiting())
\n );
\n});<\/p>\n
\/\/ Activate event – clean up old caches
\nself.addEventListener(‘activate’, (event) => {
\n console.log(‘Service Worker: Activating…’);<\/p>\n
event.waitUntil(
\n caches.keys()
\n .then((cacheNames) => {
\n return Promise.all(
\n cacheNames.map((cacheName) => {
\n if (cacheName !== STATIC_CACHE && cacheName !== DYNAMIC_CACHE) {
\n console.log(‘Service Worker: Deleting old cache:’, cacheName);
\n return caches.delete(cacheName);
\n }
\n })
\n );
\n })
\n .then(() => self.clients.claim())
\n );
\n});<\/p>\n
\/\/ Fetch event – serve from cache with network fallback
\nself.addEventListener(‘fetch’, (event) => {
\n const { request } = event;<\/p>\n
\/\/ Skip non-GET requests
\n if (request.method !== ‘GET’) {
\n return;
\n }<\/p>\n
\/\/ Strategy 1: Cache First for static assets
\n if (request.url.includes(‘\/css\/’) ||
\n request.url.includes(‘\/js\/’) ||
\n request.url.includes(‘\/images\/’) ||
\n request.url.includes(‘\/fonts\/’)) {<\/p>\n
event.respondWith(
\n caches.match(request)
\n .then((response) => {
\n return response || fetch(request);
\n })
\n );
\n return;
\n }<\/p>\n
\/\/ Strategy 2: Network First for API calls
\n if (request.url.includes(‘\/api\/’)) {
\n event.respondWith(
\n fetch(request)
\n .then((response) => {
\n \/\/ Cache successful API responses
\n if (response.status === 200) {
\n const responseClone = response.clone();
\n caches.open(DYNAMIC_CACHE)
\n .then((cache) => cache.put(request, responseClone));
\n }
\n return response;
\n })
\n .catch(() => {
\n \/\/ Try to serve from cache if network fails
\n return caches.match(request);
\n })
\n );
\n return;
\n }<\/p>\n
\/\/ Strategy 3: Stale While Revalidate for HTML pages
\n if (request.headers.get(‘accept’).includes(‘text\/html’)) {
\n event.respondWith(
\n caches.match(request)
\n .then((response) => {
\n const networkFetch = fetch(request)
\n .then((newResponse) => {
\n caches.open(DYNAMIC_CACHE)
\n .then((cache) => cache.put(request, newResponse.clone()));
\n return newResponse;
\n });<\/p>\n
return response || networkFetch;
\n })
\n );
\n return;
\n }<\/p>\n
\/\/ Default: Network request
\n event.respondWith(fetch(request));
\n});
\n“`<\/p>\n
2. Advanced Caching Strategies
\n“`javascript
\n\/\/ Advanced service worker with multiple strategies
\nclass CacheManager {
\n constructor() {
\n this.strategies = {
\n cacheFirst: this.cacheFirst.bind(this),
\n networkFirst: this.networkFirst.bind(this),
\n staleWhileRevalidate: this.staleWhileRevalidate.bind(this),
\n networkOnly: this.networkOnly.bind(this),
\n cacheOnly: this.cacheOnly.bind(this)
\n };
\n }<\/p>\n
async cacheFirst(request) {
\n const cachedResponse = await caches.match(request);
\n return cachedResponse || fetch(request);
\n }<\/p>\n
async networkFirst(request, cacheName = DYNAMIC_CACHE) {
\n try {
\n const networkResponse = await fetch(request);<\/p>\n
if (networkResponse.ok) {
\n const cache = await caches.open(cacheName);
\n cache.put(request, networkResponse.clone());
\n }<\/p>\n
return networkResponse;
\n } catch (error) {
\n return caches.match(request);
\n }
\n }<\/p>\n
async staleWhileRevalidate(request, cacheName = DYNAMIC_CACHE) {
\n const cache = await caches.open(cacheName);
\n const cachedResponse = await cache.match(request);<\/p>\n
const networkFetchPromise = fetch(request)
\n .then((networkResponse) => {
\n cache.put(request, networkResponse.clone());
\n return networkResponse;
\n })
\n .catch(() => cachedResponse);<\/p>\n
return cachedResponse || networkFetchPromise;
\n }<\/p>\n
async networkOnly(request) {
\n return fetch(request);
\n }<\/p>\n
async cacheOnly(request) {
\n return caches.match(request);
\n }<\/p>\n
\/\/ Dynamic routing based on request type
\n async handleRequest(request) {
\n const url = new URL(request.url);<\/p>\n
\/\/ API calls – Network First
\n if (url.pathname.startsWith(‘\/api\/’)) {
\n return this.networkFirst(request);
\n }<\/p>\n
\/\/ Static assets – Cache First
\n if (url.pathname.match(\/\\.(css|js|png|jpg|jpeg|svg|woff|woff2)$\/)) {
\n return this.cacheFirst(request);
\n }<\/p>\n
\/\/ HTML pages – Stale While Revalidate
\n if (request.headers.get(‘accept’).includes(‘text\/html’)) {
\n return this.staleWhileRevalidate(request);
\n }<\/p>\n
\/\/ Default – Network
\n return this.networkOnly(request);
\n }
\n}<\/p>\n
\/\/ Initialize cache manager
\nconst cacheManager = new CacheManager();<\/p>\n
self.addEventListener(‘fetch’, (event) => {
\n if (event.request.method !== ‘GET’) return;<\/p>\n
event.respondWith(
\n cacheManager.handleRequest(event.request)
\n );
\n});
\n“`<\/p>\n
Web App Manifest Configuration<\/p>\n
1. Complete Manifest File
\n“`json
\n\/\/ manifest.json
\n{
\n “name”: “My Progressive Web App”,
\n “short_name”: “PWA App”,
\n “description”: “A modern Progressive Web Application built with best practices”,
\n “start_url”: “\/”,
\n “scope”: “\/”,
\n “display”: “standalone”,
\n “orientation”: “portrait-primary”,
\n “theme_color”: “#2563eb”,
\n “background_color”: “#ffffff”,
\n “lang”: “en-US”,
\n “dir”: “ltr”,
\n “categories”: [“productivity”, “business”, “utilities”],<\/p>\n
“icons”: [
\n {
\n “src”: “images\/icons\/icon-72×72.png”,
\n “sizes”: “72×72”,
\n “type”: “image\/png”,
\n “purpose”: “maskable any”
\n },
\n {
\n “src”: “images\/icons\/icon-96×96.png”,
\n “sizes”: “96×96”,
\n “type”: “image\/png”,
\n “purpose”: “maskable any”
\n },
\n {
\n “src”: “images\/icons\/icon-128×128.png”,
\n “sizes”: “128×128”,
\n “type”: “image\/png”,
\n “purpose”: “maskable any”
\n },
\n {
\n “src”: “images\/icons\/icon-144×144.png”,
\n “sizes”: “144×144”,
\n “type”: “image\/png”,
\n “purpose”: “maskable any”
\n },
\n {
\n “src”: “images\/icons\/icon-152×152.png”,
\n “sizes”: “152×152”,
\n “type”: “image\/png”,
\n “purpose”: “maskable any”
\n },
\n {
\n “src”: “images\/icons\/icon-192×192.png”,
\n “sizes”: “192×192”,
\n “type”: “image\/png”,
\n “purpose”: “maskable any”
\n },
\n {
\n “src”: “images\/icons\/icon-384×384.png”,
\n “sizes”: “384×384”,
\n “type”: “image\/png”,
\n “purpose”: “maskable any”
\n },
\n {
\n “src”: “images\/icons\/icon-512×512.png”,
\n “sizes”: “512×512”,
\n “type”: “image\/png”,
\n “purpose”: “maskable any”
\n }
\n ],<\/p>\n
“screenshots”: [
\n {
\n “src”: “images\/screenshots\/desktop-home.png”,
\n “sizes”: “1280×720”,
\n “type”: “image\/png”,
\n “form_factor”: “wide”,
\n “label”: “Home screen on desktop”
\n },
\n {
\n “src”: “images\/screenshots\/mobile-home.png”,
\n “sizes”: “390×844”,
\n “type”: “image\/png”,
\n “form_factor”: “narrow”,
\n “label”: “Home screen on mobile”
\n }
\n ],<\/p>\n
“shortcuts”: [
\n {
\n “name”: “New Task”,
\n “short_name”: “Add”,
\n “description”: “Create a new task quickly”,
\n “url”: “\/new-task”,
\n “icons”: [
\n {
\n “src”: “images\/icons\/add-96×96.png”,
\n “sizes”: “96×96”
\n }
\n ]
\n },
\n {
\n “name”: “Search”,
\n “short_name”: “Search”,
\n “description”: “Search tasks and content”,
\n “url”: “\/search”,
\n “icons”: [
\n {
\n “src”: “images\/icons\/search-96×96.png”,
\n “sizes”: “96×96”
\n }
\n ]
\n }
\n ],<\/p>\n
“share_target”: {
\n “action”: “\/share”,
\n “method”: “POST”,
\n “enctype”: “multipart\/form-data”,
\n “params”: {
\n “title”: “title”,
\n “text”: “text”,
\n “url”: “url”,
\n “files”: [
\n {
\n “name”: “files”,
\n “accept”: [“image\/*”, “audio\/*”, “video\/*”]
\n }
\n ]
\n }
\n },<\/p>\n
“protocol_handlers”: [
\n {
\n “protocol”: “web+pwa”,
\n “url”: “\/handle-protocol?url=%s”
\n }
\n ]
\n}
\n“`<\/p>\n
2. Dynamic Manifest Generation
\n“`javascript
\n\/\/ Dynamic manifest generation based on user preferences
\nclass ManifestManager {
\n constructor() {
\n this.defaultManifest = {
\n name: “My PWA App”,
\n short_name: “PWA”,
\n display: “standalone”,
\n theme_color: “#2563eb”,
\n background_color: “#ffffff”
\n };
\n }<\/p>\n
generateManifest(userPreferences = {}) {
\n const manifest = {
\n …this.defaultManifest,
\n …userPreferences,
\n icons: this.generateIcons(userPreferences.theme),
\n shortcuts: this.generateShortcuts(userPreferences.features)
\n };<\/p>\n
return manifest;
\n }<\/p>\n
generateIcons(theme = ‘default’) {
\n const iconSets = {
\n default: [
\n { src: “icons\/icon-192×192.png”, sizes: “192×192”, type: “image\/png” },
\n { src: “icons\/icon-512×512.png”, sizes: “512×512”, type: “image\/png” }
\n ],
\n dark: [
\n { src: “icons\/dark\/icon-192×192.png”, sizes: “192×192”, type: “image\/png” },
\n { src: “icons\/dark\/icon-512×512.png”, sizes: “512×512”, type: “image\/png” }
\n ]
\n };<\/p>\n
return iconSets[theme] || iconSets.default;
\n }<\/p>\n
generateShortcuts(features = []) {
\n const allShortcuts = {
\n tasks: {
\n name: “Tasks”,
\n url: “\/tasks”,
\n icons: [{ src: “icons\/tasks.png”, sizes: “96×96” }]
\n },
\n calendar: {
\n name: “Calendar”,
\n url: “\/calendar”,
\n icons: [{ src: “icons\/calendar.png”, sizes: “96×96” }]
\n },
\n messages: {
\n name: “Messages”,
\n url: “\/messages”,
\n icons: [{ src: “icons\/messages.png”, sizes: “96×96″ }]
\n }
\n };<\/p>\n
return features.map(feature => allShortcuts[feature]).filter(Boolean);
\n }<\/p>\n
updateManifest(manifest) {
\n const manifestBlob = new Blob([JSON.stringify(manifest, null, 2)], {
\n type: ‘application\/json’
\n });<\/p>\n
const manifestURL = URL.createObjectURL(manifestBlob);<\/p>\n
\/\/ Update manifest link in document
\n const manifestLink = document.querySelector(‘link[rel=”manifest”]’);
\n if (manifestLink) {
\n manifestLink.href = manifestURL;
\n }<\/p>\n
return manifestURL;
\n }
\n}<\/p>\n
\/\/ Usage
\nconst manifestManager = new ManifestManager();
\nconst dynamicManifest = manifestManager.generateManifest({
\n theme: ‘dark’,
\n features: [‘tasks’, ‘calendar’],
\n name: “My Custom PWA”
\n});<\/p>\n
manifestManager.updateManifest(dynamicManifest);
\n“`<\/p>\n
Background Sync dan Push Notifications<\/p>\n
1. Background Sync Implementation
\n“`javascript
\n\/\/ Background sync for offline actions
\nclass BackgroundSyncManager {
\n constructor() {
\n this.syncRegistry = new Map();
\n this.setupEventListeners();
\n }<\/p>\n
setupEventListeners() {
\n if (‘serviceWorker’ in navigator) {
\n navigator.serviceWorker.ready.then(registration => {
\n registration.addEventListener(‘sync’, (event) => {
\n if (event.tag === ‘background-sync’) {
\n event.waitUntil(this.syncData());
\n }
\n });
\n });
\n }
\n }<\/p>\n
\/\/ Register sync event
\n async registerSync(data) {
\n if (‘serviceWorker’ in navigator && ‘sync’ in window.ServiceWorkerRegistration.prototype) {
\n try {
\n const registration = await navigator.serviceWorker.ready;<\/p>\n
\/\/ Store data untuk sync
\n this.syncRegistry.set(‘pending-data’, data);<\/p>\n
\/\/ Register sync
\n await registration.sync.register(‘background-sync’);<\/p>\n
console.log(‘Background sync registered’);
\n return true;
\n } catch (error) {
\n console.error(‘Background sync registration failed:’, error);
\n return false;
\n }
\n } else {
\n \/\/ Fallback: immediately sync
\n return this.syncData();
\n }
\n }<\/p>\n
async syncData() {
\n const pendingData = this.syncRegistry.get(‘pending-data’);<\/p>\n
if (!pendingData) {
\n console.log(‘No data to sync’);
\n return;
\n }<\/p>\n
try {
\n \/\/ Sync data ke server
\n const response = await fetch(‘\/api\/sync’, {
\n method: ‘POST’,
\n headers: {
\n ‘Content-Type’: ‘application\/json’,
\n },
\n body: JSON.stringify(pendingData)
\n });<\/p>\n
if (response.ok) {
\n console.log(‘Data synced successfully’);
\n this.syncRegistry.delete(‘pending-data’);<\/p>\n
\/\/ Notify user
\n this.showSyncNotification(‘Data synced successfully!’);
\n } else {
\n throw new Error(‘Sync failed’);
\n }
\n } catch (error) {
\n console.error(‘Sync failed:’, error);
\n this.showSyncNotification(‘Sync failed. Will retry later.’, ‘error’);
\n }
\n }<\/p>\n
showSyncNotification(message, type = ‘success’) {
\n if (‘Notification’ in window && Notification.permission === ‘granted’) {
\n new Notification(‘PWA Sync’, {
\n body: message,
\n icon: type === ‘success’ ? ‘\/icons\/success.png’ : ‘\/icons\/error.png’,
\n badge: ‘\/icons\/badge.png’
\n });
\n }
\n }
\n}<\/p>\n
\/\/ Service worker sync handling
\nself.addEventListener(‘sync’, (event) => {
\n if (event.tag === ‘background-sync’) {
\n event.waitUntil(
\n fetch(‘\/api\/sync’, {
\n method: ‘POST’,
\n headers: { ‘Content-Type’: ‘application\/json’ },
\n body: JSON.stringify({ data: ‘pending-sync-data’ })
\n })
\n .then(response => {
\n if (!response.ok) throw new Error(‘Sync failed’);
\n console.log(‘Background sync successful’);
\n })
\n .catch(error => {
\n console.error(‘Background sync failed:’, error);
\n \/\/ Sync will be retried automatically
\n })
\n );
\n }
\n});
\n“`<\/p>\n
2. Push Notifications Setup
\n“`javascript
\n\/\/ Push notification manager
\nclass PushNotificationManager {
\n constructor() {
\n this.subscription = null;
\n this.publicKey = ‘BKqQy6nJz8QzNnQz8QzNnQz8QzNnQz8QzNnQz8QzNnQz8QzNnQz8QzNnQz8QzNnQzNn’;
\n }<\/p>\n
async initialize() {
\n \/\/ Request notification permission
\n const permission = await this.requestPermission();<\/p>\n
if (permission === ‘granted’) {
\n await this.subscribeToPush();
\n this.setupPushEventListeners();
\n }<\/p>\n
return permission;
\n }<\/p>\n
async requestPermission() {
\n if (!(‘Notification’ in window)) {
\n console.warn(‘This browser does not support notifications’);
\n return ‘denied’;
\n }<\/p>\n
if (Notification.permission === ‘granted’) {
\n return ‘granted’;
\n }<\/p>\n
if (Notification.permission !== ‘denied’) {
\n const permission = await Notification.requestPermission();
\n return permission;
\n }<\/p>\n
return ‘denied’;
\n }<\/p>\n
async subscribeToPush() {
\n try {
\n const registration = await navigator.serviceWorker.ready;<\/p>\n
\/\/ Check existing subscription
\n const existingSubscription = await registration.pushManager.getSubscription();<\/p>\n
if (existingSubscription) {
\n this.subscription = existingSubscription;
\n return existingSubscription;
\n }<\/p>\n
\/\/ Subscribe to push
\n const subscription = await registration.pushManager.subscribe({
\n userVisibleOnly: true,
\n applicationServerKey: this.urlB64ToUint8Array(this.publicKey)
\n });<\/p>\n
this.subscription = subscription;<\/p>\n
\/\/ Send subscription ke server
\n await this.sendSubscriptionToServer(subscription);<\/p>\n
console.log(‘Push subscription successful’);
\n return subscription;<\/p>\n
} catch (error) {
\n console.error(‘Push subscription failed:’, error);
\n }
\n }<\/p>\n
async sendSubscriptionToServer(subscription) {
\n try {
\n await fetch(‘\/api\/subscribe’, {
\n method: ‘POST’,
\n headers: {
\n ‘Content-Type’: ‘application\/json’,
\n },
\n body: JSON.stringify(subscription)
\n });
\n } catch (error) {
\n console.error(‘Failed to send subscription to server:’, error);
\n }
\n }<\/p>\n
setupPushEventListeners() {
\n navigator.serviceWorker.addEventListener(‘message’, (event) => {
\n if (event.data && event.data.type === ‘PUSH_RECEIVED’) {
\n this.handlePushReceived(event.data.payload);
\n }
\n });
\n }<\/p>\n
handlePushReceived(payload) {
\n \/\/ Handle incoming push notification
\n console.log(‘Push received:’, payload);<\/p>\n
\/\/ Update UI, show badge, dll
\n this.updateUIWithNewData(payload);
\n }<\/p>\n
updateUIWithNewData(data) {
\n \/\/ Update application state
\n const event = new CustomEvent(‘pwa-push-received’, { detail: data });
\n window.dispatchEvent(event);
\n }<\/p>\n
\/\/ Utility function
\n urlB64ToUint8Array(base64String) {
\n const padding = ‘=’.repeat((4 – base64String.length % 4) % 4);
\n const base64 = (base64String + padding)
\n .replace(\/\\-\/g, ‘+’)
\n .replace(\/_\/g, ‘\/’);<\/p>\n
const rawData = window.atob(base64);
\n const outputArray = new Uint8Array(rawData.length);<\/p>\n
for (let i = 0; i {
\n const options = {
\n body: event.data ? event.data.text() : ‘New message from PWA’,
\n icon: ‘\/icons\/icon-192×192.png’,
\n badge: ‘\/icons\/badge.png’,
\n vibrate: [100, 50, 100],
\n data: {
\n dateOfArrival: Date.now(),
\n primaryKey: ‘2’
\n },
\n actions: [
\n {
\n action: ‘explore’,
\n title: ‘Explore’,
\n icon: ‘\/icons\/checkmark.png’
\n },
\n {
\n action: ‘close’,
\n title: ‘Close’,
\n icon: ‘\/icons\/xmark.png’
\n }
\n ]
\n };<\/p>\n
event.waitUntil(
\n self.registration.showNotification(‘PWA Notification’, options)
\n );
\n});<\/p>\n
self.addEventListener(‘notificationclick’, (event) => {
\n console.log(‘Notification click received.’);<\/p>\n
event.notification.close();<\/p>\n
if (event.action === ‘explore’) {
\n \/\/ Open app to specific page
\n event.waitUntil(
\n clients.openWindow(‘\/explore’)
\n );
\n } else if (event.action === ‘close’) {
\n \/\/ Just close notification
\n return;
\n } else {
\n \/\/ Open app to homepage
\n event.waitUntil(
\n clients.openWindow(‘\/’)
\n );
\n }
\n});
\n“`<\/p>\n
PWA Installation dan User Experience<\/p>\n
1. Install Prompt Management
\n“`javascript
\n\/\/ PWA Install prompt manager
\nclass PWAInstallManager {
\n constructor() {
\n this.deferredPrompt = null;
\n this.installButton = null;
\n this.setupInstallPrompt();
\n }<\/p>\n
setupInstallPrompt() {
\n window.addEventListener(‘beforeinstallprompt’, (event) => {
\n \/\/ Prevent default install prompt
\n event.preventDefault();<\/p>\n
\/\/ Store event untuk later use
\n this.deferredPrompt = event;<\/p>\n
\/\/ Show install button
\n this.showInstallButton();
\n });<\/p>\n
\/\/ Handle successful install
\n window.addEventListener(‘appinstalled’, (event) => {
\n console.log(‘PWA was installed’);
\n this.hideInstallButton();<\/p>\n
\/\/ Track installation analytics
\n this.trackInstallation();
\n });
\n }<\/p>\n
showInstallButton() {
\n \/\/ Create or show install button
\n if (!this.installButton) {
\n this.installButton = document.createElement(‘button’);
\n this.installButton.innerHTML = `<\/p>\n
Install App
\n `;
\n this.installButton.className = ‘pwa-install-button’;
\n this.installButton.addEventListener(‘click’, () => this.promptInstall());<\/p>\n
document.body.appendChild(this.installButton);
\n }<\/p>\n
\/\/ Animate button appearance
\n setTimeout(() => {
\n this.installButton.classList.add(‘show’);
\n }, 1000);
\n }<\/p>\n
hideInstallButton() {
\n if (this.installButton) {
\n this.installButton.classList.remove(‘show’);
\n setTimeout(() => {
\n if (this.installButton.parentNode) {
\n this.installButton.parentNode.removeChild(this.installButton);
\n }
\n }, 300);
\n }
\n }<\/p>\n
async promptInstall() {
\n if (!this.deferredPrompt) {
\n console.log(‘Install prompt not available’);
\n return;
\n }<\/p>\n
try {
\n \/\/ Show install prompt
\n this.deferredPrompt.prompt();<\/p>\n
\/\/ Wait for user response
\n const { outcome } = await this.deferredPrompt.userChoice;<\/p>\n
console.log(`User ${outcome} the install prompt`);<\/p>\n
\/\/ Clear deferred prompt
\n this.deferredPrompt = null;<\/p>\n
if (outcome === ‘accepted’) {
\n this.hideInstallButton();
\n }<\/p>\n
} catch (error) {
\n console.error(‘Error showing install prompt:’, error);
\n }
\n }<\/p>\n
trackInstallation() {
\n \/\/ Send installation data ke analytics
\n if (typeof gtag !== ‘undefined’) {
\n gtag(‘event’, ‘pwa_installed’, {
\n ‘event_category’: ‘PWA’,
\n ‘event_label’: ‘Install Success’
\n });
\n }
\n }<\/p>\n
\/\/ Check if PWA is already installed
\n isInstalled() {
\n \/\/ For iOS
\n if (‘standalone’ in window.navigator && window.navigator.standalone) {
\n return true;
\n }<\/p>\n
\/\/ For Android
\n if (window.matchMedia(‘(display-mode: standalone)’).matches) {
\n return true;
\n }<\/p>\n
return false;
\n }
\n}<\/p>\n
\/\/ Usage
\nconst installManager = new PWAInstallManager();<\/p>\n
\/\/ CSS untuk install button
\nconst pwaInstallStyles = `
\n .pwa-install-button {
\n position: fixed;
\n bottom: 20px;
\n right: 20px;
\n background: #2563eb;
\n color: white;
\n border: none;
\n padding: 12px 20px;
\n border-radius: 50px;
\n cursor: pointer;
\n display: flex;
\n align-items: center;
\n gap: 8px;
\n font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
\n font-size: 16px;
\n font-weight: 500;
\n box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
\n transform: translateY(100px);
\n opacity: 0;
\n transition: all 0.3s ease;
\n z-index: 1000;
\n }<\/p>\n
.pwa-install-button.show {
\n transform: translateY(0);
\n opacity: 1;
\n }<\/p>\n
.pwa-install-button:hover {
\n background: #1d4ed8;
\n transform: translateY(-2px);
\n box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
\n }<\/p>\n
.pwa-install-button:active {
\n transform: translateY(0);
\n }<\/p>\n
@media (max-width: 768px) {
\n .pwa-install-button {
\n bottom: 16px;
\n right: 16px;
\n padding: 10px 16px;
\n font-size: 14px;
\n }
\n }
\n`;<\/p>\n
\/\/ Inject styles
\nconst styleSheet = document.createElement(‘style’);
\nstyleSheet.textContent = pwaInstallStyles;
\ndocument.head.appendChild(styleSheet);
\n“`<\/p>\n
Offline-First Architecture<\/p>\n
1. Application Shell Pattern
\n“`javascript
\n\/\/ Application Shell Manager
\nclass AppShellManager {
\n constructor() {
\n this.shellCache = ‘shell-v1’;
\n this.contentCache = ‘content-v1’;
\n this.setupShell();
\n }<\/p>\n
setupShell() {
\n \/\/ Define shell components
\n this.shellComponents = [
\n ‘\/’,
\n ‘\/index.html’,
\n ‘\/css\/shell.css’,
\n ‘\/js\/shell.js’,
\n ‘\/js\/navigation.js’,
\n ‘\/images\/logo.svg’,
\n ‘\/manifest.json’
\n ];<\/p>\n
\/\/ Cache shell components
\n this.cacheShell();
\n }<\/p>\n
async cacheShell() {
\n if (‘caches’ in window) {
\n const cache = await caches.open(this.shellCache);
\n await cache.addAll(this.shellComponents);
\n }
\n }<\/p>\n
\/\/ Load shell immediately
\n async loadShell() {
\n try {
\n const cache = await caches.open(this.shellCache);
\n const shellResponse = await cache.match(‘\/js\/shell.js’);<\/p>\n
if (shellResponse) {
\n const shellCode = await shellResponse.text();
\n eval(shellCode); \/\/ Execute shell code
\n return true;
\n }
\n } catch (error) {
\n console.error(‘Failed to load shell:’, error);
\n }<\/p>\n
return false;
\n }<\/p>\n
\/\/ Dynamic content loading
\n async loadContent(url) {
\n try {
\n \/\/ Try network first
\n const response = await fetch(url);<\/p>\n
if (response.ok) {
\n const content = await response.text();<\/p>\n
\/\/ Cache content for offline
\n const cache = await caches.open(this.contentCache);
\n await cache.put(url, new Response(content));<\/p>\n
return content;
\n }
\n } catch (error) {
\n \/\/ Fallback to cache
\n const cache = await caches.open(this.contentCache);
\n const cachedResponse = await cache.match(url);<\/p>\n
if (cachedResponse) {
\n return cachedResponse.text();
\n }
\n }<\/p>\n
return null;
\n }
\n}<\/p>\n
\/\/ Shell implementation
\nconst appShell = `<\/p>\n