PHPackages                             iroid/laravelpwa - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility &amp; Helpers](/categories/utility)
4. /
5. iroid/laravelpwa

ActiveLibrary[Utility &amp; Helpers](/categories/utility)

iroid/laravelpwa
================

Looks like an app, feels like an app, but NOT an app.

13PHP

Since Feb 21Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/salman1802/pwaPackage)[ Packagist](https://packagist.org/packages/iroid/laravelpwa)[ RSS](/packages/iroid-laravelpwa/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Laravel (PWA) Progressive Web Aplication
========================================

[](#laravel-pwa-progressive-web-aplication)

This Laravel pakage turns your project into a [progressive web app](https://developers.google.com/web/progressive-web-apps/). Navigating to your site on an Android phone will prompt you to add the app to your home screen.

Launching the app from your home screen will display your app. As such, it's critical that your application provides all navigation within the HTML (no reliance on the browser back or forward button).

Requirements
============

[](#requirements)

Progressive Web Apps require HTTPS unless being served from localhost. If you're not already using HTTPS on your site, check out [Let's Encrypt](https://letsencrypt.org/) and [ZeroSSL](https://zerossl.com/).

Installation
------------

[](#installation)

Add the following to your `composer.json` file :

```
"require": {
    "iroid/laravelpwa": "*",
},
```

or execute

```
composer require iroid/laravelpwa --prefer-dist
```

### Publish

[](#publish)

```
$ php artisan vendor:publish --provider="LaravelPWA\Providers\LaravelPWAServiceProvider"
```

### Configuration

[](#configuration)

Configure your app name, description, icons and splashes in `config/laravelpwa.php`.

```
'manifest' => [
        'name' => env('APP_NAME', 'My PWA App'),
        'short_name' => 'PWA',
        'start_url' => '/',
        'background_color' => '#ffffff',
        'theme_color' => '#000000',
        'display' => 'standalone',
        'orientation' => 'any',
        'status_bar' => 'black',
        'icons' => [
            '72x72' => [
                'path' => '/images/icons/icon-72x72.png',
                'purpose' => 'any'
            ],
            '96x96' => [
                'path' => '/images/icons/icon-96x96.png',
                'purpose' => 'any'
            ],
            '128x128' => [
                'path' => '/images/icons/icon-128x128.png',
                'purpose' => 'any'
            ],
            '144x144' => [
                'path' => '/images/icons/icon-144x144.png',
                'purpose' => 'any'
            ],
            '152x152' => [
                'path' => '/images/icons/icon-152x152.png',
                'purpose' => 'any'
            ],
            '192x192' => [
                'path' => '/images/icons/icon-192x192.png',
                'purpose' => 'any'
            ],
            '384x384' => [
                'path' => '/images/icons/icon-384x384.png',
                'purpose' => 'any'
            ],
            '512x512' => [
                'path' => '/images/icons/icon-512x512.png',
                'purpose' => 'any'
            ],
        ],
        'splash' => [
            '640x1136' => '/images/icons/splash-640x1136.png',
            '750x1334' => '/images/icons/splash-750x1334.png',
            '828x1792' => '/images/icons/splash-828x1792.png',
            '1125x2436' => '/images/icons/splash-1125x2436.png',
            '1242x2208' => '/images/icons/splash-1242x2208.png',
            '1242x2688' => '/images/icons/splash-1242x2688.png',
            '1536x2048' => '/images/icons/splash-1536x2048.png',
            '1668x2224' => '/images/icons/splash-1668x2224.png',
            '1668x2388' => '/images/icons/splash-1668x2388.png',
            '2048x2732' => '/images/icons/splash-2048x2732.png',
        ],
        'shortcuts' => [
            [
                'name' => 'Shortcut Link 1',
                'description' => 'Shortcut Link 1 Description',
                'url' => '/shortcutlink1',
                'icons' => [
                    "src" => "/images/icons/icon-72x72.png",
                    "purpose" => "any"
                ]
            ],
            [
                'name' => 'Shortcut Link 2',
                'description' => 'Shortcut Link 2 Description',
                'url' => '/shortcutlink2'
            ]
        ],
        'custom' => []
    ]
```

You can specify the size of each icon as key of the array or specify it:

```
[
    'path' => '/images/icons/icon-512x512.png',
    'sizes' => '512x512',
    'purpose' => 'any'
],

```

Obs: In the `custom` tag you can insert personalized tags to `manifest.json` like this e.g:

```
...
'custom' => [
    'tag_name' => 'tag_value',
    'tag_name2' => 'tag_value2',
    ...
]
...
```

Include within your `` the blade directive `@laravelPWA`.

```

    My Title
    ...
    @laravelPWA

    ...
    My content
    ...

```

This should include the appropriate meta tags, the link to `manifest.json` and the serviceworker script.

how this example:

```

    // Initialize the service worker
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/serviceworker.js', {
            scope: '.'
        }).then(function (registration) {
            // Registration was successful
            console.log('Laravel PWA: ServiceWorker registration successful with scope: ', registration.scope);
        }, function (err) {
            // registration failed :(
            console.log('Laravel PWA: ServiceWorker registration failed: ', err);
        });
    }

```

Troubleshooting
===============

[](#troubleshooting)

While running the Laravel test server:

1. Verify that `/manifest.json` is being served
2. Verify that `/serviceworker.js` is being served
3. Use the Application tab in the Chrome Developer Tools to verify the progressive web app is configured correctly.
4. Use the "Add to homescreen" link on the Application Tab to verify you can add the app successfully.

The Service Worker
==================

[](#the-service-worker)

By default, the service worker implemented by this app is:

```
var staticCacheName = "pwa-v" + new Date().getTime();
var filesToCache = [
    '/offline',
    '/css/app.css',
    '/js/app.js',
    '/images/icons/icon-72x72.png',
    '/images/icons/icon-96x96.png',
    '/images/icons/icon-128x128.png',
    '/images/icons/icon-144x144.png',
    '/images/icons/icon-152x152.png',
    '/images/icons/icon-192x192.png',
    '/images/icons/icon-384x384.png',
    '/images/icons/icon-512x512.png',
    '/images/icons/splash-640x1136.png',
    '/images/icons/splash-750x1334.png',
    '/images/icons/splash-1242x2208.png',
    '/images/icons/splash-1125x2436.png',
    '/images/icons/splash-828x1792.png',
    '/images/icons/splash-1242x2688.png',
    '/images/icons/splash-1536x2048.png',
    '/images/icons/splash-1668x2224.png',
    '/images/icons/splash-1668x2388.png',
    '/images/icons/splash-2048x2732.png'
];

// Cache on install
self.addEventListener("install", event => {
    this.skipWaiting();
    event.waitUntil(
        caches.open(staticCacheName)
            .then(cache => {
                return cache.addAll(filesToCache);
            })
    )
});

// Clear cache on activate
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames
                    .filter(cacheName => (cacheName.startsWith("pwa-")))
                    .filter(cacheName => (cacheName !== staticCacheName))
                    .map(cacheName => caches.delete(cacheName))
            );
        })
    );
});

// Serve from Cache
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
            .catch(() => {
                return caches.match('offline');
            })
    )
});
```

To customize service worker functionality, update the `public_path/serviceworker.js`.

The offline view
================

[](#the-offline-view)

By default, the offline view is implemented in `resources/views/vendor/laravelpwa/offline.blade.php`

```
@extends('layouts.app')

@section('content')

    You are currently not connected to any networks.

@endsection
```

To customize update this file.

Contributing
------------

[](#contributing)

Interested to contribute or modification contact us [email](mailto:salman.iroid@gmail.com).

###  Health Score

22

—

LowBetter than 22% of packages

Maintenance54

Moderate activity, may be stable

Popularity5

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity19

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/3c04f37057d08c2525a1e784cfd5ad3e029fe720e95d50aab63104c9fb8b3d1f?d=identicon)[salman1802](/maintainers/salman1802)

---

Top Contributors

[![salman-iroid](https://avatars.githubusercontent.com/u/103873893?v=4)](https://github.com/salman-iroid "salman-iroid (2 commits)")

### Embed Badge

![Health badge](/badges/iroid-laravelpwa/health.svg)

```
[![Health](https://phpackages.com/badges/iroid-laravelpwa/health.svg)](https://phpackages.com/packages/iroid-laravelpwa)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
