Content Indexing API Test - Online Add to Device's Media Feed
Test the Content Indexing API to add a page to the device's content feed. See how your PWA integrates with the OS.
UD5 Toolkit
See how your content appears in the system launcher
// Inside service worker 'activate' or after page load
const registration = await navigator.serviceWorker.ready;
if ('index' in registration) {
await registration.index.add({
id: 'article-1',
title: 'My Article',
description: 'Short desc',
url: '/article-1',
category: 'article',
icons: [{ src: '/icon.png', sizes: '96x96' }]
});
}
Requires HTTPS, installed PWA, and supported browser.
No content indexed yet. Add your first item!
'index' in registration before using.ServiceWorkerRegistration.index. You must register a service worker and the page must be served over HTTPS.registration.index.delete(id) to remove a specific entry, or clear all with a loop. This demo simulates deletion locally; in a real app you must call the API.Test the Content Indexing API to add a page to the device's content feed. See how your PWA integrates with the OS.
See the View Transitions API in action. Cross‑fade and morph between two states. Copy the JavaScript starter code.
Check if the current page can be loaded offline by examining the service worker cache. Developer tool for PWAs.
Request permission and detect when the user is idle (away from keyboard). See screen lock state. For native‑like apps.
Watch for updates to aria‑live regions and log what a screen reader would announce. Debug live regions.
Test the Fullscreen API: request fullscreen on a colored div, detect changes, and copy the JavaScript boilerplate.
Simulate a PWA receiving shared text, links, and images. Test the Web Share Target API without a server.
Test the Web Share API by sharing text, links, and files directly from the browser. Check compatibility and see example code.
Enter a URL and extract meta title, description, OG tags into a readable format. Works via frontend proxy or user pastes HTML. Local.
Fetch and extract all meta tags, open graph tags, and Twitter cards from a live URL. No server proxy, direct browser fetch.
Enter a URL and see a simulated preview of how the link will appear on major social platforms. Check tags.
Toggle content‑visibility: auto on long blocks and see the rendering time difference. Understand this powerful property.
Enter a URL and see live mocked previews for Facebook, Twitter, LinkedIn, and Slack based on its meta tags. Find missing tags.
Send a test CSP violation report and see the ReportingObserver in action. Understand how monitoring works.
Paste HTML or Markdown to count total words, unique words, heading distribution, and reading time. Content audit helper.
Fetch a page and list all loaded assets (CSS, JS, images) with their sizes. See total page weight. Quick performance check.
See exact dimensions of your current browser inner/outer window, screen resolution, and pixel ratio. Developer debug.
Drop a PNG file and see all its chunks (IHDR, tEXt, etc.). Extract hidden text and color profiles. Pure JavaScript reader.
Paste XML sitemap content and extract all <loc> URLs into a clean list. Useful for auditing. Local parsing only.
Create a Remix route file with loader, action, and default export. TypeScript ready. Copy the route.tsx.
Inject dynamic messages into ARIA live regions and monitor how they trigger screen reader announcements. Debug a11y.
Type directly into a contenteditable div with real‑time CSS filters, shadows, and colors. Download as HTML. Fun demo.
Paste the content of an XML sitemap and extract a plain list of all the URLs. For further analysis. Local.
Enter a list of words and create a custom word search grid. Choose difficulty, print or export as PDF. Great for teachers.
Check if the browser has captured the beforeinstallprompt event. Understand why your PWA is (or isn't) installable.
Paste any article and get a list of the most relevant keywords using a simple TF‑IDF‑like model. Skip stop words. All local.
Enter a URL and get a rough client-side performance simulation: request count, DOM size, and potential speed tips. No real Lighthouse.
Analyze text for keyword frequency and density. Highlights over-optimized terms. Perfect for content writers and SEO editors. Entirely browser-based.
Paste multiple HTML snippets (header, footer) and a main content, then combine them into a single preview. Static site helper.
Adjust ISO, f‑stop, shutter speed and see a simulated image brightness and depth of field effect. Learn manual mode.