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
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!
Top comments (0)