README

LaraJob

Looking for your next Laravel developer position or talent to join your team? I’ve partnered with LaraJobs to bring you the best Laravel jobs and developer opportunities.

As an affiliate, I may earn a small commission if you land a job or post a job through the link. Your support helps me continue to build great open-source tools!

Check out the LaraJobs platform here and start exploring opportunities today!

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