DEV Community

Cover image for Convert your website into an android app using capacitor 😱.

Convert your website into an android app using capacitor 😱.

Narottam04 on June 09, 2022

According to Atwood's Law, "Any application that can be written in JavaScript, will eventually be written in JavaScript." In this article, we will...
Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Or just make a PWA

Collapse
 
narottam04 profile image
Narottam04

Capacitor provides access to many native api's like push/local notification, geolocation, camera etc. The introductory article does not cover those topics because it would complicate the tutorial. If an app does not need any of the native APIs, I think PWA can be a good choice. I believe that capacitor has better iOS application support.

Collapse
 
jzombie profile image
jzombie

This interests me:

Capacitor WebRTC feature proposal: github.com/capacitor-community/pro...

Collapse
 
fuhadkalathingal profile image
Fuhad Kalathingal

Hey can we add custom splash screen to pwa?

Thread Thread
 
fridaycandours profile image
Friday candour

Not possible at moment, the default way of adding a splash screen is allows the v browsers to boast up your pwa via web pack JavaScript package behind the scenes, so custom splash is not coming any time soon.

Thread Thread
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

A splash screen? How very late 90s, early 2000s

Collapse
 
jankapunkt profile image
Jan KΓΌster

@jonrandy we also build our app as Pwa but many of our users just don't get it. They want to download it from the store...

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Bloody users! Who needs them... πŸ˜›

Collapse
 
ivan_jrmc profile image
Ivan Jeremic • Edited

Thats an Apple problem normal companies like Google allow PWAs in the store.

Collapse
 
mkvillalobos profile image
Manrike Villalobos BΓ‘ez

I love the PWA alternative... for me, must be the future... but Apple is not ready for it! PWA apps are not fully supported in iOS as Android. That's a shame! :( I hope someday Apple change their mindsets.

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

Love that install button

Collapse
 
anesu profile image
Anesu Kafesu

In my experience, it's hard to explain to users what a PWA is.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

There's really not much explaining to do - "Click on the install button" - they really don't need to know technical details as to why they're different.

It's also possible to put them in the Play Store

Collapse
 
olyno profile image
Olyno

Capacitor is a great tool, but something I blame it for is the fact that it depends on Android studio. I'm used to Vscode, and I prefer working with it. I have no interest in switching to Android Studio. So it becomes frustrating to create a project with Capacitor (and any other similar tools depending of Android Studio too).

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

Then you don't get it.. you don't need android studio for developing the app, you develop inside vscode like normal and only for the build you need xcode for ios or android studio for android, you develop the whole app still in vscode.

Collapse
 
olyno profile image
Olyno

But again, i do need Android Studio or Xcode. I'm just waiting a real good ecosystem where with a simple command, i can build the app. This is possible, but not accessible.

Thread Thread
 
ivan_jrmc profile image
Ivan Jeremic

You can't build native apps for ios on windows with vscode and also not for android in xcode you need that, I mean it is already so easy and people still complain, do you understand that you do nothing in android studio other than compiling when its ready nothing hard...

Thread Thread
 
olyno profile image
Olyno

So we stay on the initial problem. We have to install almost 1go of tools (Android Studio), to use in the end not even 10% (the compilation part, build tools). It's like using a tank to kill a fly, it's not necessary.

I know very well that using Android Studio is simple, and very convenient, but why bother installing this IDE when someone could just create an environment for Vscode, or more generally create a CLI. I'm complaining because it's an unnecessary overhead, and many other developers are complaining about it too.

Also, as you mentioned, we can't build Android applications on Mac, and IOS applications on Windows/Linux. This is one of the problems I point out, to have a real ecosystem that is easy to use. Mobile application development is still a niche, but it's growing year by year, thanks to React Native and Expo, which simplifies the whole process.

Thread Thread
 
ivan_jrmc profile image
Ivan Jeremic

You sound like a time traveller from 2009

Thread Thread
 
olyno profile image
Olyno

What do you mean?

Thread Thread
 
ivan_jrmc profile image
Ivan Jeremic • Edited

"Mobile application development is still a niche, but it's growing year by year"

This is what you said like LoL what?

Also I don't think its up to framework authors I think companies like apple force you to use XCode for the build part.

I also think you complain without any reason you sound like your PC has a 500mb hardrive and no space space for android studio.

Thread Thread
 
olyno profile image
Olyno

I sound as someone who would like this ecosystem to be better, and not dependent on unnecessary tools. We can code a backend with any IDE, a frontend with any IDE, but we depend on Android Studio and Xcode for mobile applications. What I would like is to be able to remove this dependency.

Collapse
 
anesu profile image
Anesu Kafesu

I don't have Android Studio installed. I just have the Android SDK and I do everything from the command line

Collapse
 
anesu profile image
Anesu Kafesu

Even the building part. I run the gradlew script that's contained in the Android folder.

Collapse
 
zippcodder profile image
Deon Rich • Edited

I actually managed to build an apk with a single bash function I made and pasted in my rc (no gradle, no android studio). Its actually not that hard, might write an article on it. You just run the command on your project folder, then it spits out an apk ready for installation.

Collapse
 
olyno profile image
Olyno

Would be awesome! Don't hesitate to drop the link to your article if you do one!

Collapse
 
raibtoffoletto profile image
RaΓ­ B. Toffoletto

You will always need Xcode and AStudio to emulate the devices. If you do flutter or react native is this same... although you can code everything is VSCode 😒

Collapse
 
narottam04 profile image
Narottam04

Me too, I like to code in vscode and switching to android studio is a pain.
They have introduce a vscode plugin for launching app in terminal but I think I have not installed emulator properly πŸ˜….

 
cyril_ogoh profile image
ogoh cyril

Yea but plenty of api for pwa that has been abandoned or discontinued
For instance geo fencing and many more for either security exploits or something else

Pwa is a go to
But some core native api are just need to solve a usecase

Collapse
 
jwp profile image
John Peters • Edited

AtWood's law has been usurped with WASM.

Javascript is optional now with Rust, Python, C#, and Java. Each create WASM assemblies allowing for no Javascript web apps.

I'm currently working on a Blazor project which is awesome. It's 100% isomorphic in C#. (Front end and backend) it also supports optional TypeScript and Javascript,css and scss.

Collapse
 
narottam04 profile image
Narottam04

Interesting, I have never made a website with c#. Is there any benefits for using blazor, .net like framework over svelte, next js?

Collapse
 
jwp profile image
John Peters

Yes, Security is increased massively. Not to mention speed due to no JIT requirements.

Collapse
 
devsmitra profile image
Rahul Sharma • Edited

What about PWA + WebView.

If some feature are not available on PWA you can use device native feature and using JS channel pass data to PWA.

Collapse
 
narottam04 profile image
Narottam04

Sounds interesting, do you have any resources where I can find more information about it?

Collapse
 
devsmitra profile image
Rahul Sharma

I'm using the same, You can refer this

youtube.com/watch?v=FrqGGw9DYfs

Thread Thread
 
narottam04 profile image
Narottam04

Thank you for sharing

Collapse
 
kissu profile image
Konstantin BIFERT

Nice in depth tutorial! 🧑
I'll go with Flutter or React Native for something more complex but overall, Capacitor is great for something fast and quick!

Collapse
 
narottam04 profile image
Narottam04

Yes, I think with react native and flutter it is easy to create an app that has native animation and feel to it.

Collapse
 
rukundob451 profile image
Benjamin Rukundo

This must be super awesome. Surely can't wait to give it a try. Thanks for this indeed.

Collapse
 
narottam04 profile image
Narottam04

You're welcome❀️

Collapse
 
rukundob451 profile image
Benjamin Rukundo

Surely, probably we can connect as I could be able to learn a lot more from you. thank you!

Collapse
 
raibtoffoletto profile image
RaΓ­ B. Toffoletto

Nice introduction!! Will be trying it soon.

Collapse
 
jeremymonatte profile image
Mbenga

Nice tutorial πŸ‘Œ

Collapse
 
narottam04 profile image
Narottam04

Thank you❀️

Collapse
 
jonaspetri profile image
Jonas Petri

Nice article!

Collapse
 
narottam04 profile image
Narottam04

Glad you liked it!

Collapse
 
yongchanghe profile image
Yongchang He

Thank you for sharing this!

Collapse
 
narottam04 profile image
Narottam04

You're welcome ☺️

Collapse
 
sojinsamuel profile image
Sojin Samuel

bravo

Collapse
 
narottam04 profile image
Narottam04

Glad you liked it β™₯

Collapse
 
avi1112 profile image
Avi1112

Apt and well explained πŸ‘πŸ»

Collapse
 
narottam04 profile image
Narottam04

Thank you!❀️

Collapse
 
sahillangoo profile image
Sahil Langoo

There is a native plugin for Splash screen.
capacitorjs.com/docs/apis/splash-s...

Collapse
 
chismo950 profile image
chismo950

why not use react native?

Collapse
 
narottam04 profile image
Narottam04

It is flexible. You can use your favourite framework like svelte, Vue js or even vanilla js.
Might not be the best solution for every apps but I think there are usecases where you can use a library like this.
I have created a web app, which I will be deploying on playstore in few days which uses capacitor under the hood.