PWA Easy Setup for Laravel (With Vue.js and React.js

composer require erag/laravel-pwa

php artisan erag:install-pwa

return [
    'install-button' => true, // Show or hide the install button globally.

    'manifest' => [
        'name' => 'Laravel PWA',
        'short_name' => 'LPT',
        'background_color' => '#6777ef',
        'display' => 'fullscreen',
        'description' => 'A Progressive Web Application setup for Laravel projects.',
        'theme_color' => '#6777ef',
        'icons' => [
            [
                'src' => 'logo.png',
                'sizes' => '512x512',
                'type' => 'image/png',
            ],
        ],
    ],

    'debug' => env('APP_DEBUG', false), // Show or hide console.log in the browser globally.
];

php artisan erag:update-manifest

@PwaHead 
    Your App Title





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  2. Register Service Worker
Just before the closing  tag in your main layout file, add:

    @RegisterServiceWorkerScript 





    Enter fullscreen mode
    


    Exit fullscreen mode
    




These directives will automatically generate the necessary tags and JavaScript for the PWA.
  
  
  Uploading a Logo via PWA 🌟
To update the PWA logo dynamically, follow these steps:
Your Laravel PWA is now configured to update the logo dynamically! 🚀
  
  
  1. Create a Controller Method
Input Key Name: logo Make sure the image is in PNG format, at least 512x512 pixels, and does not exceed 1024 KB in size.

 type="file" name="logo" accept=".png">



    Enter fullscreen mode
    


    Exit fullscreen mode
    





array:2 [▼ // EragLaravelPwa/src/Core/PWA.php:19
  "_token" => "iKbZh21VsYZMpNd9TN12Ul5SoysQzkMXlQkhB5Ub"
  "logo" => Illuminate\Http\UploadedFile{#1426 ▶}]



    Enter fullscreen mode
    


    Exit fullscreen mode
    





namespace App\Http\Controllers;

use EragLaravelPwa\Core\PWA;
use Illuminate\Http\Request;
use Illuminate\Routing\Controller;

class SettingsController extends Controller
{
    public function uploadLogo(Request $request)
    {
        $response = PWA::processLogo($request);

        if ($response['status']) {
            return redirect()->back()->with('success', $response['message']);
        }

        return redirect()->back()->withErrors($response['errors'] ?? ['Something went wrong.']);
    }
}



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Once uploaded, the new logo will be available at http://yourdomain.com/logo.png.
  
  
  Screenshots 📸

  
  
  Installing PWA App

  
  
  Offline Page

  
  
  Contribution 🧑‍💻
We appreciate your interest in contributing to this Laravel PWA project! Whether you're reporting issues, fixing bugs, or adding new features, your help is greatly appreciated.
  
  
  Forking and Cloning the Repository

Go to the repository page on GitHub.
Click the Fork button at the top-right corner of the repository page.
Clone your forked repository:


   git clone https://github.com/your-username/laravel-pwa.git



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Reporting Issues
If you encounter any issues, please check if the issue already exists in the Issues section. If not, create a new issue with the following details:
Steps to reproduce the issue
Expected and actual behavior
Laravel version
Any relevant logs or screenshots

  
  
  Submit a Pull Request
When you're ready to contribute, open a pull request describing the changes you’ve made and how they improve the project. Please ensure:
All commits are squashed into one clean commit.
The code follows PSR-12 standards.
You’ve tested the changes locally.

  
  
  Coding Standards

Follow the PSR-12 PHP coding standards.
Keep your commit history clean and meaningful.
Add comments where needed but avoid over-commenting.

  
  
  Example Workflow 🌟
Here’s a simple example of how to use this package:
Install the package via Composer.
Publish the configuration files.
Add the @PwaHead directive in your layout file’s .
Add the @RegisterServiceWorkerScript directive before the closing  tag.
Customize the config/pwa.php to fit your project’s needs.
Run php artisan erag:pwa-update-manifest to update the manifest file.
That's it! Your Laravel app is now PWA-enabled. 🚀