sahilrajput.com

Learn Capacitor

TODO:

Quick Links:

Capacitor Docs, Issues:

CapAwesome:

Capawesome follows the sponsorware release strategy, that enables developers to be compensated for their open-source work with fewer downsides than traditional open-source funding models. This means that new plugins are first exclusively released to sponsors as part of Insiders. (source - Sponsos > Insiders)

Implementing Push notifications in Capacitor:

We can use android widget with capacitor

An Android Widget is a small, interactive component placed on the home screen to provide quick access to app features or real-time information (e.g., weather, clock, or music controls). Widgets update dynamically and can be customized for better usability.

Using https in capacitor?

Open XCode or Android Studio with capacitor’s cli

npx cap open ios

npx cap open android

Know what capacitor version are you on currently?

# file: package.json

# dependencies
"@capacitor/android": "^5.2.3",
"@capacitor/core": "^5.2.3",
"@capacitor/ios": "^5.2.3",

# dev dependencies
"@capacitor/cli": "^5.2.3",

Change top status bar background color in android native code

Click here

Redirect user to upate the app in android and ios (not tested personally)

image

Auto signing after app install issue?

Resource: 1, 2

image

Is deviceToken change on each firebase setup for e.g., on login event on client app?

ANOTHER Noting: My phone remembers the deviceToken no matter how many times logout/login is performed and each time deviceToken is accessible when signin is performed.

image

SharedPreferences vs. Cookies usage in capacitor app

Issue faced in xxxxx-capacitor-app?

Q. Why logged-in session is persisted after signout action (clearing Cookies and SharedPreferences?

So what I came up with some 6+ hours of testing and debugging this loggedin-session persists issue is this - that, the browser session used by capacitor environment in the mobile isn’t woring the way actualy browser work with Cookies api (or may be Capacitor team has tweaked that on purpose). And this resulted in Cookies being persisted in some cases like 1 in 7 cases further resulting in persisted user-session. So the only solution left was to opt out of using Cookies for native platform and using SharedPreferences without caching layer of Cookies like we were using before. This fixed the issue completely. Cons? Is SharedPrefernces slower now as compared to previousl approach? I personally think it has no effect on performace and to dig out deeper I found this StackOverflow answer talking about the read speed of same - Read speed of SharedPreferences . The accepted answer says like that:

They are in memory, after the first reference. The first time you retrieve a specific SharedPreferences (e.g., PreferenceManager.getDefaultSharedPreferences()), the data is loaded from disk, and kept around.

WORKING ❤️ WAY ❤️ OF producing the signed apk

NOTE: Why to use android studio and not capacitor CLI to build a signed APK? Because - It gives error when the APK is installed on android - “App is not installed.”

  1. Run npm run build in project
  2. Run Build > Clean Project.
  3. Run Build > Signed Bundle / APK... and continue with as required.
  4. APK/AAB will be generated at /home/array/test/slasher/slasher-web-frontend/android/app/release.

Give developer permission to change app description and app screenshots

Settings menu, select "Users & permissions" > Select the developer > Users & permissions > Store Listing > Edit store listing

Change countries access to the app

image

Updating Testers and allowing testers

image

Capacitor - Publishing to play console versions

image

Run capacitor app on a target device

npx cap run android --list
# INFO: Using static build for capacitor
# Name                                API      Target ID
# -------------------------------------------------------------------
# Redmi M2010J19SI                    API 29   192.168.18.4:5555
# Pixel 3 XL API 33 (emulator)        API 33   Pixel_3_XL_API_33
# Pixel_3a_API_33_x86_64 (emulator)   API 33   Pixel_3a_API_33_x86_64
# Pixel 4 API 33 (emulator)           API 33   Pixel_4_API_33

# Run on a target device
npx cap run android --target 192.168.18.4:5555

# For ease with live-reload or production build you can use below aliases in ~/.bashrc file:
capLiveReload_RedmiNote5
capProd_RedmiNote5

Learn android studio - emulator cli

##### LEARN `emulator` cli
# List available AVDs
emulator -list-avds
# OUTPUT:
# Pixel_3_XL_API_33
# Pixel_3a_API_33_x86_64
# Pixel_4_API_33

# Run avd
emulator -avd Pixel_3a_API_33_x86_64

Android 12+ splash screen

Youtube - Click here

Generate signed apks from capcitor commadn line

Source: Docs - Capacitor CLI - cap build: Click here

npx cap build [options] <platform>

# E.g, 
npx cap build android
# UNFORTUNATE OUTPUT IS -
# [error] Missing options. Please supply all options for android signing.
#         (Keystore Path, Keystore Password, Keystore Key Alias, Keystore Key, Password)

Scripts to generate and install apk via gradle

# Get generated apk by capacitor's live-reload and static-build FROM ROOT DIRECTORY OF CAPACITOR PROJECT
alias cd.apkCapacitor='cd android/app/build/outputs/apk/debug/'
# You'll see file with name `app-debug.apk`

You can view the running devices in android studio from here

image

Safe area take aways from slasher work

  1. Safe area is by default shown in android (i.e,. no need to add more area to conver for the sideareas of the top notch).
import { StatusBar } from '@capacitor/status-bar';
// Display content under transparent status bar (Android only)
StatusBar.setOverlaysWebView({ overlay: false });
const topStatuBarBackgroundColorAndroidOnly = '000000';
StatusBar.setBackgroundColor({ color: topStatuBarBackgroundColorAndroidOnly });
  1. Safe area in ios can be added by uisng options
// file: capacitor.config.ts
backgroundColor: '000000',
ios: {
  contentInset: 'automatic',
},

Capacitor config API Docs: Click here

Deeplinking not working on ios OR subdomain deeplinking not working in IOS

Source: Click here

Also, “the apps installed from Google app store automatically has all the links selected.”

What to ensure before publishing app to android store or ios store?

image

image

Get sample androidmanifest.xml files

Click here

Capacitor Deep Link Docs: Click here

Andoid Configuration: Click here

Generating RSA using Android certificate:

# NOTE: When generating the certificate it asks for 6-digit password (123456), person name, state, country, country-code.
# create a certificate
keytool -genkey -v -keystore my-release-key.keystore -alias ALIAS -keyalg RSA -keysize 2048 -validity 10000
# Output: Generates a file `my-release-key.keystore`
# NOTE You would need following details to generate the certificate:
# 1. Password - At least 6 digit
# 2. First name and last name
# 3. Name of organization Unit
# 4. Name of organization
# 5. Name of City or Locality
# 6. State or Province
# 7. Two letter country code


# get keystore details (sample password = 123456)
keytool -list -v -keystore my-release-key.keystore

# SHA256 Fingerprint:
B0:01:D7:CE:4C:FE:91:FF:B9:DE:96:36:22:01:44:49:A2:D3:78:F9:C7:0D:DC:BA:56:1E:8A:B7:AF:A2:78:27
  1. Statement List Generator: https://developers.google.com/digital-asset-links/tools/generator Use following details: ```txt
    for testing -» Hosting site domain: slasher-web-frontend.vercel.app

    Hosting site domain: Package Name: cart.mywebsite.com App package fingerprint (SHA256): ___

IMPORTANT ### -> Save the generated statement in file public/.well-known/assetlinks.json.

Note (wow!): hosting-site-domain is not used to generate assetlinks.json file data at all.

So that means you never need to regenerate assetlinks.json data unless you change the app package name.

2. Update domain in `android/app/src/main/AndroidManifest.xml` file.

## Usnig custom notification icon and understanding mipmap, drawable, strings, colors, androidmanifest.xml

![image](https://github.com/sahilrajput03/sahilrajput03/assets/31458531/f7811d61-ca4b-4d8b-b4cc-588b7cd8cdda)

mipmap vs. drawabled:

![image](https://github.com/sahilrajput03/sahilrajput03/assets/31458531/e7d52682-58ca-4d7b-80e1-8f6e0154e549)

You can send notification to devices by:

- Firebase Console > Engage > Messaging > New campaign > Notifications. Now you need to add "Notification Title, Notification Text, Notification Image, Notification Name, etc" and then use `Send test message` to send the notification.

![image](https://github.com/sahilrajput03/sahilrajput03/assets/31458531/d488b7c1-19fe-48c1-ab8f-9a50cf14042a)

- Generating the notification icon:

Source: [Online servcie](https://romannurik.github.io/AndroidAssetStudio/icons-notification.html)

and then you can place the folder of the output the respective `res` directory in the android project. And now you just need to add below lines to `androidmanifest.xml` file:

```xml
<!-- Push Notification Icon -->
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_notification" />
<meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/primaryColor" />,

and also define the color in colors.xml file like that:

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <color name="primaryColor">#ff1800</color>
</resources>

Can we run a Capacitor PWA app offline?

Source: Click here

image

You can view Device Manager in Android Studio via this

image

Connect to adb over wifi

Source: Click here

# You need to open "adb wifi" application on mobile and mobile's ip address with
# port 5555 (you an find same address in "adb wifi" application too):
adb connect 192.168.18.4:5555

Disable overscroll stretch/bouncy effect

Click here

Build a debug apk

Open project in andoid studio by npx open android and run Build > Build Bundle(s) / APK(s) > Build APK(s). Then file will be generate @ path ./android/app/build/outputs/apk/debug/app-debug.apk

Security Best Practises - Capacitor

Official Docs: Click here

Capacitor does used PRIVATE_MODE while storing data for the application

Source: Click here

image

Shared Preference

How to store data in secure way in android application?

image