Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
React Progressive Web App Online / Offline warning message hook
import React, { useState, useEffect } from 'react';
function PWAOfflineStatus(props) {
const [isOnline, setOnlineStatus] = useState(true);
useEffect(() => {
const setFromEvent = function(event) {
if(event.type === 'online') {
else if(event.type === 'offline') {
window.addEventListener("online", setFromEvent);
window.addEventListener("offline", setFromEvent);
return() => {
window.removeEventListener("online", setFromEvent);
window.removeEventListener("offline", setFromEvent);
return !isOnline ? (
<h5 className='pwa-warning'>
You are currently offline. <br/> Access to the application might be limited.
<style jsx>{`
.pwa-warning {
background-color: orange;
color: black;
text-align: center;
padding: 10px;
</>) : null;
export default PWAOfflineStatus;

To use simply include this in your app via:

<PWAOfflineStatus />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.