PWA API Essentials: What can PWA-LIA do in 2025

Progressive Web Apps (PWAs) have evolved into one of the most powerful platforms in modern web development. With enhanced access to native device features, PWAs are now able to deliver near-native experiences straight from the browser — without requiring an app store download.

As browsers continue to support a growing list of APIs, developers can now build fast, reliable, and engaging web apps that can rival traditional mobile apps. Below is a breakdown of essential PWA APIs that every modern app should consider integrating:

Built-in APIs with Liteit.app

Liteit.app provides a suite of ready-to-use APIs that extend the power of your PWA without writing complex backend code. These APIs are designed to help you control app behavior, handle installation events, detect device context, and more.

• install() – Triggers the PWA installation prompt.
• onInstall() – Callback for when the app is successfully installed.
• openApp() – Programmatically opens the PWA if installed.
• getLocation() – Fetches the user’s geolocation in a privacy-compliant way.
• isInstalled() – Checks whether the app is currently installed.
• isInApp() – Detects if the app is running in standalone PWA mode.
• pushBanner() – Displays a banner to encourage enabling notifications.
• isPushGranted() – Checks if push notification permissions are granted.
• browserIs() – Returns the name of the user’s browser.
• osIs() – Detects the operating system (iOS, Android, Windows, etc.).
• isPrivate() – Detects if the user is in incognito/private mode.
• player() – Controls embedded media playback.
• share() – Triggers the device-native share menu.
• isMob() – Detects if the device is mobile.
• isPwable() – Determines if the current environment supports PWA installation.
• isOnline() – Checks if the user is currently connected to the internet.

Available Web APIs for PWAs

1. Cookies API:
   Manage session data and user preferences for a seamless experience across visits.
2. Installation API:
   Allow users to install your app to their device like a native app.
3. Offline Support:
   Enable full or partial access to your app even without internet using Service Workers.
4. Notifications API:
   Send timely push notifications to engage users and improve retention.
5. Declarative Web Push:
   Simplify push notification setup using manifest declarations.
6. Shortcuts API:
   Add app-specific shortcuts to home screen context menus.
7. View Transitions API:
   Smooth transitions between UI states or pages.
8. Geolocation API:
   Access the user’s location for local search, maps, or location-aware features.
9. Media Capture API:
   Record audio, video, or images using the device’s hardware.
10. Picture-in-Picture API:
    Play videos in a floating window while users navigate other content.
11. Camera API:
    Capture photos or stream video directly in the browser.
12. Microphone API:
    Enable voice input or real-time audio features through the browser.
13. Audio Recording API:
    Record and manage sound from the user’s microphone.
14. Audio API:
    Process and analyze audio streams for playback, effects, or streaming.
15. Audio Session API:
    Manage audio focus and playback sessions across tabs or apps.
16. Clipboard API:
    Read from or write to the clipboard for copy-paste features.
17. Screen Capture API:
    Capture screen or window content for collaboration or streaming.
18. Element Capture API:
    Capture visual output from specific DOM elements.
19. Bluetooth API:
    Connect to nearby Bluetooth-enabled devices like smartwatches and sensors.
20. NFC API:
    Read/write data via near-field communication for contactless interactions.
21. AR/VR (WebXR):
    Build immersive augmented or virtual reality experiences in the browser.
22. Storage Access API:
    Store structured or large data using localStorage, IndexedDB, or File System.
23. File System API:
    Access and manipulate files directly from the user’s device with permission.
24. File Handling API:
    Allow your app to open and edit specific file types from the OS or drag-drop.
25. Contact Picker API:
    Let users select contacts securely from their address book.
26. Web Share API:
    Trigger the native share sheet for links, files, or text content.
27. Barcode Detection API:
    Scan barcodes using the camera for logistics, shopping, or access control.
28. Face Detection API:
    Detect facial landmarks for camera effects, filters, or AR experiences.
29. Vibration API:
    Provide tactile feedback through device vibration.
30. Authentication API:
    Use device credentials (biometrics or PIN) to authenticate users securely.
31. Protocol Handling API:
    Let your PWA handle specific link types or custom URL schemes.
32. Background Sync API:
    Retry failed requests or updates once connectivity is restored.
33. Background Fetch API:
    Download large files even when the app isn’t actively open.
34. Payment Request API:
    Provide a native-feeling checkout experience directly in the browser.
35. Wake Lock API:
    Prevent the screen from sleeping during critical tasks (e.g., presentations).
36. Device Orientation API:
    Detect orientation for immersive layouts or motion controls.
37. Device Motion API:
    Access accelerometer and gyroscope data for movement-based interactions.
38. Network Information API:
    Detect connection type (Wi-Fi, 4G, offline) and adjust app behavior.
39. Speech Synthesis API:
    Convert text to voice to improve accessibility or narration features.
40. Speech Recognition API:
    Turn spoken input into text for search, commands, or dictation.
41. Multi-Touch Support:
    Handle complex touch gestures like pinch, swipe, and rotate.

All of these features are documented at https://liteit.app/js-api.html, making it easy to bring PWA functionality to your app in minutes.

🔔 Push Notifications Across Devices & OS

Push notifications are a core feature of modern Progressive Web Apps, enabling real-time communication and user engagement — even when the app isn't actively open. With support across major platforms like Android, Windows, Chrome, and Edge, PWAs can deliver notifications that behave just like native app alerts.

While iOS now offers limited PWA notification support (iOS 16.4+), full functionality is available on most other devices, making push a powerful tool for cross-platform engagement.

To see how PWA push notifications work in real-time across different devices and browsers, visit our live demo page:

https://liteit.app/push-notifications.html?demos

Conclusion

PWA APIs open up a world of possibilities for web developers. With access to device hardware, native UI prompts, and smart app behaviors, the line between websites and apps is rapidly fading. Tools like Liteit.app simplify the process by offering pre-built integrations and API wrappers — so you can focus on delivering value and user experience.

JavaScript Examples for PWA APIs

📁 Cookies API

document.cookie = "username=John; path=/; max-age=3600";
console.log(document.cookie);

Stores and retrieves simple user preferences.

📍 Geolocation API

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude, position.coords.longitude);
});

Fetches the user’s location (with permission).

🔔 Notifications API

Notification.requestPermission().then(permission => {
  if (permission === "granted") {
    new Notification("Hello!", { body: "This is a web notification." });
  }
});

Triggers browser notifications after user permission.

🖼️ Media Files (File Upload & Preview)

<input type="file" accept="image/*" onchange="previewFile(this)">
<img id="preview">

function previewFile(input) {
  const file = input.files[0];
  const reader = new FileReader();
  reader.onload = e => document.getElementById("preview").src = e.target.result;
  reader.readAsDataURL(file);
}

Allows image upload and preview before submission.

📷 Camera API

<video autoplay playsinline></video>

navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
  document.querySelector("video").srcObject = stream;
});

Streams live video from the device camera.

🎙️ Microphone API

navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
  console.log("Microphone access granted");
});

Enables microphone access for voice recording or chat.

📋 Clipboard API

navigator.clipboard.writeText("Copied from PWA!");
navigator.clipboard.readText().then(text => {
  console.log("Clipboard contains:", text);
});

Reads and writes to the user's clipboard.

📺 Screen Capture API

<video autoplay></video>

navigator.mediaDevices.getDisplayMedia().then(stream => {
  document.querySelector("video").srcObject = stream;
});

Captures and displays the user’s screen.

🔗 Bluetooth API

navigator.bluetooth.requestDevice({ acceptAllDevices: true }).then(device => {
  console.log("Connected to:", device.name);
});

Scans for and connects to nearby Bluetooth devices.

💾 Storage Access API

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));

Stores simple key-value data in the browser.

💳 Payments API

const payment = new PaymentRequest([{
  supportedMethods: "basic-card"
}], {
  total: { label: "Total", amount: { currency: "USD", value: "9.99" } }
});

payment.show();

Triggers a secure, native-style payment prompt.

📡 Sensors API (Device Orientation)

window.addEventListener("deviceorientation", event => {
  console.log("Alpha:", event.alpha, "Beta:", event.beta, "Gamma:", event.gamma);
});

Accesses motion/orientation sensor data from the device.

📳 Vibration API

navigator.vibrate([200, 100, 200]);

Triggers vibration patterns on supported mobile devices.

📥 Installation API

 window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); e.prompt(); }); 

Triggers the PWA installation prompt manually.

📡 Offline Support (Service Worker)

 self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request).then(response => response || fetch(event.request)) ); }); 

Serves cached responses when the device is offline.

📬 Declarative Web Push (Manifest)

 // Add to manifest.json: { "gcm_sender_id": "103953800507" } 

Registers your app for push notifications with Firebase automatically.

🧭 Shortcuts API

 // Add to manifest.json: "shortcuts": [ { "name": "Open Chat", "url": "/chat", "icons": [{ "src": "/icons/chat.png", "sizes": "192x192" }] } ] 

Adds long-press quick actions on home screen app icons.

🔁 View Transitions API

 document.startViewTransition(() => { document.body.innerHTML = "
New Page
"; }); 

Enables smooth transitions between visual states.

📸 Media Capture API

 navigator.mediaDevices.getUserMedia({ video: true, audio: true }) .then(stream => console.log("Stream started", stream)); 

Accesses the user's camera and microphone.

🖼️ Picture-in-Picture

 const video = document.querySelector('video'); video.requestPictureInPicture(); 

Plays video in a floating window above all apps.

📁 File System Access API

 const fileHandle = await window.showSaveFilePicker(); const writable = await fileHandle.createWritable(); await writable.write("Hello, LIA!"); await writable.close(); 

Allows direct saving of files from the browser to the user's device.

🔐 Authentication API (WebAuthn)

 navigator.credentials.get({ publicKey: { challenge: new Uint8Array([/* challenge here */]), allowCredentials: [], timeout: 60000, userVerification: "preferred" } }); 

Initiates biometric or secure device login authentication.

📦 Protocol Handling API

 navigator.registerProtocolHandler( "web+myapp", "https://example.com/?url=%s", "My Custom Handler" ); 

Registers your app to handle custom URL schemes.

📂 File Handling API

 // manifest.json "file_handlers": [{ "action": "/open-file", "accept": { "application/json": [".json"] } }] 

Lets your PWA open files directly via drag & drop or OS "Open With."

📇 Contact Picker API

 const contacts = await navigator.contacts.select(['name', 'email'], { multiple: false }); console.log(contacts); 

Allows the user to pick contacts from their device securely.

📤 Web Share API

 navigator.share({ title: "Check this out!", text: "Amazing PWA tool from Liteit", url: "https://liteit.app" }); 

Triggers the native sharing dialog from the browser.

🔍 Barcode Detection API

 const barcodeDetector = new BarcodeDetector({ formats: ['qr_code'] }); const barcodes = await barcodeDetector.detect(document.querySelector('img')); console.log(barcodes); 

Scans barcodes or QR codes from images or video.

😊 Face Detection API

 const faceDetector = new FaceDetector(); const faces = await faceDetector.detect(document.querySelector('img')); console.log(faces); 

Detects faces in images using the browser.

🎙️ Audio Recording API

 navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => { const recorder = new MediaRecorder(stream); recorder.start(); }); 

Records audio from the user's microphone.

🔊 Audio API (Web Audio)

 const ctx = new AudioContext(); const oscillator = ctx.createOscillator(); oscillator.type = "sine"; oscillator.frequency.setValueAtTime(440, ctx.currentTime); oscillator.connect(ctx.destination); oscillator.start(); 

Generates or processes sound using the Web Audio API.

🎧 Audio Session API

 navigator.mediaSession.metadata = new MediaMetadata({ title: "Now Playing", artist: "Liteit FM" }); 

Integrates with the device’s audio controls and notifications.

🖥️ Screen Capturing API

 navigator.mediaDevices.getDisplayMedia().then(stream => { document.querySelector("video").srcObject = stream; }); 

Lets users share or record their screen content.

🎯 Element Capture API

 const videoTrack = document.querySelector("#element").captureStream().getVideoTracks()[0]; 

Captures the visual output of a specific DOM element.

📶 Background Sync API

 navigator.serviceWorker.ready.then(sw => { sw.sync.register("sync-tag"); }); 

Ensures actions like form submissions are retried when back online.

⬇️ Background Fetch API

 registration.backgroundFetch.fetch("big-download", ["/large-file.zip"], { title: "Downloading...", }); 

Fetches large files in the background even after leaving the page.

💾 Storage API

 navigator.storage.estimate().then(result => { console.log(`Used: ${result.usage}, Quota: ${result.quota}`); }); 

Estimates available and used local storage space.

📡 NFC API

 const reader = new NDEFReader(); await reader.scan(); reader.onreading = event => console.log(event.message); 

Reads data from NFC tags using compatible devices.

🕶️ AR/VR (WebXR)

 if (navigator.xr) { navigator.xr.requestSession("immersive-vr").then(session => { console.log("WebXR session started", session); }); } 

Launches virtual or augmented reality sessions in supported browsers.

🔋 Wake Lock API

 const lock = await navigator.wakeLock.request("screen"); 

Prevents the device screen from dimming or locking.

📱 Device Orientation API

 window.addEventListener("deviceorientation", event => { console.log(event.alpha, event.beta, event.gamma); }); 

Detects how the device is rotated or tilted.

📈 Device Motion API

 window.addEventListener("devicemotion", event => { console.log(event.accelerationIncludingGravity); }); 

Reads movement data from the device’s accelerometer.

🌐 Network Information API

 console.log(navigator.connection.effectiveType); 

Determines the current network type (e.g., 4g, wifi).

🗣️ Speech Synthesis API

 const msg = new SpeechSynthesisUtterance("Hello from Liteit"); speechSynthesis.speak(msg); 

Converts text into spoken voice using built-in speech engines.

🗣️ Speech Recognition API

 const recognition = new webkitSpeechRecognition(); recognition.onresult = event => console.log(event.results[0][0].transcript); recognition.start(); 

Captures voice input and converts it to text.

🤏 Multi-touch (Pointer Events)

 element.addEventListener("pointerdown", e => { console.log("Pointer:", e.pointerId, "Type:", e.pointerType); }); 

Detects touch gestures and pointer events from fingers or styluses.