{"id":17581,"date":"2024-09-20T06:00:31","date_gmt":"2024-09-20T06:00:31","guid":{"rendered":"https:\/\/www.directimpactsolutions.com\/?p=17581"},"modified":"2025-11-06T02:48:21","modified_gmt":"2025-11-06T02:48:21","slug":"building-pwa-with-laravel","status":"publish","type":"post","link":"https:\/\/www.directimpactsolutions.com\/en\/building-pwa-with-laravel\/","title":{"rendered":"Building a Progressive Web Application (PWA) with Laravel: a Step-by-Step Guide"},"content":{"rendered":"<div class=\"wp-block-uagb-image uagb-block-5dfa865a wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" srcset=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248-1-1024x550.jpg ,https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248-1.jpg 780w, https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248-1.jpg 360w\" sizes=\"auto, (max-width: 480px) 150px\" src=\"https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248-1-1024x550.jpg\" alt=\"PWA\" class=\"uag-image-17586\" width=\"463\" height=\"477\" title=\"Word Laravel on paper and laptop\" loading=\"lazy\" role=\"img\"\/><\/figure><\/div><p><\/p><p>Progressive Web Applications (PWAs) are becoming increasingly popular due to their ability to offer a seamless and engaging user experience. Combining the best features of web and mobile applications, <a href=\"https:\/\/www.directimpactsolutions.com\/en\/web-applications\/\">PWAs<\/a> are fast, reliable, and installable, providing users with an app-like experience directly from their web browsers. <a href=\"https:\/\/laravel.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Laravel<\/a>, a robust PHP framework, makes building PWAs more straightforward and efficient. This guide will walk you through the steps to <a href=\"https:\/\/www.directimpactsolutions.com\/en\/pwa-development\/\">create a PWA <\/a>with Laravel.<\/p><div class=\"wp-block-uagb-advanced-heading uagb-block-73ed8854\"><h2 class=\"uagb-heading-text\">The Advantages of Developing a PWA with the Laravel Framework<\/h2><\/div><p><a href=\"https:\/\/www.directimpactsolutions.com\/en\/Laravel-Web-Development\/\">Creating Progressive Web Applications (PWAs) using the Laravel framework<\/a> offers numerous benefits, leveraging <a href=\"https:\/\/www.directimpactsolutions.com\/en\/laravel\/\">Larave<\/a>l&#8217;s robust features:<\/p><h3 class=\"wp-block-heading has-ast-global-color-2-color has-text-color has-link-color wp-elements-bbc2d77fedbb9ce1ec282c58bba32b63\" id=\"Seamless-Performance-and-Speed\">Seamless Performance and Speed<\/h3><ul class=\"wp-block-list\"><li>Efficient Routing and Caching: Laravel\u2019s routing system and built-in caching mechanisms ensure fast loading times and efficient performance.<\/li>\n\n<li>Eloquent ORM: Laravel&#8217;s Eloquent ORM simplifies database interactions, speeding up data retrieval and manipulation.&nbsp;<\/li><\/ul><h3 class=\"wp-block-heading has-ast-global-color-2-color has-text-color has-link-color wp-elements-cc0761666ee90cd7e3a0d4e792f42165\" id=\"Seamless-Performance-and-Speed\">Enhanced User Engagement<\/h3><ul class=\"wp-block-list\"><li>Robust Authentication and Authorization: Laravel provides built-in tools for secure user authentication and authorization.<\/li>\n\n<li>Real-time Event Broadcasting: Laravel&#8217;s event broadcasting allows for real-time updates, enhancing user interaction.<\/li><\/ul><h3 class=\"wp-block-heading has-ast-global-color-2-color has-text-color has-link-color wp-elements-3a1e568137a2f3de6c943e3df550dbd3\" id=\"Seamless-Performance-and-Speed\">Cost-Effective Development<\/h3><ul class=\"wp-block-list\"><li>Rapid Development: Laravel\u2019s elegant syntax and comprehensive documentation facilitate rapid development.<\/li>\n\n<li>Reusable Components: Laravel\u2019s modular structure allows for reusable components, reducing development time and costs.<\/li><\/ul><h3 class=\"wp-block-heading has-ast-global-color-2-color has-text-color has-link-color wp-elements-5747c80eb5592503d144910ba461685d\" id=\"Seamless-Performance-and-Speed\">Enhanced Security<\/h3><ul class=\"wp-block-list\"><li>Built-in Security Features: Laravel includes protections against SQL injection, cross-site scripting (XSS), and cross-site request forgery (CSRF).<\/li>\n\n<li>HTTPS by Default: Laravel encourages the use of HTTPS, ensuring secure data transmission.<\/li><\/ul><h3 class=\"wp-block-heading has-ast-global-color-2-color has-text-color has-link-color wp-elements-d2c7c5925902544d8c2f0be6ffd2fc8d\" id=\"Seamless-Performance-and-Speed\">Improved SEO and Discoverability<\/h3><ul class=\"wp-block-list\"><li>SEO-friendly URLs: Laravel\u2019s routing system supports SEO-friendly URLs, improving search engine rankings.<\/li>\n\n<li>Meta Tag Management: Laravel makes it easy to manage meta tags and other SEO elements.<\/li><\/ul><h3 class=\"wp-block-heading has-ast-global-color-2-color has-text-color has-link-color wp-elements-495a3719d72b22f8f44d8173fc0eb1c6\" id=\"Seamless-Performance-and-Speed\">Superior Developer Experience<\/h3><ul class=\"wp-block-list\"><li>Comprehensive Documentation: Laravel offers extensive and well-organized documentation.<\/li>\n\n<li>Active Community: Laravel has a large, active community providing support, packages, and tools.<\/li><\/ul><div class=\"wp-block-uagb-advanced-heading uagb-block-4f95e8c4\"><h2 class=\"uagb-heading-text\">Prerequisites<\/h2><\/div><p>Before we start, ensure you have the following installed on your system:<\/p><ul class=\"wp-block-list\"><li>PHP (&gt;= 7.2)<\/li>\n\n<li>Composer<\/li>\n\n<li>Node.js and npm<\/li>\n\n<li>Laravel CLI<\/li><\/ul><div class=\"wp-block-uagb-advanced-heading uagb-block-9314addb\"><h2 class=\"uagb-heading-text\">Step 1: Setting up a New Laravel Project<\/h2><\/div><p>First, create a new Laravel project using Composer:<\/p><pre class=\"wp-block-code\"><code>composer create-project --prefer-dist laravel\/laravel pwa-laravel<\/code><\/pre><p>Navigate to the project directory:<\/p><pre class=\"wp-block-code\"><code>cd pwa-laravel&nbsp;<\/code><\/pre><div class=\"wp-block-uagb-advanced-heading uagb-block-eefa006c\"><h2 class=\"uagb-heading-text\">Step 2: Setting Up a Laravel PWA Package<\/h2><\/div><p>To quickly scaffold the PWA features, we will use a Laravel PWA package. One popular package is <code>laravel-pwa<\/code>.<\/p><p>Install the package using Composer:<\/p><pre class=\"wp-block-code\"><code>composer require ladumor\/laravel-pwa<\/code><\/pre><p>After installation, publish the configuration file:<\/p><pre class=\"wp-block-code\"><code>php artisan laravel-pwa:publish<\/code><\/pre><p>This command will create a configuration file (<code>config\/pwa.php<\/code>) where you can customize your PWA settings.<\/p><div class=\"wp-block-uagb-advanced-heading uagb-block-8c580d6a\"><h2 class=\"uagb-heading-text\">Step 3: Configuring the PWA<\/h2><\/div><p>Open the <code>config\/pwa.php<\/code> file and configure your PWA settings. Below is an example configuration:<\/p><pre class=\"wp-block-code\"><code>return &#91;\n'name' =&gt; 'My Laravel PWA',\n'short_name' =&gt; 'LaravelPWA',\n'start_url' =&gt; '\/',\n'background_color' =&gt; '#ffffff',\n'theme_color' =&gt; '#007bff',\n'display' =&gt; 'standalone',\n'orientation' =&gt; 'any',\n'icons' =&gt; &#91;\n&nbsp;&nbsp;&nbsp;&nbsp; '72x72' =&gt; &#91;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'path' =&gt; '\/images\/icons\/icon-72x72.png',\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'purpose' =&gt; 'any'\n&nbsp;&nbsp;&nbsp;&nbsp; ],\n&nbsp;&nbsp;&nbsp;&nbsp; '96x96' =&gt; &#91;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'path' =&gt; '\/images\/icons\/icon-96x96.png',\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'purpose' =&gt; 'any'\n&nbsp;&nbsp;&nbsp;&nbsp; ],\n&nbsp;&nbsp;&nbsp;&nbsp; '128x128' =&gt; &#91;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'path' =&gt; '\/images\/icons\/icon-128x128.png',\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'purpose' =&gt; 'any'\n&nbsp;&nbsp;&nbsp;&nbsp; ],\n&nbsp;&nbsp;&nbsp;&nbsp; '144x144' =&gt; &#91;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'path' =&gt; '\/images\/icons\/icon-144x144.png',\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'purpose' =&gt; 'any'\n&nbsp;&nbsp;&nbsp;&nbsp; ],\n&nbsp;&nbsp;&nbsp;&nbsp; '152x152' =&gt; &#91;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'path' =&gt; '\/images\/icons\/icon-152x152.png',\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'purpose' =&gt; 'any'\n&nbsp;&nbsp;&nbsp;&nbsp; ],\n&nbsp;&nbsp;&nbsp;&nbsp; '192x192' =&gt; &#91;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'path' =&gt; '\/images\/icons\/icon-192x192.png',\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'purpose' =&gt; 'any'\n&nbsp;&nbsp;&nbsp;&nbsp; ],\n&nbsp;&nbsp;&nbsp;&nbsp; '384x384' =&gt; &#91;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'path' =&gt; '\/images\/icons\/icon-384x384.png',\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'purpose' =&gt; 'any'\n&nbsp;&nbsp;&nbsp;&nbsp; ],\n&nbsp;&nbsp;&nbsp;&nbsp; '512x512' =&gt; &#91;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'path' =&gt; '\/images\/icons\/icon-512x512.png',\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 'purpose' =&gt; 'any'\n&nbsp;&nbsp;&nbsp;&nbsp; ],\n],\n'offline' =&gt; &#91;\n&nbsp;&nbsp;&nbsp;&nbsp; 'page' =&gt; 'offline'\n]\n];<\/code><\/pre><div class=\"wp-block-uagb-advanced-heading uagb-block-93044246\"><h2 class=\"uagb-heading-text\">Step 4: Adding Service Worker<\/h2><\/div><p>Service workers are at the core of any PWA, enabling features like offline access and push notifications. The <code>laravel-pwa<\/code> package automatically generates a service worker file for you.<\/p><p>To customize your service worker, you can edit the <code>public\/serviceworker.js<\/code> file. For a basic setup, you might not need to make significant changes here, but you can add custom caching strategies or background sync as needed.<\/p><div class=\"wp-block-uagb-advanced-heading uagb-block-4206620c\"><h2 class=\"uagb-heading-text\">Step 5: Creating the Manifest File<\/h2><\/div><p>The manifest file is a JSON file that tells the browser about your PWA and how it should behave when installed on a device. The <code>laravel-pwa<\/code> package automatically generates the manifest file based on your configuration in <code>pwa.php<\/code>.<\/p><p>To customize the manifest, you can modify the <code>config\/pwa.php<\/code> file or directly edit the generated <code>public\/manifest.json<\/code> file.<\/p><div class=\"wp-block-uagb-advanced-heading uagb-block-87bf3709\"><h2 class=\"uagb-heading-text\">Step 6: Handling Offline Pages<\/h2><\/div><p>Create an offline page that will be shown when the user is offline. Create a new Blade template <code>resources\/views\/offline.blade.php<\/code> and add your offline message:<\/p><pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Offline&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;h1&gt;You're offline&lt;\/h1&gt;\n&lt;p&gt;Please check your internet connection and try again.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre><p>In your <code>web.php<\/code> routes file, add a route to handle the offline page:<\/p><pre class=\"wp-block-code\"><code>Route::get('\/offline', function () {\nreturn view('offline');\n});<\/code><\/pre><div class=\"wp-block-uagb-advanced-heading uagb-block-e3ba636f\"><h2 class=\"uagb-heading-text\">Step 7: Testing Your PWA<\/h2><\/div><p>To test your PWA, ensure your development server is running:<\/p><pre class=\"wp-block-code\"><code>php artisan serve<\/code><\/pre><p>Visit <code>http:\/\/localhost:8000<\/code> in your browser. Open the browser&#8217;s developer tools and navigate to the &#8220;Application&#8221; tab. You should see your PWA manifest, service worker, and other settings configured correctly.<\/p><div class=\"wp-block-uagb-advanced-heading uagb-block-75ba3a24\"><h2 class=\"uagb-heading-text\">Step 8: Making Your PWA Installable<\/h2><\/div><p>For a PWA to be installable, it needs to meet certain criteria, such as having a valid manifest file and serving all files over HTTPS. In a production environment, ensure your application is served over HTTPS. You can use services like Let&#8217;s Encrypt to obtain a free SSL certificate.<\/p><div class=\"wp-block-uagb-advanced-heading uagb-block-4bbdfd46\"><h2 class=\"uagb-heading-text\">Step 9: Enhancing the PWA<\/h2><\/div><h3 class=\"wp-block-heading has-ast-global-color-2-color has-text-color has-link-color wp-elements-74dcf37c3d7d36bc8e6cffeba5a32638\">Push Notifications<\/h3><p>To add push notifications, you will need to integrate with a push service like Firebase Cloud Messaging (FCM). This involves configuring FCM, adding necessary scripts to your application, and handling push events in your service worker.<\/p><h3 class=\"wp-block-heading has-ast-global-color-2-color has-text-color has-link-color wp-elements-6a5caf50a668250847754f49a9653b88\" id=\"Background-Sync\">Background Sync<\/h3><p>Background sync allows your PWA to defer actions until the user has a stable internet connection. This can be useful for sending data collected offline to the server once connectivity is restored. You can implement background sync by adding sync events to your service worker.<\/p><div class=\"wp-block-uagb-advanced-heading uagb-block-27dba921\"><h2 class=\"uagb-heading-text\">Conclusion<\/h2><\/div><p><a href=\"https:\/\/www.directimpactsolutions.com\/en\/Laravel-Web-Development\/\">Building a Progressive Web Application with Laravel<\/a> is a straightforward process, thanks to the robust tools and libraries available. By following this step-by-step guide, you can create a PWA that offers an enhanced user experience with offline capabilities, push notifications, and an app-like interface. As PWAs continue to grow in popularity, leveraging their features can provide significant benefits to your users and your business. Start building your Laravel PWA today and take advantage of the powerful combination of web and mobile technologies.<\/p>","protected":false},"excerpt":{"rendered":"<p>Progressive Web Applications (PWAs) are becoming increasingly popular due to their ability to offer a seamless and engaging user experience. Combining the best features of web and mobile applications, PWAs are fast, reliable, and installable, providing users with an app-like experience directly from their web browsers. Laravel, a robust PHP framework, makes building PWAs more &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.directimpactsolutions.com\/en\/building-pwa-with-laravel\/\"> <span class=\"screen-reader-text\">Building a Progressive Web Application (PWA) with Laravel: a Step-by-Step Guide<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":6,"featured_media":17583,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","footnotes":""},"categories":[32],"tags":[],"class_list":["post-17581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-applications"],"uagb_featured_image_src":{"full":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248.jpg",1397,750,false],"thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248-150x150.jpg",150,150,true],"medium":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248-300x161.jpg",300,161,true],"medium_large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248-768x412.jpg",768,412,true],"large":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248-1024x550.jpg",1024,550,true],"1536x1536":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248.jpg",1397,750,false],"2048x2048":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248.jpg",1397,750,false],"woocommerce_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248-300x300.jpg",300,300,true],"woocommerce_single":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248-600x322.jpg",600,322,true],"woocommerce_gallery_thumbnail":["https:\/\/www.directimpactsolutions.com\/wp-content\/uploads\/2024\/07\/iStock-1316449248-100x100.jpg",100,100,true]},"uagb_author_info":{"display_name":"Direct Impact Solutions","author_link":"https:\/\/www.directimpactsolutions.com\/en\/author\/direct-impact-solutions\/"},"uagb_comment_info":1,"uagb_excerpt":"Progressive Web Applications (PWAs) are becoming increasingly popular due to their ability to offer a seamless and engaging user experience. Combining the best features of web and mobile applications, PWAs are fast, reliable, and installable, providing users with an app-like experience directly from their web browsers. Laravel, a robust PHP framework, makes building PWAs more&hellip;","_links":{"self":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/17581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/comments?post=17581"}],"version-history":[{"count":7,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/17581\/revisions"}],"predecessor-version":[{"id":20783,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/posts\/17581\/revisions\/20783"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/media\/17583"}],"wp:attachment":[{"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/media?parent=17581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/categories?post=17581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.directimpactsolutions.com\/en\/wp-json\/wp\/v2\/tags?post=17581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}