Mobile Apps (PWA) Support

ColibriPlus provides two tailored web applications: one optimized for mobile devices and another for desktop environments. Each offers a unique UI/UX designed to enhance the user experience on its respective platform. Both applications are included with ColibriPlus by default, requiring no additional setup or configuration.

Overview of PWA

ColibriPlus is a web-based application that leverages Progressive Web App (PWA) technology to deliver a native app-like experience. With PWA support, you can install ColibriPlus on your mobile device, enabling offline access, push notifications, and a seamless user experience without the need for a native app.

PWA support is included out of the box and can be enabled with minimal configuration.

Enabling PWA

To enable PWA functionality, configure the following variable in your .env file:

# Enable or disable PWA support (true to enable, false to disable)
PWA_ENABLED=true

Ensure this variable is set to true to activate PWA features.

Configuring

To customize the PWA, modify the public/pwa/manifest.json file. This file defines the app’s metadata, appearance, and behavior when installed as a PWA.

Here’s an example manifest.json configuration:

{
  "id": "colibri-app",
  "name": "ColibriPlus",
  "short_name": "Colibri",
  "description": "ColibriPlus: A social platform for sharing thoughts, news, and ideas.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1a73e8",
  "scope": "/",
  "dir": "auto",
  "orientation": "portrait",
  "prefer_related_applications": false,
  "related_applications": [],
  "categories": ["social", "news", "social-network"],
  "icons": [
    {
      "src": "/pwa/icons/192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/pwa/icons/512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Customization

• Name and Short Name: Update name and short_name to reflect your brand.
• Description: Provide a clear, concise description of your app’s purpose.
• Icons: Ensure the icon files (/pwa/icons/192x192.png and /pwa/icons/512x512.png) exist in the public/pwa/icons/ directory. Use high-quality images optimized for the specified sizes.
• Theme Color: Adjust theme_color to match your brand’s color scheme.
• Purpose: The purpose field for icons specifies usage (any for general display, maskable for adaptive icons on supported platforms).

After updating the manifest, clear the cache and rebuild the frontend with the following commands:

php colibri cache:clear
php colibri optimize:clear
php colibri optimize

Installation

Once configured, ColibriPlus can be installed as a PWA on both Android and iOS devices, offering a native-like experience.

Android

Android devices support PWAs natively through Chrome. To install the PWA:

1. Open the Chrome browser on your Android device.
2. Navigate to the ColibriPlus website.
3. Tap the three-dot menu in the top-right corner.
4. Select Add to Home screen or Install app (label may vary).
5. Confirm by tapping Install.
6. The PWA will appear on your home screen and function like a native app.

iOS

iOS 18+ supports PWAs through Safari. To install the PWA:

1. Open the Safari browser on your iOS device.
2. Navigate to the ColibriPlus website.
3. Tap the Share button (square with an upward arrow).
4. Select Add to Home Screen.
5. Customize the app name if desired, then tap Add.
6. The PWA will be added to your home screen.

Troubleshooting

• PWA Not Installing: Ensure PWA_ENABLED=true in the .env file and that the manifest.json file is correctly configured and accessible.
• Icons Not Displaying: Verify that the icon paths in manifest.json are correct and the files exist in the specified directory.
• Cache Issues: Run the cache-clearing commands listed above to ensure the latest configuration is applied.

For further assistance, consult the official PWA documentation or contact the ColibriPlus support team.