PHP code example of alareqi / filament-pwa

1. Go to this page and download the library: Download alareqi/filament-pwa library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

alareqi / filament-pwa example snippets


use Alareqi\FilamentPwa\FilamentPwaPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentPwaPlugin::make()
                ->name('My Admin Panel')
                ->shortName('Admin')
                ->description('Powerful admin panel for managing your application')
                ->themeColor('#3B82F6')
                ->backgroundColor('#ffffff')
                ->standalone()
                ->language('en')
                ->ltr()
                ->enableInstallation(2000) // Show prompt after 2 seconds
                ->addShortcut('Dashboard', '/admin', 'Main dashboard')
                ->addShortcut('Users', '/admin/users', 'Manage users')
                ->icons('images/icons', [72, 96, 128, 144, 152, 192, 384, 512])
                ->serviceWorker('my-app-v1.0.0', '/offline'),
        ]);
}

use Alareqi\FilamentPwa\FilamentPwaPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentPwaPlugin::make(),
        ]);
}

return [
    'name' => 'My Admin Panel',
    'short_name' => 'Admin',
    'description' => 'Powerful admin panel for managing your application',
    'theme_color' => '#3B82F6',
    'background_color' => '#ffffff',
    'display' => 'standalone',
    'installation' => [
        'enabled' => true,
        'prompt_delay' => 2000,
        'ios_instructions_delay' => 5000,
        'show_banner_in_debug' => true,
    ],
    'shortcuts' => [
        [
            'name' => 'Dashboard',
            'url' => '/admin',
            'description' => 'Main dashboard',
        ],
    ],
];

FilamentPwaPlugin::make()
    ->name(fn() => auth()->user()?->company_name ?? 'Admin Panel')
    ->themeColor(fn() => auth()->user()?->theme_color ?? '#3B82F6')
    ->language(fn() => auth()->user()?->language ?? app()->getLocale())
    ->direction(fn() => auth()->user()?->text_direction ?? 'ltr')
    ->addShortcut(fn() => [
        'name' => 'My Dashboard',
        'url' => '/admin/dashboard/' . auth()->id(),
        'description' => 'Personal dashboard',
    ])

'installation' => [
    'enabled' => true,                    // Enable installation prompts
    'prompt_delay' => 2000,              // Delay before showing prompt (ms)
    'ios_instructions_delay' => 5000,    // Delay for iOS instructions (ms)
    'show_banner_in_debug' => true,      // Always show banner in debug mode
],

'icons' => [
    'path' => 'images/icons',            // Output directory for icons
    'sizes' => [72, 96, 128, 144, 152, 192, 384, 512], // Icon sizes to generate
    'maskable_sizes' => [192, 512],      // Maskable icon sizes
],

'service_worker' => [
    'cache_name' => 'filament-admin-v1.0.0',  // Cache name for versioning
    'offline_url' => '/offline',               // Offline fallback page
    'cache_urls' => [                          // URLs to cache immediately
        '/admin',
        '/admin/login',
        '/manifest.json',
    ],
    'cache_patterns' => [                      // Regex patterns for caching
        'filament_assets' => '/\/css\/filament\/|\/js\/filament\//',
        'images' => '/\.(png|jpg|jpeg|svg|gif|webp|ico)$/',
        'fonts' => '/\.(woff|woff2|ttf|eot)$/',
    ],
],

// The plugin will automatically use Laravel's app locale
// and detect RTL languages (Arabic, Hebrew, Persian, etc.)
FilamentPwaPlugin::make()
    // Language and direction are auto-detected

FilamentPwaPlugin::make()
    ->language('ar')  // Set specific language
    ->rtl()          // Set RTL direction

    // Or use LTR
    ->language('en')
    ->ltr()

FilamentPwaPlugin::make()
    ->language(fn() => auth()->user()?->language ?? app()->getLocale())
    ->direction(fn() => auth()->user()?->text_direction ?? 'ltr')

// Automatic RTL detection for Arabic
app()->setLocale('ar');

FilamentPwaPlugin::make()
    // Automatically detects Arabic and sets RTL direction

   // resources/lang/ar/pwa.php
   return [
       'install_title' => 'تثبيت التطبيق',
       'install_description' => 'احصل على تجربة أفضل مع التطبيق المثبت',
       // ... more translations
   ];
   

// Installation prompts
'install_title', 'install_description', 'install_button', 'dismiss_button'

// iOS installation
'ios_install_title', 'ios_install_description', 'ios_step_1', 'ios_step_2', 'ios_step_3', 'got_it'

// Updates
'update_available', 'update_description', 'update_now', 'update_later'

// Offline functionality
'offline_title', 'offline_subtitle', 'offline_status', 'online_status'

// Features and actions
'available_features', 'retry_connection', 'go_home'

// Validation messages
'validation.manifest_missing', 'validation.service_worker_missing'

// Setup command messages
'setup.starting', 'setup.completed', 'setup.validation_passed'

// Configure maskable icon sizes
'icons' => [
    'maskable_sizes' => [192, 512],  // Sizes for maskable icons
],

// In your panel provider
FilamentPwaPlugin::make()
    ->icons(
        path: 'images/icons',                    // Output directory
        sizes: [72, 96, 128, 144, 152, 192, 384, 512], // Standard sizes
        maskableSizes: [192, 512]                // Maskable sizes
    )

// Or in config file
'icons' => [
    'path' => 'images/icons',
    'sizes' => [72, 96, 128, 144, 152, 192, 384, 512],
    'maskable_sizes' => [192, 512],
],

FilamentPwaPlugin::make()
    ->enableDebugBanner()  // Always show installation banner in debug mode

// Or in config
'installation' => [
    'show_banner_in_debug' => true,
],

// Configure caching strategies
FilamentPwaPlugin::make()
    ->serviceWorker(
        cacheName: 'my-app-v2.0.0',
        offlineUrl: '/custom-offline',
        cacheUrls: ['/admin', '/admin/dashboard', '/api/user']
    )

FilamentPwaPlugin::make()
    ->addShortcut('Dashboard', '/admin', 'Main dashboard')
    ->addShortcut('Users', '/admin/users', 'Manage users')
    ->addShortcut('Settings', '/admin/settings', 'App settings')

    // Dynamic shortcuts
    ->addShortcut(fn() => [
        'name' => 'My Profile',
        'url' => '/admin/profile/' . auth()->id(),
        'description' => 'View my profile',
        'icons' => [['src' => '/images/profile-icon.png', 'sizes' => '96x96']],
    ])

// Validation will check for HTTPS in production
php artisan filament-pwa:setup --validate

// Efficient caching strategies
'service_worker' => [
    'cache_patterns' => [
        'filament_assets' => '/\/css\/filament\/|\/js\/filament\//',  // Cache Filament assets
        'images' => '/\.(png|jpg|jpeg|svg|gif|webp|ico)$/',          // Cache images
        'fonts' => '/\.(woff|woff2|ttf|eot)$/',                      // Cache fonts
    ],
],

// Hex colors
'primary' => '#3B82F6'

// RGB format
'primary' => 'rgb(59, 130, 246)'

// Comma-separated RGB
'primary' => '59, 130, 246'

// Filament Color arrays (v3/v4)
'primary' => [
    600 => '59, 130, 246',
    500 => '#3B82F6',
    // ... other shades
]

// Filament Color objects (v4)
'primary' => Color::Blue

// In config/filament-pwa.php
'theme_color' => '#FF6B35', // Your custom color

// Or via environment
PWA_THEME_COLOR=#FF6B35

// Or via plugin configuration
FilamentPwaPlugin::make()->themeColor('#FF6B35')

// Enable debug mode to always show prompts
FilamentPwaPlugin::make()->enableDebugBanner()

// Check browser console for errors
// Ensure HTTPS is enabled in production

// Update cache name to force refresh
'service_worker' => [
    'cache_name' => 'my-app-v1.0.1',  // Increment version
],

use Alareqi\FilamentPwa\Services\PwaService;

// In a controller or command
$debug = PwaService::debugColorDetection();
dd($debug);

->name(string|Closure $name)                    // Set app name
->shortName(string|Closure $shortName)          // Set short name
->description(string|Closure $description)      // Set description
->startUrl(string|Closure $startUrl)            // Set start URL
->themeColor(string|Closure $themeColor)        // Set theme color
->backgroundColor(string|Closure $backgroundColor) // Set background color

->displayMode(string $mode)                     // Set display mode
->standalone()                                  // Set standalone mode
->fullscreen()                                  // Set fullscreen mode
->orientation(string $orientation)              // Set orientation
->portrait()                                    // Set portrait orientation
->landscape()                                   // Set landscape orientation
->scope(string $scope)                          // Set navigation scope

->language(string|Closure $language)           // Set language
->direction(string|Closure $direction)         // Set text direction
->ltr()                                         // Set left-to-right
->rtl()                                         // Set right-to-left

->installation(bool $enabled, int $delay, int $iosDelay, bool $debugBanner) // Configure installation
->enableInstallation(int $delay = 2000)        // Enable installation prompts
->disableInstallation()                         // Disable installation prompts
->enableDebugBanner(bool $enabled = true)      // Enable debug banner
->categories(array $categories)                 // Set app categories
->shortcuts(array $shortcuts)                  // Set shortcuts
->addShortcut(string|Closure $name, string $url, string $description, array $icons) // Add shortcut

->icons(string $path, array $sizes, array $maskableSizes) // Configure icons
->serviceWorker(string $cacheName, string $offlineUrl, array $cacheUrls) // Configure service worker

PwaService::getMetaTags(array $config = [])           // Get PWA meta tags
PwaService::getInstallationScript(array $config = []) // Get installation script
PwaService::isPWARequest()                            // Check if request is from PWA
PwaService::getConfig(array $overrides = [])          // Get merged configuration
PwaService::validatePWAAssets()                       // Validate PWA assets
PwaService::debugColorDetection()                     // Debug color detection
bash
# Publish configuration file
php artisan vendor:publish --tag="filament-pwa-config"

# Publish views (for customization)
php artisan vendor:publish --tag="filament-pwa-views"

# Publish public assets
php artisan vendor:publish --tag="filament-pwa-assets"
bash
# From SVG (recommended for best quality)
php artisan filament-pwa:setup --generate-icons --source=public/logo.svg

# From PNG/JPG
php artisan filament-pwa:setup --generate-icons --source=public/logo.png
bash
php artisan filament-pwa:setup --validate
bash
   php artisan vendor:publish --tag="filament-pwa-lang"
   
bash
   # Copy existing translation file
   cp resources/lang/en/pwa.php resources/lang/your-locale/pwa.php

   # Translate the content
   
bash
# Ubuntu/Debian
sudo apt-get install php-imagick

# macOS with Homebrew
brew install imagemagick
brew install php-imagick

# Windows
# Download from https://windows.php.net/downloads/pecl/releases/imagick/
bash
# Regenerate icons
php artisan filament-pwa:setup --generate-icons --source=public/logo.svg

# Check file permissions
chmod 755 public/images/icons
bash
# Validate PWA nt-pwa:setup --validate

# Check browser developer tools > Application > Manifest
bash
php artisan filament-pwa:setup --validate
bash
   cp resources/lang/en/pwa.php resources/lang/{locale}/pwa.php