Livewire Offline Component
Livewire has a feature called Offline State. This can be used to notify the User that they have lost their Internet Connection and are offline. You just need to add the wrap:offline
attribute to a div like below:
<div wire:offline>
You are now offline.
</div>
And this div will only be displayed when user goes offline. In this Tutorial, we will show how to implement this functionality into any existing Livewire Project.
We will create a Livewire Component using below command:
php aritsan make:livewire Offline --inline
This will create a file at app/Http/Livewire/Offline.php
.
class Offline extends Component
{
public function render()
{
return <<<'blade'
<div>
</div>
blade;
}
}
We will then change the render method to return following Output.
<div wire:offline class="fixed top-4 left-1/2">
<div class="relative -left-1/2 text-red-600 bg-yellow-500 px-4 py-2 font-bold">
You are currently offline!
</div>
</div>
Here we are using Tailwind CSS Classes to fix the Div position at the top of the screen and centered horizontally. See the usage of attribute wire:offline
which makes sure that this will only display when the User is offline.
Now you just need to include this component in the Layout like below:
@livewire('offline')
And that’s it, any time user goes offline, the warning will be displayed to the user like below
Hope you have enjoyed this Tutorial.
Originally published at http://www.ascsoftwares.com on May 14, 2021.