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

ladumor / laravel-pwa

Maintainers

Details