How To Make App From Website?

A mobile application is something that has become a necessity for any organization or a web service. ( because People want to use services on the go, They just don’t want to open Laptop for it )

Hence, Building a mobile application becomes a mandate for your business or service. (if you really want to scale your business) 

So, You think Building an app requires extensive mobile development skill, right? 

Or, You will have to hire a mobile developer if, you just can’t do it yourself. (which will cost you pretty high)

But wait, Why not convert website into app Instead ?

Yes , and that too in no time.

Stick to this article, you will get to know how to make website to app(in under 3 Minutes).

What’s a PWA ( Progressive Web Application ) ?

PWA’s are web applications that use existing browser APIs, to build native app-like user experience for cross-platform web applications.

In simple words, PWA’s leverage web apps to render website as a native-app interface, (with minimal resources ).

PWA’s boosts the offline user experience for mobile users. (so that you don’t need to open any browser for it )

What do we need to Build a PWA?

Building PWA is super easy, Your website can become a PWA If it meets following requirement :-

HTTPS ( Mandatory) – You serve your web applications with HTTPS (Secured Network).

Service Workers – Service workers are the core of any PWA, They signify How your web application interacts with web browser APIs? They determine How pages are loaded fastly, to improve offline experiences?

Manifest – Manifest has settings for your PWA, They include Icons (for different mobile devices), Start URLs for app, Splash Screens properties, etc.

Prerequisite:

First things first!

Building a mobile application out of your site comes at a minor cost. I assume your website is super responsive, so when you convert it to a mobile version, the overall user experience is not spoiled.

( If you don’t have a responsive site, you should consider building one first and then proceed further)

You need to configure STATIC DIR to serve static file . (Only needed , if you are using Django ) ( In case you don’t know , You can refer an article here)

For Simplicity, Let’s break down the overall process in 3 simple steps:

•     STEP 1 : Configure service worker
•     STEP 2 : Add Manifest.webmanifest
•     STEP 3 : Add ( service worker + manifest ) to your home page

I will be building a PWA from an existing Django app. (You are free to choose any technology stack since PWA’s are not technology-specific)

Configure Service Worker

It’s time to add a service worker for our PWA. Just follow these steps to get it done:-

Create a new file “service_worker.js” and place it in STATIC folder.

(For this to work properly, you should configure your STATIC DIRECTORY PATH in your settings.py file ) [Prerequisite]

Add below code to your service_worker.js

const cacheName = 'YOUR_APP_NAME';
const staticAssets = [
    '/',
]

self.addEventListener('install', async e => {
    const cache = await caches.open(cacheName);
    await cache.addAll(staticAssets);
    return self.skipWaiting();
});

self.addEventListener('activate', async e => {
    self.clients.claim();
});
self.addEventListener('fetch', function(event) {
    const promiseChain = doSomethingAsync()
        .then(() => doSomethingAsyncThatReturnsAURL(event))
        .then(someUrl => fetch(someUrl));
    event.respondWith(promiseChain);
});

Add Manifest.webmanifest

As stated Manifest decides the overall behavior of your PWA, it defines How your application will be presented to the user? (When your website is loaded) 

Create a new file manifest.webmanifest in the STATIC folder.

Add the below code to it.

{
    "short_name": "YOUR_APP_SHORT_NAME",
    "name": "APP_NAME",
    "description": "APP_DESCRIPTION",
    "icons": [{
        "src": "APP_ICON_PATH",
        "type": "image/png",
        "sizes": "512x512"
    }],
    "start_url": "STARTING_URL",
    "background_color": "#3367D6",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#fff"
}

Just validate your manifest file using online validator )

Add ( service worker + manifest ) to your home page

Now, we have successfully created service_worker.js and manifest.webmanifest, out final step is to link these files to our homepage (any page you want to work as PWA)

Finally, Just add below lines of code to your homepage.

<link href="/static/manifest.webmanifest" rel="Manifest"/>
/static/service_worker.js

That’s all , You have just made an app , from your site . Wasn’t that real quick ?

Here’s the output

Once you click Install, your website will be added to your desktop as (standalone application ) or at homescreen of your mobile as (an app ).

Feel free, to ping me for any assistance in case of difficulties .