Laravel pwa Integration Tutorial

  • 07-12-2022
  • 2281
  • Laravel 9
  • Haresh Chauhan
Watch Youtube Video (HINDI) :

What is Progressive Web Apps (PWA)?

PWA full form Progressive Web Apps, This is commonly known as a progressive web application, it's the type of application software that is delivered through the software format instead of the web application browser. This will create a web application icon on your desktop and double-click it will open in software form without opening any browser.

Make a Progressive Web Apps (PWAs) Website in Laravel, In this tutorial, I will tech you how to make your laravel application or convert it into PWA progressive web app using composer install. This is a very simple and very quick setup by following this tutorial for integration desktop mode.

how to build progressive web apps (PWA) using laravel; this post will help you to integrate into laravel, first we will install a composer package, and then we will do a little configuration in the config file, as well as will publish the config file for the basic default setting for the PWA for your laravel application.

laravel integrate PWA (progressive web application) using composer requires labor/laravel-pwa, this will convert your application to desktop mode. you can install it anytime and use it as an application in form of the web.

Step 1. Installation Composer

Install the composer package by following the command, copy the below-provided command and paste it into your project terminal and hit enter. This command will install the composer core dependency library file in the application.

composer require ladumor/laravel-pwa

Step 2. Add Provider & Facade

After successfully installing composer in the application, we need to little config in the app.php file, this file is located in the config folder from the root application. So open the app.php file and add the below-provided service provider in the provider's array attribute.

Ladumor\LaravelPwa\PWAServiceProvider::class,

To use global name space we will also register the facade in the aliases attribute in the app.php config file.

'LaravelPwa' => \Ladumor\LaravelPwa\LaravelPwa::class,

Step 3. Publish the Assets

After adding the service provider & facade in the app file, we will publish a configuration file for this package, This configuration file will help us to make customization settings with in the package according to your wants.

php artisan laravel-pwa:publish

Run the above-given command in your application command prompt, this will generate a file in the config folder.

Step 4. Configure PWA Code

Add the following provided code in the root blade file in your application in the <head> tag.

<meta name="theme-color" content="#6777ef"/>
<link rel="apple-touch-icon" href="{{ asset('logo.PNG') }}">
<link rel="manifest" href="{{ asset('/manifest.json') }}">

Add the following script code in your blade file before closing your <body> tag.

<script src="{{ asset('/sw.js') }}"></script>
<script>
if (!navigator.serviceWorker.controller) {
    navigator.serviceWorker.register("/sw.js").then(function (reg) {
        console.log("Service worker has been registered for scope: " + reg.scope);
    });
}
</script>

Well done, that's every thing you have done, you just close the current application browser tab and reopen your application in a new tab, and you will see a little TV icon at the right address bar in the respected browser. just click on it and install your Progressive Web Apps (PWAs).

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :