Learn Capacitor

TODO:

Do capacitor course: Click here

Quick Links:

Learn Android: Click here
Learn Google Play Console: Click here
Sunflower App - App in Kotlin (17k*): Click here

Capacitor Docs, Issues:

TODO: PWA - Capacitor First Class Support: Click here
Helpful Youtube video for capacitor: Creating Capacitor Local Notifications with Sound, Icons & Action Buttons: Click here
Using HTTPS scheme for capacitor app - Docs: Click here
- How to run Capacitor webView with https in IOS: Click here

Companies usig capacitor:

Burger King Mobile App and Web App: Click here

Implementing Push notifications in Capacitor:

Article from CapAwesome: Click here

Using https in capacitor?

Capacitor Docs - Using HTTPS: Click here
Ionic Blog - Capacitor SSL Pinning: The Extra Layer of Security Your Mobile App Needs: Click here
A stackoverflow answer related to run google analytics via some hack: Click here

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)

Auto signing after app install issue?

Resource: 1, 2

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.

SharedPreferences vs. `Cookies` usage in capacitor app

Should we use Cookies in capacitor native app OR
Should we use SharedPrefernces when we want to maintain persistent data for apps?

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."

Run npm run build in project
Run Build > Clean Project.
Run Build > Signed Bundle / APK... and continue with as required.
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

Updating Testers and allowing testers

Capacitor - Publishing to play console versions

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

Safe area take aways from slasher work

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 });

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

1 - Deeplinking not working?
2 - Deeplinking not working on subdomain

For deeplinking to work in android 12 and android 13 you must enabled the selected link if you are testing the app from non-playstore builds (i.e., development builds)

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?

Get sample androidmanifest.xml files

Click here

Setting up Deep Links

Note: Deep Links works with both live-reload and static-apk build with capacitor cli usage.

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

Statement List Generator: https://developers.google.com/digital-asset-links/tools/generator Use following details:

###### 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.

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

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

mipmap vs. drawabled:

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.

Generating the notification icon:

Source: Online servcie

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:

<!-- 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

You can view Device Manager in Android Studio via this

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

Shared Preference

Capacitor Docs - Data Storage in Capacitor: Click here
Android Docs - Click here (applications store data and have them owner by the process id)
Android Docs: Save simple data with SharedPreferences: Click here
A question posted by Eric - Click here

Files

learn-capacitor.md

Latest commit

History

learn-capacitor.md

File metadata and controls

Learn Capacitor

Using https in capacitor?

Open XCode or Android Studio with capacitor's cli

Know what capacitor version are you on currently?

Change top status bar background color in android native code

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

Auto signing after app install issue?

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

SharedPreferences vs. Cookies usage in capacitor app

WORKING ❤️ WAY ❤️ OF producing the signed apk

Give developer permission to change app description and app screenshots

Change countries access to the app

Updating Testers and allowing testers

Capacitor - Publishing to play console versions

Run capacitor app on a target device

Learn android studio - emulator cli

Android 12+ splash screen

Generate signed apks from capcitor commadn line

Scripts to generate and install apk via gradle

You can view the running devices in android studio from here

Safe area take aways from slasher work

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

For deeplinking to work in android 12 and android 13 you must enabled the selected link if you are testing the app from non-playstore builds (i.e., development builds)

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

Get sample androidmanifest.xml files

Setting up Deep Links

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

Can we run a Capacitor PWA app offline?

You can view Device Manager in Android Studio via this

Connect to adb over wifi

Disable overscroll stretch/bouncy effect

Build a debug apk

Security Best Practises - Capacitor

Capacitor does used PRIVATE_MODE while storing data for the application

Shared Preference

How to store data in secure way in android application?

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

SharedPreferences vs. `Cookies` usage in capacitor app

Learn android studio - `emulator` cli