Progressive Web Applications (PWA) Quick Start Sample Project with Vue.js
Tags: announcement, pwa, vue, spa
Published: 2019-08-28 06:59:36

---
title: Progressive Web Applications (PWA) Quick Start Sample Project with Vue.js
published: true
description: This post introduces you a sample project exploring Progressive Web Applications (PWA) features like offline functionalities
tags: announcement, pwa, vue.js, spa
---

Progressive Web Applications (PWA) are re-defining web user experience just like  native applications, with offline, notification support etc.

Vue.JS is being one of the primary frameworks driving web experience into next level with PWA.

Been experimenting with it recently, and built a simple weather application from scratch.

People who are interested about PWA can check the following github repo to see how easy to build PWA with VueJS. 

## PWA Weather Application Features

- Ability to view hourly and daily weather forecast for given city
- Ability to select city based on current location
- Ability to save favourite city (with offline capability)
- Offline ability to view UI and weather data
- Ability to show offline status

## Give a Star! :star:

If you like or are using this project to learn or start your solution, please give it a [star](https://github.com/AshrafAlam/vue.pwa.weather.app). Thanks!

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2t0exe8wl8cqa7fno72x.PNG)

## Tools & APIs

### Web Frameworks & Plug-ins

- [Vue.js](https://vuejs.org/) - The Progressive
  JavaScript Framework
- [Vuetify](https://vuetifyjs.com/en/) - Material design component framework
- [Veutify Material Dashboard](https://www.creative-tim.com/product/vuetify-material-dashboard) - Boilerplate code for dashboard based on Vuetify
- [Vue CLI PWA](https://naturaily.com/blog/pwa-vue-cli-3) - PWA Plug-in.
- [Axios](https://github.com/axios/axios) - Promised based http client.

### Web API's / SDK's

- [Open Weather Web Api](https://openweathermap.org/api) - Free web api providing weather forecast data in json format.
- [Cors-anywhere](https://cors-anywhere.herokuapp.com) - Global proxy to support CORS.
- [HERE Maps API](https://developer.here.com/documentation/maps/topics/overview.html) - Map api for reverse geo code look-up.
- [Firebase JavaScript SDK](https://firebase.google.com/docs/web/setup) - Software Developer Kit for firebase.

### Recommended Tools

- [Vue CLI](https://cli.vuejs.org/) - Standard tooling for Vue.js Development
- [Yarn](https://yarnpkg.com/en/) - Package management
- [Visual Studio Code](https://code.visualstudio.com/) - IDE
- [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/) - Browser based developer tools.

### Storage

- [Firebase Database](https://firebase.google.com/docs/database) - Realtime database from google cloud enables syncing across devices.
- [HTML5 Web Storage](https://www.w3schools.com/html/html5_webstorage.asp) - Browser local storage to store offline data.

## Getting Started

### Clone the Repository

Clone the repository from the following location:

    https://github.com/AshrafAlam/vue.pwa.weather.app.git

### Install

Open command prompt and navigate to the directory where the above source is cloned.

Run the following command to install required packages:

    yarn install

Check [here](https://yarnpkg.com/lang/en/docs/getting-started/) to get started with yarn package management.

### Run in Local Environment

Run the following command to run the application in local development server

    yarn serve

Open the application in browser: http://localhost:8080.

### Build Production Output

Run the following command to build production output to be deployed in production server

    yarn build

## References
* [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/)
* [Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist)

## Keep Connected!
Will be writing articles providing details of the technologies and architecture. You can watch or mark star the repo for future updates.

https://github.com/AshrafAlam/vue.pwa.weather.app

Enjoy!