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.