Make Your WebApp or Admin Panel Installable as a Mobile App
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 th...
Karan Datwani
Share:
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 th...
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!
 |
 |
|---|
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.
Here’s how you can make your web app installable as a mobile app with a simple manifest file.
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"
}
]
}
<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.
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.
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.
Subscribe to our "Article Digest". We'll send you a list of the new articles, every week, month or quarter - your choice.
What do you think about this?
Wondering what our community has been up to?
