How to Build Progressive Web Apps Using Laravel?

When something is counted among the best in the world, it is always for a good reason. According to leading analytics firm Statista, Laravel is:

1. Number three on the “most popular PHP tech stack skill” index. Translation: The demand for developers who are well versed in Laravel is soaring sky-high, and is only set to increase. This indicates that Laravel-powered applications will be on the rise.
2. Used by over a tenth of software developers in 2022,worldwide. Translation: One in every ten developers has used laravel while developing their PHP application at some point in their development process over 2022.

Thus, Laravel is gradually coming to the forefront of PHP development, as it rightly should. It is one of the best suited frameworks to develop a PWA (Progressive Web Application).

Not only that, Laravel is also extremely well suited to the task of converting an undeployed project into a progressive web application.

Table of Contents

Through the course of this article, we will go through the following:

What is Laravel ?

Laravel is a backend framework that, in its own words, “attempts to take the pain out of development.” It does this by reducing the effort it takes to execute common development tasks such as routing, authentication, caching  and sessions.

When it comes to server based SQL, Laravel supports (currently) four systems: MySQL, SQLite, SQL Server and Postgres.

Laravel also has built-in support for cloud file storage systems (Amazon S3, for example), which comes in handy down the line.

Also worth noting is that with its increased popularity, to hire Laravel developer(s) is an extremely expensive process. Here is the data we tabulated for hiring acquisition costs for Laravel developers:

Note: All figures are in USD.

That said, there is an emerging trend in the development industry that could help you save a significant amount of money. It is called “remote outsourcing” when you hire Laravel developers, and it can absolutely slash costs.

Remote outsourcing of even a small part of your development team will lead to huge cost reduction, and this is in addition to giving you access to a truly global talent pool that is not limited by the restrictions of geographical boundaries.

What are PWAs?

Standing for “Progressive Web Applications”, a PWA is essentially an application that likes to live on the boundary edge between web apps and native, on-device applications.

Your web browsers have, over the past few years, transformed themselves into application platforms, giving apps access to your camera, location, push notifications (use these sparingly!) and other such phone services that apps need to function smoothly.

The introduction of HTML5 furthered the possibilities of the apps by giving developers the tools to use sessionStorage and similar functionalities.

You can even pin shortcuts to these apps on your home screen or taskbar, and service workers can asynchronously cache data and files, making most of the apps functionalities available offline.

Thus, to cut a very long story short, a PWA is a website that behaves like a mobile application that was natively developed.

What Are The Benefits of PWAs?

The pros of PWAs are myriad for those who deploy it. Some of the salient pros of PWAs (Progressive Web Applications) are given as under:

1. Cost Effective: Progressive Web Applications are much cheaper to build than native android or iOS applications.
2. Search Engine Optimization: Elements of a PWA are included in SERP (Search Engine Results Page) ranking
3. Storage Use: Unless you are overusing the localStorage function, the amount of on board storage used by a Progressive Web Application is minimal in comparison to native applications.
4. Offline Use: You are able to use properly configured Laravel PWAs offline or with poorly fed networks with minimal disruption to functionalities of the Progressive Web Application.
5. Freedom of Deployment: A Laravel PWA, like all other Progressive Web Applications is found and installed over search engines and web browsers, making it free of the restrictions put on applications by marketplaces such as the Apple App Store and Goole’s Play Store.

Building a PWA With Laravel: How To?

Laravel has made it extremely easy to make a PWA. You can make a Laravel PWA from scratch ith Java and HTML, or you can simply download, install, customize and upload a preconfigured Laravel PWA PHP package, many of which can be found on GitHub.

Step One: The first step is to configure the manifest.json file attributes.

The Reason: this json file is basically navigation data for the web browser that tells it what to take and from where.

Here is the sample code for the file:

{

"short_name": "(Abbreviated Application Name Here)",

"name": "(Full Application Name Here)",

"icons": [

{

"src": "/images/(image-path-here)",

"type": "image/png",

"sizes": "(Size)x(Size)"

},

{

"src": "/images/(image-path-here)",

"type": "image/png",

"sizes": "(Size)x(Size)"

}

],

"start_url": "/",

"background_color": "(Hex Code Here)",

"display": "standalone",

"scope": "/",

"theme_color": "Hex Code Here"

}

Now you need to add this to your public directory.

If you want, you can also add the “orientation”: “Any” and Splash inserts, along with a custom [ ] section if you want.

Another way of going through this process is to directly install and publish a composer package and then publish its assets by running composer require silviolleite/laravelpwa

After installing the Laravel PWA package, you can find a file named “laravelpwa.php”, which will have all this necessary code which can then be customized.

Many of these packages can be found on GitHub, and a fine example is linked here.

Remember to put your images and customize them in the public/images/icons directory and set their purpose to “any.”

You will also need to include a blade directive in the layout, in order to make your assets available whilst in the browser. You can do this by including the @laravelpwa tag in the code before you close the <head> tag, i.e, somewhere between <head> and </head>.

Step Two: Link the above file to your HTML code.

Doing this in the “layout” is the best way forward.

Sample code is given as under:

<link rel="manifest1" href="/manifest1.json">

<meta name="web-capable-mobile" content="Yes">

<meta name="starturl" content="/">

<meta name="viewport" content="width=(Set-Width-Here), initial-scale=(Desired-Scale-Here), shrink-to-fit=(Yes-Or-No-Here)">

<meta name="theme-color" content="(Hex Code Here)">

Step 3: Offline Redundancy

In the event of network disconnections, you need to add a route that will display a default look in this case. You can do this by modifying the routes/web.php files and adding a return view (path) element within a Route::(NoNetwork) class.

Step 4: The Service Worker

If you have installed a Laravel PWA config pack, then there is by default a service worker code that can be executed and will run with any application right out of the box.

You can also install any package that takes your fancy with Laravel PWA configs, but that is an article for another day.

The customizable file for this default service worker (in the Laravel PWA Git repository that we linked to above) can be found on the following path: public_path/serviceworker.js

NOTE: If you are making a custom event listener enables service worker for your Laravel PWA app; then make sure to keep the sw.js and manifest.json on the same level to avoid audit errors.

Final Thoughts

And that was the quickest way to build an HTML based Laravel PWA that runs as smoothly as if it were natively designed.

That being said, a lot more can be done in the way of offline customizations, reducing load times, adding shortcuts, and more, but all that is a tale for another article and another day altogether.

We hope that this article has been of some help to you, and that you will be able to benefit from the little tip we gave you when you look to hire Laravel developers.