/weather-app

Primary LanguageTypeScript

WeatherApp

i use the service worker implementation of the Angular framework to build a PWA that displays the weather of a city using the OpenWeather API

the project cover this topics

  • Angular service worker
  • Angular PWA
  • Setting up the OpenWeather API
  • Displaying weather data
  • Enabling offline mode with the service worker
  • Staying up to date with in-app notifications
  • Deploying our app with Firebase hosting

PWA

A PWA application is a web application that is based on the following pillars to convert into a native one:

  • Capable: It can access locally saved data and interact with peripheral hardware that is connected to the device of the user.
  • Reliable: It can have the same performance and experience in any network connection, even in areas with low connectivity and coverage.
  • Installable: It can be installed on the device of the user, can be launched directly from the home screen, and interact with other installed native applications

Project overview

In this project, we will build a PWA application to display the weather conditions of a city. Initially, we will learn how to configure the OpenWeather API, which we will use to get weather data. We will then learn how to use the API to display weather information in an Angular component. We will see how to convert our Angular application into PWA using a service worker. We will also implement a notification mechanism for our application updates. Finally, we will deploy our PWA application into the Firebase hosting provider