If you are a web developer who doesn’t know about app development (like me!), This article is for you. I will teach you how to turn your website into a local app, without new framework or languages. You will learn how to transform a website into a PWA (Progressive Web app) that you can post on the Play Store.
First, we will convert your website into a progressive web app (PWA). We will then use a free command line tool called Google Bubble wrapped Package this PWA in the Android app. Let’s start.
Provisions
If you follow this tutorial as well, there are some terms:
The basic knowledge of web development
Your site should survive for the public, and you will need to access its source code.
We will use NPM to install the necessary tools, so make sure you have a node. JS is installed.
Note: This lesson is based on a White Project, but the final steps with bubbles for any web framework are the same.
The table of content
What is PWA?
PWA means Progressive web applicationAnd the purpose is to look at your website and feel like a local app. If you have visited a website in your browser and saw an install icon that allows you to download it on your phone or laptop, you have used the PWA.
But it’s not just about sight and feeling. The PWA also has features like the app, such as working offline, sending push notifications, and more.
The PWA has two major components.
The Mini Fest File describes your app, such as its name, icons, URL Start, etc.
A service worker is a background JavaScript file that works as a proxy. Catching and Push notifications are handled by a service file, which runs as a different thread besides a different thread.
Without these two components, browser will not allow users to download the app locally.
The mini -fest file and the service worker are like a checklist for browser. When you go to a website, the browser looks for these two ingredients. If they are present and are formed properly, the browser knows that this is a real PWA and will show the “install” icon, which will allow users to download the app locally. Without them, the browser only views a regular website, and the option to install will not be available.
What is the bubble wrap?
The bubble rap is a command line tool that is developed by Google that takes your PWA and transforms it into an Android app using a reliable web activity (TWA).
Bubble Warp facilitates the process of making TWA, converting PWA’s Mini Fest file into an Android app package (AP or AAB).
What is TWA (reliable web activity)?
A reliable web activity (TWA) is a modern Android feature that allows you to have a full screen display to your direct website within the Android app. Basically, it runs the website on the browser, but it does not show the browser address bar on the app. This helps to make it feel like a local app.
To unlock this full screen feature, your app needs to be “reliable”.
This is the place where the “secret handshake” comes. Android needs to make sure that the person who owns the app and the person who owns the website is the same. Without this proof of ownership, the TWA will run in the backback mode and show the browser address bar above, which will ruin the feeling of the ancestral app.
How does TWA confirm confidence
This confidence has been confirmed using a system Digital Asset Links. You have a special file on your website (we will do this in the implementation section) which contains the unique digital fingerprint of your app. When a user opens your app, Android OS checks this file. If fingerprints match, it gives your app a “reliable” status, removes the address bar, and enables other features such as deep linking.
You can test this relationship yourself using Google’s official testing tool: Digital Asset Links Verification.
Now when you understand the projects and tools, let’s start building.
Step 1 – Create your PWA in White
The first step is to add two important components to the PWA: Mini Fest File and Service Workers. This is what will allow the browser to recognize it as “install”.
This guide is based on a White project, which makes this process easier through a special plug. If you are using a different tool, the concepts are the same, but you will need to find different resources about specific steps for your environment.
Make your app’s icons
Before touching any code, we need icons for our app. Android requires a specific size for the app’s launcher icon (what you see on your home screen) and the splash screen (what you see when the app starts).
You will need two main size: 192x192 Pixels and 512x512 Pixels. You can use it Fukon Generator To prepare your logo in the relevant size. You can upload your main logo, and it will produce all the necessary size for you.
Then just download the produced files and keep 192x192 And 512x512 I files public Your project folder.
Install the White PWA plugin.
PWA requires a mini -fest file and a service worker. We can make them manually, but this plugin automate this whole process. It will automatically produce one manifest.json And service-worker.js Whenever you make your project, for you.
npm install vite-plugin-pwa -D
Form plugin
At this stage, we will use this plugin and create our app’s mini -fest. Edit vite.config.ts The file will tell the plugin what your app name is, which icons use, etc.
I vite.config.ts:
export default defineConfig({
plugins: (
VitePWA({
registerType: "autoUpdate",
manifest: {
name: "your app name",
short_name: "your app short name",
description: "write any description",
theme_color: "#0d1117",
background_color: "#ffffff",
display: "standalone",
start_url: "/",
icons: (
{
src: "/web-app-manifest-192x192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "/web-app-manifest-512x512.png",
sizes: "512x512",
type: "image/png",
},
),
},
}),
)
Now, when you run away npm run buildPlugin will automatically manufacture and manufacture files for you. With this, deploy the changes. Now your website is PWA.
Step 2 – Create an Android app
Now that your website is PWA, let’s use the bubble rap to pack it in the Android app.
Make a Blood Folder
Make a dedicated folder for your Android project files. In the root of your project, create a new folder. I will call my call android.
project/
├── client/
├── server/
└── android/
Now go to the new folder you created.
Install Bubble Wrap CLI
npm install -g @bubblewrap/cli
Start the project
Next, drive init Order. Bubble wrap will connect your direct website, read manifest.webmanifest File that is created, and use this information to produce a basic Android project.
bubblewrap init --manifest=
Run the command, change your-website-domain With your original URL:
Let’s address it init Order
As you drive init Command, bubble rap will require two main software packages: gave Java Development Kit (JD’s) And Android SD of. It will offer you to install them.
Setup of JD:
? Do you want Bubblewrap to install the JDK (recommended)?
(Enter "No" to use your own JDK 17 installation) (Y/n)
In my case, when I allowed the bubble wrap to install JD, the process downloaded the files but then failed on the “decompressing” step. If you have the same problem, don’t worry! The fix is to manually install it.
Say Not To indicate.
Download the recommended version (usually JDK 17) from a source Lapium.
Install it and compose your system environmental variables to add JDK
binThe route if you are not sure how environmental variables are compiled, you can check this site: Set the environmental variables.Provide it directly when bubble rap routes, such as
C:\java\jdk-17.0.16.8-hotspot.
Android SDK Setup:
Once the JD is successfully compiled, the next step is to create Android SDK.
? Do you want Bubblewrap to install the Android SDK (recommended)?
(Enter "No" to use your own Android SDK installation) (Y/n)
Since I didn’t have Android SDK, I selected the bubble wrap and let it handle Yes. I didn’t face any problems here.
If you have to face any problem in ordering Android SDK, set it up manually and give way like a JDK setup.
Step 3 – Give answers to bubbles questions
After the establishment of the SD, the bubblap will ask many questions to create your app. Used to make this information twa-manifest.json File, which is the blue print of your app.
Domain: Press Enter (auto-filled from your manifest)
Application name: Your full app name
Application ID: (e.g, chat.yourapp.twa)
Display mode: standalone
Orientation: portrait
Status bar color: Press Enter (accepts default)
Splash screen color: Press Enter (accepts default)
Icon URL: Press Enter (accepts default)
Include support for Play Billing?: Type Y if your app uses Google Play in-app purchases. Otherwise, N
Request geolocation permission?: Type Y if your app needs location access. Otherwise, N
In these questions, the important part is the key store and the key.
First and Last names: Your full name
Organizational Unit: Developer or anything
Organization: Your organization name
Country (2-letter code): Your country code
Password for key store: Enter a new password
Password for key: Re-enter the same password
Note: These passwords should be the same for both the key store and the key, otherwise it will throw the error. Refer to this issue: The problem of bubble wrap.
Step 4 – Create app
bubblewrap build --universalApk
This command begins to build your application. Here, the flag universalApk Will produce .apk And .abb. If you are going to publish your application in the Play Store, upload .abb File to the Play Store. Our Testing We We need an APK file, so this flag universalApk Both will produce files. If we didn’t give this flag it would just give us .abb.
Step 5 – TWT VERIFIED CONTACT
Once constructed, you will find the app. Move it to your phone and check it out. When you open the app, you will see the browser address bar. The reason is that we have not yet established “trust” between your app and your website. Let’s fix it now.
In your Front & Project, go to public Folder, make a new folder that says .well-knownAnd inside it, make a file that is called assetlinks.json.
frontend/
├── public/
├── .well-known/
└── assetlinks.json
What is .well-known Folder?
Used to store a leading folder files that describe the structures for the protocol, as it is used for external sources to find your website verification. In our case, our app examines the leading folder from our website and confirm the verification.
Stick to the following assetlinks.json:
(
{
"relation": ("delegate_permission/common.handle_all_urls"),
"target": {
"namespace": "android_app",
"package_name": "chat.yourapp.twa",
"sha256_cert_fingerprints": (
"your_sha256_fingerprint"
)
}
}
)
What is delegate_permission/common.handle_all_urls?
It is a special flag that opens all links from the app instead of a domain. In straight words, it works as a diplomat. After installing the app, if you click on the link to your website from the WhatsApp or somewhere, it will open your app instead of opening in the browser, which will be deep link.
package_name Should be the field packageIdIn which you can get from your Android Blood Folder twa-manifest.json.
Now, get your fingerprint. Run the following command to do this:
keytool -list -v -keystore android.keystore -alias android
The name of the alias should be the price you created. Once you enter this command, it will ask for a key store’s password. Enter it, and you’ll get SHA256 Fingerprint Copy this and paste it assetslinks.json I file sha256_cert_fingerprints Now, the arrows now push these changes into production. You can confirm verification Digital Asset Links
This is! Now you can install and test the app.
Step 6 (Optional)-Customize the app experience
Now, additionally, there will be some issues where we want to show users different content on the website vs. mobile app. Can we do this? Yes!
In your Android Blood Folder, in twa-manifest.jsonThere will be called a field startUrl. If not, add it and add the price "startUrl": "/?twa=true". startUrl Is the entry point. I have an queries of price twa=true.
Run rebuild bubblewrap build --universalApk.
Now, if you open your app, this app will open with the Entry URL yourwebsitedomain.com/?twa=true.
In your Front End:
const twaParam = queryParams.get("twa");
const (isTwa, setIsTwa) = useState<boolean>(() => {
return localStorage.getItem("isTwa") === "true";
});
useEffect(() => {
if (twaParam === "true") {
localStorage.setItem("isTwa", "true");
setIsTwa(true);
}
}, (twaParam));
{isTwa? (
"/contact" className="underline hover:text-primary">
Contact
) : (
"/download" className="underline hover:text-primary">
Download App
)}
In the aforementioned code, we check this twa=true Question parameter in the URL. If it exists, we save this information in local storage, and then we offer content for the user.
Just We have created an app.
If you would like to change any name, color, or splash screen, you can change it twa-manifest.json And rebuild.
Wrap
Bubble wrap is for Android only. If you want the app to support the cross platform, there are some other platforms, such as a capacitor, which I will write in another article about.
By the way, you can check the app I made here using the bubble wrap here: The alien conversation.
If there are any mistakes or you have any questions Linked Or Instagram.
Thank you for reading!