React Weather App: Progressive Web App

Hello friends,

Today I’m going to show you How to create a Progressive Web APP with React JS.

Today, We are creating a Weather App first let's see how its looks like after completion https://weather-app-raj.netlify.app/

You can see all the code here https://github.com/rajprajapat7/weather-app

Lets Start Coding

First, we have to create a react app

npx create-react-app weather-app
cd weather-app

To get weather data we use RapidApi (it is free of cost)

https://rapidapi.com/community/api/open-weather-map

Create a Text Box which takes input for the city name. In the demo, I’m using a material-ui autocomplete-combo box. It is your choice how you are selecting the city.

After selecting the city you just need to call API with authorized rapidapi-key you will get this on the link given above.

You will get JSON data, render this data as per your choice.

Let's Come to our main focus point: Progressive web APP.

So First What is Progressive web APP?

In the simple term, We can say. An Application built with web technologies like HTML, CSS, JS & intended to work on any platform that uses a standards-compliant browser, including both (Mobile or Desktop).

Open up Chrome Dev Tools in your browser and toggle to the Lighthouse tab.

If there is no tab like a lighthouse you can get chrome extension easily from chrome store

Select option progressive web App and mobile and Generate Report.

Now we need to create a Service worker it will help load your application from the cache if slow network at mobile.

Create a new worker.js file in the public folder (public/worker.js) and add the following code:

var CACHE_NAME = 'weather-app';
var urlsToCache = [
'/',
'/completed'
];
// Install a service worker
this.addEventListener('install', event => {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
// Cache and return requests
this.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
// Update a service worker
this.addEventListener('activate', event => {
var cacheWhitelist = ['pwa-weather-app'];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});

Also, create a file (src/serviceWorker.js) and add the following code:

// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read http://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit http://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}

Then Update (src/Index.js) and add this code:

import * as serviceWorker from './serviceWorker';
serviceWorker.register();

Then Update (public/index.html) Add this code in HTML body

<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('worker.js').then(function(registration) {
console.log('Worker registration successful', registration.scope);
}, function(err) {
console.log('Worker registration failed', err);
}).catch(function(err) {
console.log(err);
});
});
} else {
console.log('Service Worker is not supported by browser.');
}
</script>

The last thing create a new images folder in the public folder (public/images). Add the Splash icon image to the folder (named“logo512.png”). To handle its configuration you can see manifest.json but you don’t need to worry about it. It will automatically manged. Image size should be 512*512.

{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}

menifest.json having code something like this

Done: Just Restart an app turn of the internet and reload you see the an working app page without internet.

Re-Generate Lighthouse report. May be you will found error for HTTPS connection but don’t think about it now it will automatically removed then we deploy and add SSL.

Congratulations, You have created a Working Progressive React Weather app!