A Guide to Implementing PWA in Laravel Applications

Progressive Web Applications (PWAs) have revolutionized the way we experience web applications. By combining the best of web and native app experiences, PWAs offer users a fast, reliable, and engaging experience. In this guide, we will explore the benefits of PWAs and provide a step-by-step tutorial on how to implement PWA in Laravel applications.

Why PWA?

Laravel-based Progressive Web Apps combine the advantages of both web and mobile applications, providing users with a speedy loading experience, offline functionality, and push notifications. These apps offer an app-like experience directly within the web browser, allowing users to access the application smoothly, regardless of their network conditions or device. With Progressive Web Apps, users can enjoy the benefits of a mobile app without the need for downloading and installing it separately.

Benefits of PWAs

Progressive Web Apps (PWAs) represent a new category of web applications that combine the best features of traditional web apps and native mobile apps. By leveraging modern web technologies, PWAs deliver an app-like experience that bridges the gap between these two categories. Some of the key advantages of PWAs over conventional web apps include:

1. Offline Access: PWAs can store data locally, allowing users to access app content even when they don’t have an internet connection. This feature makes PWAs more reliable and convenient for users, as they no longer have to worry about connectivity issues.

2. Push Notifications: PWAs can send push notifications to users, keeping them informed and engaged with the app. This feature helps to increase user engagement and retention, as users are more likely to return to the app if they receive regular notifications.

3. App-Like Interface: PWAs provide an app-like user interface, which enhances the overall user experience. This interface is intuitive and easy to use, making it more appealing to users who are accustomed to using native mobile apps.

4. Fast Loading Times: PWAs are optimized for speed, ensuring a smooth and responsive user experience. This feature is particularly important in today’s fast-paced digital world, where users expect apps to load quickly and efficiently.

These features make PWAs more reliable, convenient, and engaging for users, and they help to bridge the gap between traditional web apps and native mobile apps.

Implementing PWA in Laravel Applications

To implement PWA in Laravel applications, follow these steps:

1. Install the Laravel PWA Package:

Begin by installing the laravel-pwa package using Composer:

composer require silviolleite/laravelpwa

Once installed, publish its assets and configuration file.

php artisan vendor:publish –provider=”LaravelPWA\Providers\LaravelPWAServiceProvider”

In the configuration folder, you will find the ‘laravelpwa.php’ file. Make necessary changes in the app name (short & long), and colours to match the design palette.

‘XYZ’,

‘manifest’ => [

‘name’ => env(‘APP_NAME’, ‘MY PWA APP’),

‘short_name’ => ‘PWA’,

‘start_url’ => ‘/’,

‘background_color’ => ‘#00be9c’,

‘theme_color’ => ‘#1c3c50’,

‘display’ => ‘standalone’,

‘orientation’=> ‘any’,

‘icons’ => [

’72×72′ => ‘/images/icons/icon-72×72.png’,

‘96×96′ => ‘/images/icons/icon-96×96.png’,

‘128×128’ => ‘/images/icons/icon-128×128.png’,

‘144×144’ => ‘/images/icons/icon-144×144.png’,

‘152×152’ => ‘/images/icons/icon-152×152.png’,

‘192×192’ => ‘/images/icons/icon-192×192.png’,

‘384×384’ => ‘/images/icons/icon-384×384.png’,

‘512×512’ => ‘/images/icons/icon-512×512.png’

],

‘splash’ => [

‘640×1136’ => ‘/images/icons/splash-640×1136.png’,

‘750×1334’ => ‘/images/icons/splash-750×1334.png’,

‘828×1792’ => ‘/images/icons/splash-828×1792.png’,

‘1125×2436’ => ‘/images/icons/splash-1125×2436.png’,

‘1242×2208’ => ‘/images/icons/splash-1242×2208.png’,

‘1242×2688’ => ‘/images/icons/splash-1242×2688.png’,

‘1536×2048’ => ‘/images/icons/splash-1536×2048.png’,

‘1668×2224’ => ‘/images/icons/splash-1668×2224.png’,

‘1668×2388’ => ‘/images/icons/splash-1668×2388.png’,

‘2048×2732’ => ‘/images/icons/splash-2048×2732.png’,
],
‘custom’ => []
]

];

2. Customize the images

In the same configuration file, there are two arrays designated for storing images: “icons” and “splash”. To ensure proper functioning of your PWA, it’s essential to customize these arrays with your own icons and splash screens. These images are saved in the “public/images/icons” directory within your project.

For Example:

[

‘path’ => ‘/images/icons/icon-500×516.png’,

‘sizes’ => ‘500×516’,

‘purpose’ => ‘any’

],

3. Include it in your Blade

To serve the assets required for your PWA in the browser, you need to include the Blade directive ‘@laravelPWA’ in your parent view layout, before closing the head tag. This directive should be placed after the ‘App’ directive and before yielding the ‘content’ view.

Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!-- CSRF Token -->
  <meta name="csrf-token" content="{{ csrf_token() }}">

  <!-- Scripts -->
  <script src="{{ asset('js/app.js') }}" defer></script>

  <!-- Styles -->
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">

  <!-- Laravel PWA -->
  @laravelPWA

  <title>{{ config('app.name', 'Laravel') }}</title>
</head>
<body>
  <div id="app">
    @yield('content')
  </div>
</body>
</html>

4. Create Route

You need to create an offline route that returns a default view. To achieve this, you need to modify the `routes/web.php` file and add the following code:

Route::get('/offline', function () {
    return view('modules/laravelpwa/offline');
});

5. Customize for offline view

During the asset publishing process with the ‘vendor: publish’ command, you will encounter a published Blade view located at the path view folder/modules/laravelpwa/offline.blade.php. This view can be customized to render seamlessly within the parent view layout where the ‘@laravelPWA’ directive is placed.

After customizing the offline view, refresh the page by clicking the Refresh button. You can now enjoy using Laravel in a PWA app without any network connectivity, as the offline view will be displayed smoothly.

6. Test Your PWA

To test your PWA, open your Laravel application in a modern browser that supports PWAs (e.g., Chrome, Firefox). Click on the “Install” button that appears in the browser’s address bar to install the PWA on your home screen.

By implementing PWA in your Laravel applications, you can provide your users with a fast, reliable, and engaging experience. PWAs offer numerous benefits, including enhanced performance, reliability, engagement, and discoverability. By following the steps outlined in this guide, you can easily add PWA functionality to your Laravel applications and take advantage of these benefits.