DEV Community

Er Amit Gupta
Er Amit Gupta

Posted on

๐Ÿš€ How to Turn Your Laravel App into a PWA (Progressive Web App) in 5 Minutes

Progressive Web Apps (PWAs) are revolutionizing how web applications are built and delivered. If youโ€™re running a Laravel app and want to give it the power of offline access, installability, and mobile-native experience โ€” youโ€™re in the right place!

In this step-by-step tutorial, weโ€™ll show you how to convert any Laravel application into a fully-functional PWA in just 5 minutes using the eramitgupta/laravel-pwa package.

๐Ÿง  What is a PWA?

A Progressive Web App (PWA) is a web application that:

  • Works offline
  • Loads instantly
  • Can be added to your home screen
  • Feels like a native mobile app

PWAs combine the best of web and mobile applications โ€” and Laravel makes it super easy to integrate.

๐Ÿงฐ Requirements

  • Laravel 8, 9, 10, 11, or 12
  • HTTPS (required for service workers)
  • PHP 8.0+
  • Composer

๐Ÿ“ฆ Step 1: Install the Laravel PWA Package

In your Laravel project root, run:

composer require erag/laravel-pwa
Enter fullscreen mode Exit fullscreen mode

This installs the official eramitgupta/laravel-pwa package.

โš™๏ธ Step 2: Publish the Configuration Files

Now publish the configuration and asset files:

php artisan erag:install-pwa
Enter fullscreen mode Exit fullscreen mode

This creates:

  • config/pwa.php โ€“ the main configuration
  • public/manifest.json โ€“ the manifest file
  • Service worker files in public/

๐Ÿงพ Step 3: Configure Your PWA Manifest

Open config/pwa.php and customize it as per your app:

return [
    'install-button' => true,

    'manifest' => [
        'name' => 'My Laravel App',
        'short_name' => 'MyApp',
        'background_color' => '#ffffff',
        'theme_color' => '#3f51b5',
        'display' => 'standalone',
        'description' => 'A Laravel-based Progressive Web App',
        'icons' => [
            [
                'src' => 'logo.png',
                'sizes' => '512x512',
                'type' => 'image/png',
            ],
        ],
    ],

    'debug' => env('APP_DEBUG', false),
];
Enter fullscreen mode Exit fullscreen mode

After updating, regenerate the manifest file:

php artisan erag:update-manifest
Enter fullscreen mode Exit fullscreen mode

๐Ÿงฉ Step 4: Add PWA Blade Directives

Open your resources/views/layouts/app.blade.php (or any base layout) and insert these:

In <head> section:

@PwaHead
Enter fullscreen mode Exit fullscreen mode

Before </body>:

@RegisterServiceWorkerScript
Enter fullscreen mode Exit fullscreen mode

These will handle PWA meta tags and service worker registration automatically.

๐Ÿ–ผ๏ธ Step 5: Upload a Custom PWA Logo (Optional)

Want to update your PWA logo from the dashboard?

  1. Create an upload form: 
<form method="POST" action="{{ route('upload.logo') }}" enctype="multipart/form-data">
    @csrf
    <input type="file" name="logo" accept=".png" required>
    <button type="submit">Upload</button>
</form>
Enter fullscreen mode Exit fullscreen mode
  1. Add this controller method: 
use EragLaravelPwa\Core\PWA;
use Illuminate\Http\Request;

public function uploadLogo(Request $request)
{
    $response = PWA::processLogo($request);
    return $response['status']
        ? back()->with('success', $response['message'])
        : back()->withErrors($response['errors'] ?? ['Upload failed.']);
}
Enter fullscreen mode Exit fullscreen mode

The uploaded logo replaces the existing public/logo.png.

๐Ÿ” Step 6: Test Your PWA

  1. Deploy your site over HTTPS (required).
  2. Open it on mobile or desktop (Chrome).
  3. Youโ€™ll see an โ€œInstall Appโ€ prompt.

โœ… Congrats! Your Laravel app is now PWA-ready!

โšก PWA with Vue.js or React.js (Vite + SPA)

If your frontend is Vue or React, no problem:

  • Make sure your Blade layout includes @PwaHead and @RegisterServiceWorkerScript.
  • The PWA functionality will wrap your SPA correctly, handling the offline mode and install behavior as expected.

๐Ÿ“ธ Screenshots

App Install Prompt Offline Page

โœ… Summary

Step Description
1. Install the package
2. Publish config and manifest
3. Customize config/pwa.php
4. Use Blade directives
5. Upload a logo (optional)
6. Test the app

๐Ÿ’ก Pro Tips

  • Always test on HTTPS (use Laravel Valet or services like Ngrok during local testing).
  • Use Lighthouse Chrome DevTool to check PWA score.
  • Donโ€™t forget to update cache versions if you change service worker files.
  • Laravel PWA setup
  • Laravel PWA with Vue.js
  • Make Laravel app installable
  • Progressive Web App in Laravel
  • Laravel PWA package guide

Top comments (1)

Collapse
 
ohislawrence profile image
Ohis Lawrence •

Good one, can this handle notifications.