CodeChef-VIT
Published in

CodeChef-VIT

Convert your Website into a PWA

Ever thought only React apps could be Progressive Web Apps?

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

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.
Automatically appears when you open the website on Android Phones.

iOS:

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.
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 is a non-commercial organisation with a goal is to provide a platform for programmers and developers everywhere to meet, compete and have fun.

Recommended from Medium

Differences between Ruby and Javascript

Integrate TypeScript in your Vue project

201 — Blog 5

Reverse Words

Working With ShouldProcess

Arrays and Maps in Solidity

How to make friends Angular Material Virtual Scroll and Drag&Drop List with each other?

React Native vs Flutter. which is worth to learn in 2020

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
Akshat Gupta

Akshat Gupta

Web Developer with keen interest in SEO & Digital Marketing.

More from Medium

A Walkthrough for fetching API

How to create WordPress theme with TailwindCSS in modern theme development

HTML — Part -1

Tailwind CSS