Progressive Web Applications (PWA) Quick Start Sample Project with Vue.js

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! ⭐️

If you like or are using this project to learn or start your solution, please give it a star. Thanks!

Tools & APIs

Web Frameworks & Plug-ins

• Vue.js - The Progressive JavaScript Framework
• Vuetify - Material design component framework
• Veutify Material Dashboard - Boilerplate code for dashboard based on Vuetify
• Vue CLI PWA - PWA Plug-in.
• Axios - Promised based http client.

Web API's / SDK's

• Open Weather Web Api - Free web api providing weather forecast data in json format.
• Cors-anywhere - Global proxy to support CORS.
• HERE Maps API - Map api for reverse geo code look-up.
• Firebase JavaScript SDK - Software Developer Kit for firebase.

Recommended Tools

• Vue CLI - Standard tooling for Vue.js Development
• Yarn - Package management
• Visual Studio Code - IDE
• Chrome DevTools - Browser based developer tools.

Storage

• Firebase Database - Realtime database from google cloud enables syncing across devices.
• HTML5 Web Storage - 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 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
• Progressive Web App 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!