How To Make Your First Android App Using Bubblewrap

Hey everyone, today I am going to describe how you can create an app using HTML5 let’s start without wasting time. To convert web to app, first, we have to create a website. if you don’t have any published website then create a basic website.

Step 1:- Create a webpage with a Fixed Navigation Menu

Save with “Home.html” or Index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color:#383838;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Navigation Menu</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
  <p>Footer</p>
</div>

</body>
</html> 

Step 2:- Publish on Live Server

Buy a domain and hosting from “Godaddy” or “Hostinger” and publish your website on a live server. also, you can use the free server 000webhost.

Upload your file on server

Step 3:- Create a file

Create a Manifest.json file in your root folder, and paste JSON code into your manifest.json file. or generate a manifest.json file from here https://www.simicart.com/manifest-generator.html/

exp:- www.yourwebsite.com/manifest.json

{
    "name": "App_Name",
    "short_name": "Short App_Name",
    "description": "Description",
    "icons": [
        {
            "src": "url",
            "sizes": "192x192",
            "type": "image\/png",
            "purpose": "any"
        },
        {
            "src": "url",
            "sizes": "192x192",
            "type": "image\/png",
            "purpose": "maskable"
        },
        {
            "src": "url",
            "sizes": "512x512",
            "type": "image\/png",
            "purpose": "any"
        },
        {
            "src": "url",
            "sizes": "512x512",
            "type": "image\/png",
            "purpose": "maskable"
        }
    ],
    "screenshots": [
        {
            "src": "url",
            "sizes": "512x512",
            "type": "image\/png",
            "purpose": "maskable"
        }
    ],
    "background_color": "rgb(255,90,95)",
    "theme_color": "rgb(255,255,255)",
    "display": "standalone",
    "orientation": "portrait",
    "start_url": "url",
    "scope": "website url"
}

Step 4:- Install Node.JS in your System

  1. Download Node. js Installer. In a web browser, navigate to https://nodejs.org/en/download/. …
  2. Install Node. js and NPM from Browser. …
  3. Verify Installation. Open a command prompt (or PowerShell), and enter the following: node -v.

Step 5:- Install Bubblewrap

Installing Bubblewrap

npm i -g @bubblewrap/cli

Initializing an Android Project run this command

bubblewrap init --manifest https://www.yourwebsite.com/manifest.json
bubblewrap build

Boom now your app is ready… Download and check TWA App https://skoool.co/

username: testing

password: [email protected]

Comment below for series 2 “How to upload on Playstore”

Leave a Reply

Your email address will not be published. Required fields are marked *