Convert your Website into a PWA

Ever thought only React apps could be Progressive Web Apps?

Akshat Gupta
Sep 22 · 3 min read

In this tutorial, we will learn how to convert any given website made using basic or no frameworks into a PWA.

Progressive Web App
Progressive Web App
Image Source: https://ionicframework.com/blog/what-is-a-progressive-web-app/

What is a PWA?

PWA stands for Progressive Web App. This is an app built from the web technologies we all know and are proficient in (like HTML, CSS, and JavaScript) but with a feel and functionality that rivals an actual native app. A PWA runs in the browser and once saved to the home screen, functions like a native app.

What is a Native App?

A native app is nothing but a mobile app built in a specific programming language, for a specific device platform, either iOS or Android.

Why are Native Apps better than a Website?

Native Apps work offline, send push notifications, are faster, use device features (geolocation, contacts, etc), are more interactive and easy to use and access.

PWA versus Native Apps?

PWAs have several advantages:
1. You don’t need to put it up on the Google Play Store and App Store separately.
2. Cheaper to build.
3. Same code works for both phones and websites (it needs to be a responsive site though).
4. Fast and lightweight (mobile apps eat up device storage).
5. PWAs are discoverable via search engines (which have a lot larger audience than App Stores).

How is a PWA installed?

Android:

Android add PWA to Home Screen.
Android add PWA to Home Screen.
Automatically appears when you open the website on Android Phones.

iOS:

Add to Home Screen on iOS devices.
Add to Home Screen on iOS devices.
A little more work to save a PWA onto your iOS device.

Desktop:

Add to Home Screen for Web.
Add to Home Screen for Web.
Automatic pop-up on desktops and laptops.

Now that you know what a PWA is and how it works, let’s see how we can actually make our responsive website into a PWA.

Convert Website to a PWA:

  1. First we create a Service Worker file (sw.js) on the root of the project (same place where index.html and all your other files are).

Add all your files and assets in the filesToCache and copy paste the rest. Replace app-name with the name of your app in the install event listener.

2. Create a manifest.json file in the root of the project.

Use your own description, names, theme color and background color in the above file. Save logos (the app icon you would like to show) in the sizes mentioned above in the right directories.

3. Add a favicon and apple-touch-icon in your html files. Then add the theme-color meta tag with all other meta tags you may already have.

4. Add the following code to the end of your <head> tag in your index.html file:

Deploy your website with these changes and you’re good to go.

Your website has now been converted into a web app.

I hope you understood through this blog what a PWA is, how it works and how you can convert a normal website into a PWA.

CodeChef-VIT

CodeChef-VIT, one of the CodeChef chapters started in 2015…

Akshat Gupta

Written by

Web Developer with keen interest in SEO & Digital Marketing.

CodeChef-VIT

CodeChef-VIT is a non-commercial organisation with a goal is to provide a platform for programmers and developers everywhere to meet, compete and have fun.

Akshat Gupta

Written by

Web Developer with keen interest in SEO & Digital Marketing.

CodeChef-VIT

CodeChef-VIT is a non-commercial organisation with a goal is to provide a platform for programmers and developers everywhere to meet, compete and have fun.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store