Related
I'm trying to run a simple test, trying to add ionic and capacitor to an already existing angular project. I have managed to make it work and run correctly but when I add the SSL command to the CLI so that the server runs with HTTPS the app no longer loads and everything I can just see is a blank screen. Moreover if I access the URL manually from the browser everything loads correctly. Could it be there's something wrongly configured in Android Studio or the ionic/capacitor files? I have tried different configurations and different emulated devices w/ different Android versions but there's no use, I haven't been able to make it work. I would certainly appreciate if someone could help me with this...
Running ionic capacitor run android --livereload --external
https://i.stack.imgur.com/ljfUT.png
https://i.stack.imgur.com/8LxNV.png
When I add the --ssl flag to the CLI ionic capacitor run android --livereload --external --ssl
https://i.stack.imgur.com/fS0jV.png
https://i.stack.imgur.com/D3sLL.png
https://i.stack.imgur.com/3v5Bx.png
Capacitor.config
import { CapacitorConfig } from '#capacitor/cli';
const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'iotest',
webDir: './android/www',
bundledWebRuntime: false
};
export default config;
Angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"cli": {
"defaultCollection": "#ionic/angular-toolkit"
},
"schematics": {
"#ionic/angular-toolkit:component": {
"styleext": "scss"
},
"#ionic/angular-toolkit:page": {
"styleext": "scss"
}
},
"projects": {
"iotest": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "./android/www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*.svg",
"input": "./node_modules/ionicicons/dist/ionicicons/svg",
"output": "./svg"
}
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "iotest:build:production"
},
"development": {
"browserTarget": "iotest:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "iotest:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "iotest"
}
Ionic.config
{
"defaultProject": "iotest",
"projects": {
"iotest": {
"name": "iotest",
"integrations": {
"capacitor": {}
},
"type": "angular"
}
}
}
Angular
Angular CLI: 12.1.4
Node: 16.14.0 (Unsupported)
Package Manager: npm 8.3.1
OS: win32 x64
Angular: 12.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
#angular-devkit/architect 0.1201.4
#angular-devkit/build-angular 12.1.4
#angular-devkit/core 12.1.4
#angular-devkit/schematics 12.1.4
#angular/cli 12.1.4
#schematics/angular 12.1.4
rxjs 6.6.7
typescript 4.3.5
Warning: The current version of Node (16.14.0) is not supported by Angular.
NPM
Version 8.3.1
My goal is to make it run with SSL since in a future I will need to apply this to an app that needs to be run with HTTPS
From capacitor.config.ts make change like this:
{
...
server: {
url: 'https://your-local-ip:8100' // like: 192.168.1.66:8100
androidScheme: 'https',
clearText: true // just for test
}
...
}
then open two terminal and run
this command's:
ionic cap run android -l --external --ssl
from second terminal run:
ionic serve 0.0.0.0 --ssl
after all if you still see blank page, open a browser from mobile device and go to https://your-host-ip:8100, then make sure the url is trusted.
I have made an app for Teams that I want to use to display an adaptive card to the user when they pick an item from the list of search results. In order for this to happen, I need to trigger some code after the user selects a result. This works as expected from the Teams client, as well as in the browser, but from native mobile Teams app, the code is not triggered when selecting an item from the list of results.
const preview = CardFactory.heroCard( obj.package.name );
preview.content.tap = { type: 'invoke', value: { description: obj.package.description } };
The following pictures show the app working in a browser on the computer:
The list of results from the browser on PC
The expected adaptive card showing correctly on browser
And this is how it looks from the mobile perspective:
The list of results from mobile app
The result of selecting the same item from the list
The code used to display this has not been modified, except providing a bot to host it, and was found from Microsoft's bot samples on GitHub:
https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/typescript_nodejs/50.teams-messaging-extensions-search
The code in question looks as follows:
export class TeamsMessagingExtensionsSearchBot extends TeamsActivityHandler {
public async handleTeamsMessagingExtensionQuery( context: TurnContext, query: any ): Promise<any> {
const searchQuery = query.parameters[ 0 ].value;
const response = await axios.get( `http://registry.npmjs.com/-/v1/search?${ querystring.stringify( { text: searchQuery, size: 8 } ) }` );
const attachments = [];
response.data.objects.forEach( ( obj: any ) => {
const heroCard = CardFactory.heroCard( obj.package.name );
const preview = CardFactory.heroCard( obj.package.name );
preview.content.tap = { type: 'invoke', value: { description: obj.package.description } };
const attachment = { ...heroCard, preview };
attachments.push( attachment );
} );
return {
composeExtension: {
attachmentLayout: 'list',
attachments,
type: 'result'
}
};
}
public async handleTeamsMessagingExtensionSelectItem( context: TurnContext, obj: any ): Promise<any> {
return {
composeExtension: {
attachmentLayout: 'list',
attachments: [ CardFactory.thumbnailCard( obj.description ) ],
type: 'result'
}
};
}
}
Is this expected?
Thanks
Edit: Adding the manifest JSON used here:
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
"manifestVersion": "1.5",
"version": "1.0.0",
"id": "9211fa66-f930-414d-861a-40f18f7f1490",
"packageName": "com.teams.sample.teamsmessagingextensionssearch",
"developer": {
"name": "teamsStartNewThreadInChannel",
"websiteUrl": "https://www.microsoft.com",
"privacyUrl": "https://www.teams.com/privacy",
"termsOfUseUrl": "https://www.teams.com/termsofuser"
},
"icons": {
"outline": "icon-outline.png",
"color": "icon-color.png"
},
"name": {
"short": "Search Messaging Extension",
"full": "Microsoft Teams Search Based Messaging Extension"
},
"description": {
"short": "Sample demonstrating a Search Based Messaging Extension",
"full": "Sample Search Messaging Extension built with the Bot Builder SDK"
},
"accentColor": "#FFFFFF",
"bots": [
{
"botId": "9211fa66-f930-414d-861a-40f18f7f1490",
"scopes": [
"personal",
"groupchat",
"team"
],
"supportsFiles": false,
"isNotificationOnly": false
}
],
"composeExtensions": [
{
"botId": "9211fa66-f930-414d-861a-40f18f7f1490",
"canUpdateConfiguration": true,
"commands": [
{
"id": "searchQuery",
"context": [
"compose",
"commandBox"
],
"description": "Test command to run query",
"title": "Search",
"type": "query",
"parameters": [
{
"name": "searchQuery",
"title": "Search Query",
"description": "Your search query",
"inputType": "text"
}
]
}
]
}
],
"permissions": [
"identity",
"messageTeamMembers"
],
"validDomains": []
}
We are able to re-pro the issue at our end. Raised a bug.We are tracking the bug internally, we don't have ETA to share when it will be fixed. Will update once it is fixed.
Problem
Hi, I recently migrated an ionic cordova project to ionic capacitor following this guide.
I got everything working except for the Watermarkjs library, which I use to watermark pictures taken with the camera of an Android device.
The library used to work fine before the migration, but now everytime I use the functions defined in that library I get this log in Logcat:
Capacitor: Handling local request: http://localhost/9j/4AAQSkZJRgABAQAAAQABAAD
It seems the function is not being called properly.
Code
async takePicture(fieldId){
const image = await Camera.getPhoto({
quality:20,
allowEditing:false,
resultType: CameraResultType.Base64,
source: CameraSource.Prompt
});
let finalImage = await this.addTextWatermark(image.base64String); //problem begins here
console.log("Image with watermark, " finalImage); // this is never printed out in logcat
}
// Function that adds a watermark
// reference: http://brianium.github.io/watermarkjs/text.html
addTextWatermark(base64String){
let result = await watermark([base64String])
.dataUrl(watermark.text.lowerLeft( 'Watermark text', '48px Josefin Slab', '#ffffff', 0.9) )
.then( image => {
return image;
}).catch(error => {
return "error";
})
return result;
}
What I've tried...
Adding watermarkjs script in angular.json scripts section and running npx cap copy, as suggested in this StackOverflow question
angular.json (excerpt)
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
"scripts": [
"./node_modules/watermarkjs/dist/watermark.js" <----- Added script here
]
} ...
Using different input types for the watermark() function. (file, blob, etc.)
I think the problem is related to not importing the functions properly.
If the library is incompatible with ionic capacitor...
Does anyone know a workaround for this problem?
I have developed a bot that has an invite card when the user did not add the bot yet, it will return the following JSON to render the AdaptiveCard:
{
body: [
{
text: translations['MsTeams::AdaptiveCardBodyLooksLikeTryToUseApp'],
wrap: true,
type: 'TextBlock',
},
{
text: translations['MsTeams::AdaptiveCardBodyNeedToInviteApp'],
wrap: true,
type: 'TextBlock',
},
],
actions: [
{
data: {
actionId: 'INSTALL_BOT_SUBMIT',
cancel: true,
},
title: translations['MsTeams::Cancel'],
type: 'Action.Submit',
},
{
data: {
msteams: {
justInTimeInstall: true,
},
actionId: 'INSTALL_BOT_SUBMIT',
},
title: translations['MsTeams::Invite'],
type: 'Action.Submit',
},
],
type: 'AdaptiveCard',
version: '1.0',
}
And it's working fine on desktop, browser, and iOS devices, but not working on Android devices.
Here is the device & app info:
Android device version: 8.0.0
MS teams app version: 1416/1.0.0.2021010802
This is just an idea, but I see lots of hanging commas (e.g. type: 'TextBlock',). It might be that the Android parser is stricter on this - try remove them and test again.
I have a Teams application where I need to use local storage (IndexedDB).
All works fine with the most common browsers: Chrome, Firefox but when I try to use the application with the Android app for Teams, something goes wrong: "It is necessary for the correct functioning of the app to allow access to IndexedDB".
Android Version: 10 - WebView Version: 81.0.4044.138
From my point of view is something relative to the permissions for local storage with WebView
This is my code:
if (window.indexedDB) {
var request = indexedDB.open('__mydb', 2);
request.onerror = function (event) {
alert('It is necessary for the correct functioning of the app to allow access to IndexedDB.');
};
request.onsuccess = function (event) {
mydb = event.target.result;
try {
console.log('Database opened, checking existence of table');
var objectStore = mydb.transaction([tableName], 'readwrite')
.objectStore(tableName);
console.log('Table exists. Proceeding to save data');
saveTokenDataIndexedDB(objectStore);
console.log('All done, going to app');
goToApp();
} catch (e) {
console.log(e);
}
};
}
This is the manifest file of my Teams application:
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.2/MicrosoftTeams.schema.json",
"manifestVersion": "1.0",
"packageName": "XXXXXX",
"id": "29bcd6f4-XXXXXX-4111-820b-XXXXXXXXXXX",
"version": "0.1",
"developer": {
"name": "XXXXXXXXXXXXX",
"websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
"privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
"termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
},
"name": {
"short": "XXXXXXXXXXXX"
},
"description": {
"short": "XXXXXXXXXXXXX",
"full": "XXXXXXXXXXXXXXXX"
},
"icons": {
"outline": "XXXXXXXXXXXX_outline.png",
"color": "XXXXXXXXXXXXX_color.png"
},
"accentColor": "#004578",
"configurableTabs": [
{
"configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=XXXXX-eadc-4020-XXXX-edea2c24753b%26forceLocale={locale}",
"canUpdateConfiguration": true,
"scopes": [
"team"
]
}
],
"staticTabs": [
{
"entityId": "XXXXX",
"name": "XXXXXXXXX",
"contentUrl": "https://{teamSiteDomain}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=XXXXXXXXX-eadc-4020-b4e2-XXXXXXXb%26forceLocale={locale}",
"scopes": [
"personal"
]
}
],
"validDomains": [
"*.login.microsoftonline.com",
"*.sharepoint.com",
"*.sharepoint-df.com",
"spoppe-a.akamaihd.net",
"spoprod-a.akamaihd.net",
"resourceseng.blob.core.windows.net",
"msft.spoppe.com"
],
"webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "XXXXXXXX-eadc-4020-b4e2-XXXXXXXXXX"
}
}
I'm stuck with this, if somebody can give me a clue I will be grateful.
Regards