Material Next
Home Install Components Marketing hub API Roadmap Changelog

Components

App showcase

Cards for a developer's Android apps, loaded from a JSON endpoint, each with a Google Play link.

Experimental<mnw-app-showcase>

import 'material-next-web-components/app-showcase.js';
On this page

Overview

<mnw-app-showcase> fetches a list of apps and shows them as outlined Material cards: icon, name, category, a short description and a Google Play button, with a "View all apps" link to the developer page. Use it on a website or an app's About page to promote a developer's other apps.

It is not a store listing or a review widget: it shows what the endpoint returns, without ratings or prices.

Live demo

The demo loads the public apps API. Names, icons, descriptions and categories come from the backend.

Show 1 Show 2
Apps from the metadata backend. The buttons change limit without fetching again.
<mnw-app-showcase
  apps-endpoint="https://android-apps-metadata-backend.mihaicristiancondrea.workers.dev/api/v1/apps"
  store-href="https://play.google.com/store/apps/dev?id=5390214922640123642"
  headline="More apps from the developer"
  limit="2"
></mnw-app-showcase>
<div class="demo-controls" role="group" aria-label="Number of apps">
  <md-outlined-button data-limit="1">Show 1</md-outlined-button>
  <md-outlined-button data-limit="2">Show 2</md-outlined-button>
</div>
import '@material/web/button/outlined-button.js';
import 'material-next-web-components/app-showcase.js';
import type {MaterialNextAppShowcase} from 'material-next-web-components/app-showcase.js';

export default (root: HTMLElement) => {
  const showcase =
    root.querySelector<MaterialNextAppShowcase>('mnw-app-showcase')!;
  for (const button of root.querySelectorAll<HTMLElement>('[data-limit]')) {
    // Changing limit re-slices the loaded apps; it does not fetch again.
    button.addEventListener('click', () => {
      showcase.limit = Number(button.dataset.limit);
    });
  }
};

Data

apps-endpoint must return JSON as an array of apps, or an object with the apps in data, apps, data.apps, promotedApps or androidApps (checked in that order). For each app the element reads the first field present:

Shown as Fields read, in order When missing
Name appName, name, title The app is skipped
Package package_name, packageName, package The app is skipped
Category category, appCategory: a string, or {label} "Android app"
Description short_description, shortDescription, description, summary: the first non-empty line A generic sentence
Icon icon_logo, iconUrl, iconLogo, icon, image A placeholder icon
Play link storeUrl, googlePlayUrl, url Built from the package name 
{
  "data": {
    "apps": [
      {
        "name": "Smart Cleaner",
        "package_name": "com.d4rk.cleaner",
        "category": {"label": "Tools", "category_id": "tools"},
        "short_description": "See what fills your phone's storage and clear what you don't need.",
        "icon_logo": "https://example.com/icons/app.png"
      }
    ]
  }
}

Without apps-endpoint, the element loads the public apps list from android-apps-metadata-backend.mihaicristiancondrea.workers.dev/api/v1/apps, and the default headline names the author. Set both for anything else.

API

A Material app showcase that fetches and renders promoted Android apps.

<mnw-app-showcase> properties
PropertyAttributeTypeDefaultDescription
appsEndpointapps-endpointstring'https://android-apps-metadata-backend.mihaicristiancondrea.workers.dev/api/v1/apps'API endpoint returning Android app metadata.
storeHrefstore-hrefstring'https://play.google.com/store/apps/dev?id=5390214922640123642'Link used by the section-level “View all apps” action.
headlineheadlinestring'More apps from Mihai-Cristian'Section heading.
limitlimitnumber6Maximum number of apps to render.

States and behaviour

  • Loading: a circular progress indicator with "Loading apps…".
  • Error: "Could not load app recommendations. Please try again later." The error is also logged to the console.
  • Responses are cached per endpoint for the page's lifetime, and elements with the same endpoint share one request.
  • Changing apps-endpoint fetches again; changing limit only shows more or fewer of the loaded apps.

Accessibility

  • The section is labelled by its heading. Each Play button has an accessible name such as "Open Smart Cleaner on Google Play"; links open in a new tab.
  • App icons are decorative (alt=""): the name is always next to them.

Limitations

  • The endpoint must allow cross-origin requests (CORS) from your site.
  • Icon and store URLs are used as given: relative URLs resolve against the page, not against the JSON file.
  • The element fires no events; it has no selection.
 mail