Progressive web apps are a way to bring native app feeling into normal or traditional web apps. Indeed, with PWAs we can now enhance our website with mobile app features which increase a lot the usability and offer great user experience to our end-users.
In this article, we are going to build a PWA from scratch with HTML, CSS, and JavaScript. So, let’s get started by an important question: What the heck is PWA?
Sorry for the interrupt!
If you’re interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)
It’s an affiliate link, so by purchasing, you support the blog at the same time.
- What is Progressive Web App (PWA)?
- Markup
- Styling
- Show data with JavaScript
- Web App Manifest
- What is Service Worker?
- Cache the assets
- Fetch the assets
- Register the Service Worker
- Final thoughts
- Next steps
What is Progressive Web App (PWA)?
A Progressive Web App is a web app that delivers an app-like experience to users by using modern web capabilities. In the end, it’s just your regular website that runs in a browser with some enhancements like the ability:
- To install it on a mobile home screen
- To access it when offline
- To access the camera
- Get push notifications
- To do background synchronization
And so much more.
However, to be able to transform our traditional web app to a PWA, we have to adjust it a little bit, by adding a web app manifest file and a service worker.
Don’t worry about these new terms, we’ll cover them later.
But First, we have to build our web app or traditional web app if you want too. So, Let’s start with the markup.
#html #css #javascript
