TODO:
Quick Links:
Capacitor Docs, Issues:
Companies usig capacitor:
Implementing Push notifications in Capacitor:
npx cap open ios
npx cap open android
# 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",
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.
Cookies
usage in capacitor appCookies
in capacitor native app ORSharedPrefernces
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.
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.”
npm run build
in projectBuild > Clean Project
.Build > Signed Bundle / APK...
and continue with as required./home/array/test/slasher/slasher-web-frontend/android/app/release
.Settings menu, select "Users & permissions" > Select the developer > Users & permissions > Store Listing > Edit store listing
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
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
Youtube - Click here
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)
# 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`
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 });
// file: capacitor.config.ts
backgroundColor: '000000',
ios: {
contentInset: 'automatic',
},
Capacitor config API Docs: Click here
Source: Click here
Also, “the apps installed from Google app store automatically has all the links selected.”
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
Hosting site domain: Package Name: cart.mywebsite.com App package fingerprint (SHA256): ___
public/.well-known/assetlinks.json
.assetlinks.json
file data at all.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>
Source: Click here
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
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
Official Docs: Click here
Source: Click here