Configuration Guide

This guide covers all available configuration options for the Filament PWA plugin.

Basic Configuration

Plugin Registration

You can configure the plugin directly when registering it:

use Alareqi\FilamentPwa\FilamentPwaPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(
            FilamentPwaPlugin::make()
                ->appName('My Admin Panel')
                ->shortName('Admin')
                ->description('Powerful admin panel for my application')
                ->themeColor('#3B82F6')
                ->backgroundColor('#ffffff')
                ->startUrl('/admin')
                ->displayMode('standalone')
                ->orientation('portrait-primary')
                ->scope('/admin')
                ->language('en')
                ->direction('ltr')
                ->installationPrompts(true)
        );
}

Configuration File

Alternatively, configure everything in config/filament-pwa.php:

return [
    // App Information
    'app_name' => env('PWA_APP_NAME', config('app.name', 'Laravel') . ' Admin'),
    'short_name' => env('PWA_SHORT_NAME', 'Admin'),
    'description' => env('PWA_DESCRIPTION', 'Admin panel for ' . config('app.name', 'Laravel')),

    // Display Settings
    'start_url' => env('PWA_START_URL', '/admin'),
    'display' => env('PWA_DISPLAY', 'standalone'),
    'orientation' => env('PWA_ORIENTATION', 'portrait-primary'),
    'scope' => env('PWA_SCOPE', '/admin'),

    // Theme Configuration
    'theme_color' => env('PWA_THEME_COLOR', '#A77B56'),
    'background_color' => env('PWA_BACKGROUND_COLOR', '#ffffff'),

    // Localization
    'lang' => env('PWA_LANG', 'en'),
    'dir' => env('PWA_DIR', 'ltr'),

    // ... more options
];

Configuration Options

App Information

Display Settings

Theme Configuration

Localization

Installation Prompts

'installation_prompts' => [
    'enabled' => true,
    'delay' => 2000, // milliseconds
    'ios_instructions_delay' => 5000, // milliseconds
],

Icon Configuration

'icons' => [
    'source_path' => 'icon.svg',
    'output_path' => 'images/icons',
    'sizes' => [72, 96, 128, 144, 152, 192, 384, 512],
    'maskable_sizes' => [192, 512],
    'additional_sizes' => [16, 32, 70, 150, 310],
],

Service Worker Configuration

'service_worker' => [
    'cache_name' => 'filament-admin-v1.0.0',
    'offline_url' => '/offline',
    'cache_urls' => [
        '/admin',
        '/admin/login',
        '/manifest.json',
    ],
    'cache_patterns' => [
        'filament_assets' => '/\/css\/filament\/|\/js\/filament\//',
        'images' => '/\.(png|jpg|jpeg|svg|gif|webp|ico)$/',
        'fonts' => '/\.(woff|woff2|ttf|eot)$/',
    ],
],

Shortcuts

Define app shortcuts that appear in the PWA menu:

'shortcuts' => [
    [
        'name' => 'Dashboard',
        'short_name' => 'Dashboard',
        'description' => 'Go to the main dashboard',
        'url' => '/admin',
        'icons' => [
            [
                'src' => '/images/icons/icon-96x96.png',
                'sizes' => '96x96',
            ],
        ],
    ],
    [
        'name' => 'Users',
        'short_name' => 'Users',
        'description' => 'Manage users',
        'url' => '/admin/users',
        'icons' => [
            [
                'src' => '/images/icons/icon-96x96.png',
                'sizes' => '96x96',
            ],
        ],
    ],
],

Screenshots

Add screenshots for enhanced installation prompts:

'screenshots' => [
    [
        'src' => '/images/screenshots/desktop.png',
        'sizes' => '1280x720',
        'type' => 'image/png',
        'form_factor' => 'wide',
    ],
    [
        'src' => '/images/screenshots/mobile.png',
        'sizes' => '375x667',
        'type' => 'image/png',
        'form_factor' => 'narrow',
    ],
],

Environment Variables

All configuration options can be overridden using environment variables:

# App Information
PWA_APP_NAME="My Custom Admin"
PWA_SHORT_NAME="MyAdmin"
PWA_DESCRIPTION="Custom admin panel description"

# Display
PWA_START_URL="/admin"
PWA_DISPLAY="standalone"
PWA_ORIENTATION="portrait-primary"
PWA_SCOPE="/admin"

# Theme
PWA_THEME_COLOR="#3B82F6"
PWA_BACKGROUND_COLOR="#ffffff"

# Localization
PWA_LANG="en"
PWA_DIR="ltr"

# Installation
PWA_INSTALLATION_PROMPTS=true
PWA_INSTALLATION_DELAY=2000
PWA_IOS_INSTRUCTIONS_DELAY=5000

# Service Worker
PWA_CACHE_NAME="my-admin-v1.0.0"
PWA_OFFLINE_URL="/offline"

# Icons
PWA_ICON_SOURCE="logo.svg"

Advanced Configuration

Custom Categories

'categories' => [
    'productivity',
    'business',
    'utilities',
    'education',
],

Related Applications

'prefer_related_applications' => false,
'related_applications' => [
    [
        'platform' => 'play',
        'url' => 'https://play.google.com/store/apps/details?id=com.example.app',
        'id' => 'com.example.app',
    ],
],

Route Middleware

Customize middleware for PWA routes:

'route_middleware' => ['web', 'auth'],

RTL Support

For right-to-left languages:

'lang' => 'ar',
'dir' => 'rtl',

The plugin automatically adjusts layouts and styles for RTL languages.

Next Steps

• Icon Generation - Learn about icon requirements
• Customization - Customize views and behavior
• Troubleshooting - Common issues and solutions