Karan Datwani's Blog

Make Your WebApp or Admin Panel Installable as a Mobile App

Karan Datwani's photo
Karan Datwani
·

3 min read

Ever noticed a little icon or popup on your browser asking you to install the web app you're currently browsing? It’s a cool feature that lets users add a web app directly to their mobile home screen, just like a native app. Let's walk through how you can make your web app or admin panel installable!

image

What Is a Progressive Web App (PWA)?

A quick primer: this feature is part of what’s called a Progressive Web App (PWA). PWAs make your web app feel more like a native app, with the ability to be installed on a user’s device directly from their browser.

Spotify has it, I've seen many e-commerce using it. I personally utilize it for my e-commerce and some other mini-web apps.

How to Make Your Web App Installable

Here’s how you can make your web app installable as a mobile app with a simple manifest file.

  1. Create a Manifest File: In your public directory, create a site.webmanifest with details like your app's name, start URL, and icons. Here’s a basic example:
{
    "name": "My Laravel Web App",
    "short_name": "WebApp",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "/images/icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/images/icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}
  1. Link the Manifest: Add this to the <head> of your main Blade layout:
<link rel="manifest" href="{{ asset('/site.webmanifest') }}">

And that’s it! Your Laravel web app is now ready to be installed on mobile devices directly from the browser. Visit your web app on a mobile or desktop browser like Chrome, or Safari. If everything is configured correctly, you should see an "Add to Home Screen" or "Install App" option added in the browser menu. You may also see a popup for the same if your browser supports it. Tap it and your web app will be installed just like a native mobile app.

Make Your Backpack AdminPanel Installable

Some apps or sites may not make sense to offer this feature to the public, but offering the admin panel as a native mobile app would definitely be a good experience for admins.

Backpack offers you to do the above with just a command:

php artisan backpack:publish-header-metas

This command will ask you a few questions, and then it will publish the necessary files and add the headers. Later, you customize them to fit your branding.

Conclusion

With a simple manifest file and a meta link in your Blade or HTML template, you can make your web app or admin panel installable on mobile devices. Try it out and make your web app more engaging!

And… Suppose you or your admin want real-time mobile notifications from your Laravel app. For example, when an order is received. In that case, You should check out our other article on receiving Slack notifications from your Laravel app with a 10-minute setup.

Web DevelopmentMobile DevelopmentPWAHTML5