ladumor/laravel-pwa is a Laravel package for this package used for the make pwa website..
It currently has 273 GitHub stars and 316.841 downloads on Packagist (latest version v1.0.1).
Install it with composer require ladumor/laravel-pwa.
Discover more Laravel packages by ladumor
or browse all Laravel packages to compare alternatives.
Last updated
)
Install the package by the following command, (try without --dev if you want to install it on production environment)
composer require --dev ladumor/laravel-pwa
Add the provider to your config/app.php into provider section if using lower version of laravel,
Ladumor\LaravelPwa\PWAServiceProvider::class,
Add the Facade to your config/app.php into aliases section,
'LaravelPwa' => \Ladumor\LaravelPwa\LaravelPwa::class,
Run the following command to publish config file,
php artisan laravel-pwa:publish
Add following code in root blade file in header section.
<!-- PWA -->
@pwaHead
You can also pass custom logo and theme color as arguments:
@pwaHead('custom-logo.png', '#ff0000')
Add following code in root blade file in before close the body.
@laravelPwa
@pwaUpdateNotifier
@pwaInstallButton
This package supports Background Sync, allowing users to queue actions while offline and automatically synchronize them when the connection is restored.
When a user submits a POST form while offline:
Developers can also manually queue requests using the global window.laravelPwaSync helper:
const request = new Request('/api/data', {
method: 'POST',
body: JSON.stringify({ key: 'value' }),
headers: {
'Content-Type': 'application/json'
}
});
if (window.laravelPwaSync) {
await window.laravelPwaSync.queue(request);
}
Background Sync relies on the Service Worker and SyncManager API. If the browser does not support these features, the application will continue to work as a standard web application without background synchronization.
This package provides helpers to manage the PWA installation experience effectively.
You can check if the app is ready to be installed using window.laravelPwaInstall.canInstall().
if (window.laravelPwaInstall.canInstall()) {
console.log('App is ready for installation');
}
The package automatically intercepts the beforeinstallprompt event and defers it. You can trigger the prompt manually at a better time (e.g., after a user interaction).
async function myCustomInstallFlow() {
const outcome = await window.laravelPwaInstall.showPrompt();
if (outcome === 'accepted') {
console.log('User accepted the install prompt');
}
}
You can listen for custom events to track the installation process:
window.addEventListener('pwa-installable', (e) => {
console.log('PWA is ready to be installed');
});
window.addEventListener('pwa-installed', () => {
console.log('PWA was successfully installed');
});
Check if the app is currently running in standalone mode (installed):
if (window.laravelPwaInstall.isStandalone()) {
console.log('App is running in standalone mode');
}
This package includes a tool to automatically generate all required PWA icons and splash screen assets from a single source image.
public directory of your Laravel application.pwa-source.png.php artisan laravel-pwa:publish
manifest.json.If pwa-source.png is not found, the package will use a default logo to generate the assets.
This package includes a smart versioning system to ensure that your users always have the latest version of your PWA and its assets.
php artisan laravel-pwa:publish, a new unique version ID is generated and embedded in your sw.js. This triggers an update in the user's browser.manifest.json and all listed icons include version query parameters, ensuring that browsers and devices refresh them when you re-publish.@laravelPwa directive automatically appends a version timestamp to the sw.js, pwa-install.js, and background-sync.js script registrations. This forces the browser to check for a new Service Worker file immediately.@pwaUpdateNotifier directive (if included) will automatically handle the skipWaiting and reload the page to activate the new Service Worker, ensuring a seamless update experience for users.To update your PWA version and bust all caches, simply run:
php artisan laravel-pwa:publish
Instead of manually editing the manifest.json file, you can use the interactive manifest generator to configure your PWA settings:
php artisan pwa:manifest
This command will prompt you for:
After running this command, remember to run php artisan laravel-pwa:publish to apply the changes to your public directory.
This package includes a set of developer-friendly tools to help you debug your PWA implementation.
Run the following command to see debugging tips:
php artisan pwa:debug
Add the @pwaDebug directive to your blade file (ideally only in development). It will only load if APP_DEBUG=true in your .env.
@pwaDebug
This directive injects a global window.laravelPwaDebug object into your browser console with the following utilities:
| Method | Description |
| --- | --- |
| laravelPwaDebug.viewCaches() | List all PWA caches and their current contents. |
| laravelPwaDebug.clearCaches() | Clear all PWA-related caches. |
| laravelPwaDebug.forceUpdate() | Force a Service Worker update check. |
| laravelPwaDebug.unregister() | Unregister all Service Workers for the domain. |
| laravelPwaDebug.help() | Show available debug commands. |
The Service Worker now includes basic lifecycle logging (Installing, Activated) to help you track its state in the browser console.
The MIT License (MIT). Please see License File for more information
PWA only works with https. so, you need to run either with php artisan serve or create a virtual host with https.
you can watch the video for how to create a virtual host with HTTPS
