ladumor / laravel-pwa
this package used for the make pwa website.
Fund package maintenance!
www.buymeacoffee.com/ladumor
Installs: 188 063
Dependents: 0
Suggesters: 0
Security: 0
Stars: 244
Watchers: 6
Forks: 46
Open Issues: 1
Requires
- php: >=5.6
- illuminate/support: >=5.4
This package is auto-updated.
Last update: 2025-05-28 10:07:16 UTC
README
Laravel PWA
You can follow this video tutorial as well for installation.
Watch Other Lavavel tutorial here
Installation
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 Provider
Add the provider to your config/app.php
into provider
section if using lower version of laravel,
Ladumor\LaravelPwa\PWAServiceProvider::class,
Add Facade
Add the Facade to your config/app.php
into aliases
section,
'LaravelPwa' => \Ladumor\LaravelPwa\LaravelPwa::class,
Publish the Assets
Run the following command to publish config file,
php artisan laravel-pwa:publish
Configure PWA
Add following code in root blade file in header section.
<!-- PWA -->
<meta name="theme-color" content="#6777ef"/>
<link rel="apple-touch-icon" href="{{ asset('logo.png') }}">
<link rel="manifest" href="{{ asset('/manifest.json') }}">
Add following code in root blade file in before close the body.
<script src="{{ asset('/sw.js') }}"></script>
<script>
if ("serviceWorker" in navigator) {
// Register a service worker hosted at the root of the
// site using the default scope.
navigator.serviceWorker.register("/sw.js").then(
(registration) => {
console.log("Service worker registration succeeded:", registration);
},
(error) => {
console.error(`Service worker registration failed: ${error}`);
},
);
} else {
console.error("Service workers are not supported.");
}
</script>
Custom Install Button
You can add custom install button in your blade file by using the following code.
<!-- Add this inside <body> -->
<button id="pwa-install-btn" style="display:none; position: fixed; bottom: 20px; right: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 8px; z-index: 1000;">
Install App
</button>
Also include the JS: (Add following code in root blade file in before close the body.)
<script src="{{ asset('pwa-install.js') }}"></script>
License
The MIT License (MIT). Please see License File for more information
Note
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