Hello, laravel web developers! In this article, we'll see Laravel-Based Progressive Web App (PWA) with Service Workers. Progressive Web Apps (PWAs) are web applications that combine the best of both web and mobile apps.

They offer offline capabilities, fast load times, and push notifications, making them user-friendly and highly efficient. In this tutorial, we’ll walk through how to build a PWA with Laravel, focusing on implementing service workers for caching strategies, enabling offline functionality, and integrating push notifications.

Laravel-Based Progressive Web App (PWA) with Service Workers

 

Start by installing a new Laravel project. If you already have a Laravel project, you can skip this step.

composer create-project --prefer-dist laravel/laravel laravel-pwa

 

To turn your Laravel application into a PWA, you'll need a service worker and a manifest file. There are a few packages that help you configure this easily. For this tutorial, we’ll use the pwa-laravel package.

Install the package using Composer:

composer require ladumor/laravel-pwa

 

A manifest file describes the web app, its icons, and its behaviors. You can configure this file to suit your application’s needs.

Open the config/pwa.php file and update the details according to your app:

return [
    'name' => 'My Laravel PWA',
    'short_name' => 'LaravelPWA',
    'start_url' => '/',
    'display' => 'standalone',
    'background_color' => '#ffffff',
    'theme_color' => '#4DBA87',
    'orientation' => 'any',
    'icons' => [
        [
            'src' => '/images/icons/icon-192x192.png',
            'type' => 'image/png',
            'sizes' => '192x192',
        ],
        [
            'src' => '/images/icons/icon-512x512.png',
            'type' => 'image/png',
            'sizes' => '512x512',
        ],
    ],
];

Make sure you have the icons in the correct directory (/public/images/icons).

 

Service workers handle caching, offline capabilities, and push notifications. You need to register the service worker in your Laravel app.

In your resources/views/welcome.blade.php (or your main Blade template), add the following JavaScript snippet to register the service worker:

<script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
            navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            }, function(error) {
                console.log('ServiceWorker registration failed: ', error);
            });
        });
    }
</script>

 

Next, create the service-worker.js file in the public directory. This file will handle the caching strategy for your PWA.

Here’s a simple service worker with caching capabilities:

const CACHE_NAME = 'pwa-cache-v1';
const urlsToCache = [
    '/',
    '/css/app.css',
    '/js/app.js',
    '/images/icons/icon-192x192.png',
    '/images/icons/icon-512x512.png',
];

// Install service worker
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
    );
});

// Fetch from cache
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
    );
});

// Update service worker
self.addEventListener('activate', event => {
    const cacheWhitelist = [CACHE_NAME];
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cacheName => {
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

 

Push notifications are an essential feature of PWAs. To integrate push notifications, you can use a third-party service like Firebase Cloud Messaging (FCM). First, configure Firebase for your app.

• Go to the Firebase Console, create a new project, and configure FCM.
• Add the Firebase SDK to your welcome.blade.php:

<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script>
    const firebaseConfig = {
        apiKey: "your-api-key",
        authDomain: "your-app.firebaseapp.com",
        projectId: "your-project-id",
        storageBucket: "your-app.appspot.com",
        messagingSenderId: "your-messaging-sender-id",
        appId: "your-app-id",
    };

    firebase.initializeApp(firebaseConfig);
    const messaging = firebase.messaging();

    messaging.onMessage((payload) => {
        console.log('Message received. ', payload);
    });
</script>

 

Once everything is set up, you can test the PWA functionality by visiting your app in a browser and checking if it can be installed. You should also test the offline capabilities by going offline and seeing if the app still works.

 

---

You might also like:

• Read Also: Custom Middleware for API Rate Limiting by Role in Laravel 11
• Read Also: Event-Driven Architecture in Laravel 11: Going Beyond the Basics
• Read Also: How to Create Roles and Permissions in Laravel 11
• Read Also: How to Create API Versioning in Laravel 11