BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Build an Icon
    • Contributing Guidelines
    • Developing components
    • Favicons
    • Form Design
    • How to give feedback
    • How to write UX copy
    • Install UI-Kit
    • Migration
    • PWA 📱
    • Replaceable Components
    • Start Designing
    • Support RTL
    • Themes
    • Write documentation
How Tos

Progressive Web Apps

Naming convention & linting

Progressive web apps are web apps that are fast, reliable, and engaging.

They are installable and live on the user’s home screen, without the need for an app store. They offer an experience that is as close as possible to a native app and fully support offline usage. They are built and delivered using web technologies like HTML, CSS and JavaScript. This way you can use the react.js UI-Kit to build your PWA.

Capacitor

Using Capacitor, you can build Progressive Web Apps that run natively on iOS, Android, and the web. It allows to use the same codebase for web and native apps, and it’s a great way to build cheaper cross-platform apps.

Safe-areas

The safe-area-inset-\* CSS properties are used to define the padding required to keep content from being obscured by display cutouts or rounded corners on a mobile device. This is a great way to make sure your app is not cut off by the notch on the iPhone or Android devices with a notch.

Components

All components support mobile devices. For the main UI there are <BottomNavigation />, <SidebarNavigation /> available. They are responsive and can be used on mobile and desktop devices.

TODO: Add components

Reference

  • Progressive Web Apps

On this page

  • Capacitor
  • Safe-areas
  • Components
  • Reference
Storybook
Figma library
Contact us
2025 © World Food Programme