I am new to app building and I started using nuxt and capacitor to develop both an ios and android app. I was having trouble integrating push notifications with my app. I am using the #capacitor/push-notifications package. Is there any direction on how to integrate push notifications with nuxt and capacitor using this package. It would help if someone could walk through this step by step.
This is my nuxt.config.json file
import colors from 'vuetify/es5/util/colors'
export default {
// Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
ssr: false,
// Target (https://go.nuxtjs.dev/config-target)
target: 'static',
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
titleTemplate: '%s - title',
title: 'title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content:"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS (https://go.nuxtjs.dev/config-css)
css: [],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
'#/plugins/parse',
'#/plugins/axios',
{ src: '~plugins/leaflet.js', src: '~plugins/vuesocial.js', ssr: false },
],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
// https://go.nuxtjs.dev/eslint
// '#nuxtjs/eslint-module',
// https://go.nuxtjs.dev/vuetify
'#nuxtjs/vuetify',
'#nuxtjs/moment',
],
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
// https://go.nuxtjs.dev/pwa
'#nuxtjs/pwa',
'#nuxtjs/toast',
//nuxt-leaflet
'nuxt-leaflet',
['nuxt-stripe-module', {publishableKey:'...',}],
],
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
axios: {},
toast: {
position: 'bottom-left',
duration: 3000,
},
// Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
},
},
},
},
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
transpile: ['parse', 'axios'],
},
}
This is my capacitor.config.json
{
"appId":"com.undefined.mobile",
"appName":"undefined",
"bundledWebRuntime":false,
"npmClient": "yarn",
"webDir":"dist",
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
}
},
"cordova": {},
"server": {
"iosScheme": "nuxtmobile"
}
}
This is my Podfile
platform :ios, '13.0'
use_frameworks!
# workaround to avoid Xcode caching of Pods that requires
# Product -> Clean Build Folder after new Cordova plugins installed
# Requires CocoaPods 1.6 or newer
install! 'cocoapods', :disable_input_output_paths => true
def capacitor_pods
pod 'Capacitor', :path => '../../node_modules/#capacitor/ios'
pod 'CapacitorCordova', :path => '../../node_modules/#capacitor/ios'
pod 'CapacitorClipboard', :path => '../../node_modules/#capacitor/clipboard'
pod 'CapacitorGeolocation', :path => '../../node_modules/#capacitor/geolocation'
end
target 'App' do
capacitor_pods
# Add your Pods here
end
Related
I use Detox automation tool for bare React Native project. Everything works perfectly on iOS, but when I run tests on Android I get following errors:
DetoxRuntimeError: Detox can't seem to connect to the test app(s)!
HINT: Have you forgotten to call 'device.launchApp()' in the beginning of your test?
Refer to our troubleshooting guide, for full details: https://wix.github.io/Detox/docs/troubleshooting/running-tests#tests-execution-hangs
and
DetoxRuntimeError: The pending request #9 ("invoke") has been rejected due to the following error: The app has unexpectedly disconnected from Detox server.
Some tests have green status. Tests are run in parallel on multiple emulators.
Below is my configuration for detox:
/detoxrc.json
{
"testRunner": "jest",
"runnerConfig": "e2e/config.js",
"skipLegacyWorkersInjection": true,
"apps": {
"ios": {
"type": "ios.app",
"binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/ProjectName.app",
"build": "RN_SRC_EXT=e2e.js xcodebuild -workspace ios/ProjectName.xcworkspace -scheme ProjectName -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -UseModernBuildSystem=YES -destination 'platform=iOS Simulator,name=iPhone 11'"
},
"android": {
"type": "android.apk",
"binaryPath": "android/app/build/outputs/apk/release/app-release.apk",
"testBinaryPath": "android/app/build/outputs/apk/androidTest/release/app-release-androidTest.apk",
"build": "cd android && RN_SRC_EXT=e2e.js ./gradlew clean assembleRelease assembleAndroidTest -DtestBuildType=release && cd .."
}
},
"devices": {
"simulator": {
"type": "ios.simulator",
"device": {
"type": "iPhone 11"
}
},
"emulator": {
"type": "android.emulator",
"device": {
"avdName": "Pixel_XL"
}
}
},
"configurations": {
"ios": {
"device": "simulator",
"app": "ios"
},
"android": {
"device": "emulator",
"app": "android"
}
}
}
/e2e/config.js
module.exports = {
preset: 'react-native',
setupFilesAfterEnv: ["./init.js"],
setupFiles: [
"<rootDir>/../node_modules/react-native/jest/setup.js",
],
testPathIgnorePatterns: ["/node_modules/"],
testMatch: [
"<rootDir>/*.e2e.js"
],
transformIgnorePatterns: [
'node_modules/(?!(jest-)?#react-native|react-native|#react-native-community|#react-navigation)'
],
};
/e2e/init.js - File which is run after environment setup
import detox from 'detox';
import packageFile from '../package.json';
const detoxConfig = packageFile.detox;
jest.setTimeout(120000);
beforeAll(async () => {
await detox.init(detoxConfig, { launchApp: false });
await device.launchApp();
});
afterAll(async () => {
await detox.cleanup();
});
beforeEach(async () => {
await device.reloadReactNative();
});
and test files looks like similar to this one:
describe('some-screen-description', () => {
beforeEach(async () => {
await logInPage.tapLogInButton();
});
it('description', async () => {
await nextScreen.performAction();
});
});
/package.json
"detox": {
"test-runner": "jest",
"runner-config": "e2e/config.js"
}
I use following version of detox: "detox": "^19.6.9".
I use Macbook Pro with M1 processor. Any hints recommended.
Can anyone confirm that it can be problem with installing both APK and test APK ? I don't know how check that both are installed.
in your init.js inside your beforeAll hook, what's the first line doing? Did you try removing that line?
Regarding your apks being installed, if they weren't installed properly, you'd get a different error message(something like the apks couldn't be found, did you run detox build beofre it?). And also looking at your config file + detox build command I'm sure that the apks were built and they're in the right place. To double check you can go to your android's build output directory(see the paths mentioned in binaryPath and testBinaryPath inside your detox config)
I set up a pipeline on a CI/CD (Azure Devops) to build my react native app, specifically for android.
Even though it builds correctly on my local mac (Mac OS 12.1), and assembles to a valid APK correctly, the same build step throws an error in the pipeline either using a Mac agent (MacOS 10.15 | 11), or Linux agents (Ubuntu 18.04 | 20.04).
This is the error:
> Task :app:bundleProductionReleaseJsAndAssets FAILED
Error: Cannot find module 'babel-plugin-module-resolver'
Require stack:
- /Users/runner/work/1/s/babel.config.js
- /Users/runner/work/1/s/node_modules/#babel/core/lib/config/files/module-types.js
- /Users/runner/work/1/s/node_modules/#babel/core/lib/config/files/configuration.js
- /Users/runner/work/1/s/node_modules/#babel/core/lib/config/files/index.js
- /Users/runner/work/1/s/node_modules/#babel/core/lib/index.js
- /Users/runner/work/1/s/node_modules/metro-react-native-babel-transformer/src/index.js
- /Users/runner/work/1/s/node_modules/metro-transform-worker/src/index.js
- /Users/runner/work/1/s/node_modules/metro/src/DeltaBundler/Worker.js
error index.js: Cannot find module 'babel-plugin-module-resolver'
Require stack:
- /Users/runner/work/1/s/babel.config.js
- /Users/runner/work/1/s/node_modules/#babel/core/lib/config/files/module-types.js
- /Users/runner/work/1/s/node_modules/#babel/core/lib/config/files/configuration.js
- /Users/runner/work/1/s/node_modules/#babel/core/lib/config/files/index.js
- /Users/runner/work/1/s/node_modules/#babel/core/lib/index.js
- /Users/runner/work/1/s/node_modules/metro-react-native-babel-transformer/src/index.js
- /Users/runner/work/1/s/node_modules/metro-transform-worker/src/index.js
- /Users/runner/work/1/s/node_modules/metro/src/DeltaBundler/Worker.js
- /Users/runner/work/1/s/node_modules/metro/node_modules/jest-worker/build/workers/processChild.js.
- /Users/runner/work/1/s/node_modules/metro/node_modules/jest-worker/build/workers/processChild.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.resolve (internal/modules/cjs/helpers.js:98:19)
at module.exports (/Users/runner/work/1/s/babel.config.js:7:17)
at readConfigJS (/Users/runner/work/1/s/node_modules/#babel/core/lib/config/files/configuration.js:227:15)
at readConfigJS.next (<anonymous>)
at Function.<anonymous> (/Users/runner/work/1/s/node_modules/#babel/core/lib/gensync-utils/async.js:25:3)
at Generator.next (<anonymous>)
at evaluateSync (/Users/runner/work/1/s/node_modules/gensync/index.js:251:28)
at Function.sync (/Users/runner/work/1/s/node_modules/gensync/index.js:89:14)
This is my babel.config.js:
module.exports = function (api) {
api.cache(true);
return {
presets: ['module:metro-react-native-babel-preset', 'module:#babel/preset-typescript'],
plugins: [
[
require.resolve('babel-plugin-module-resolver'),
{
root: ['./'],
extensions: [
'.ios.ts',
'.android.ts',
'.ts',
'.ios.tsx',
'.android.tsx',
'.tsx',
'.jsx',
'.js',
'.json',
],
alias: {
'#components': ['./src/components'],
'#screens': ['./src/screens/'],
'#shared': ['./src/shared/'],
'#static': ['./src/static/'],
'#stores': ['./src/stores/'],
'#styles': ['./src/styles/'],
},
},
],
[
'module:react-native-dotenv',
{
moduleName: '#env',
path: '.env',
blacklist: null,
whitelist: null,
safe: true,
allowUndefined: true,
},
],
'react-native-reanimated/plugin', // this plugin should be always at the end
],
};
};
And my package.json (a reduced version in terms of dependencies for simplicity):
{
...
"dependencies": {
"react": "17.0.2",
// others not relevant
},
"devDependencies": {
"#babel/core": "7.17.8",
"#babel/preset-env": "7.16.11",
"#babel/runtime": "7.17.8",
"babel-plugin-module-resolver": "4.1.0",
"metro-react-native-babel-preset": "0.70.0",
"react-native-dotenv": "3.3.1",
// others not relevant
},
"resolutions": {
"#types/react": "^17"
}
}
I know that a similar question has been already asked, but it doesn't have any response and it has an issue building the project even in a local machine. I only have this issue in the pipeline.
I have a problem in the router when I want to wrap to a Cordova app for android. The problem seems to be in router module but I can't figured what is going wrong.
The problem is this
Everything works well in the angular app when I run it in a browser. All the routes are working correctly and I made a deploy which also works correctly. But when I want to build the apk with the compiled code in "dist" folder, it seems like the routing is not working.
This is my principal routes imported in the app module
const routes: Routes = [
{
path: '',
component: AppLayoutComponent,
canActivate: [AuthGuard],
children: [
{ path: '', loadChildren: () => import('./pages/modules/dashboards/dashboards.module').then(m => m.DashboardsModule),canActivate: [CheckTokenGuard] },
{ path: 'orders', pathMatch: 'full', loadChildren: () => import('./pages/modules/orders/orders.module').then(m => m.OrdersModule), canActivate: [CheckTokenGuard] }
]
},
{
path: '',
component: AuthLayoutComponent,
children: [
{ path: 'session', loadChildren: () => import('./pages/modules/session/session.module').then(m => m.SessionModule) }
]
},
{
path: '**',
redirectTo: 'session/not-found'
}
];
#NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule { }
Then, the auth guard looks like this:
export class AuthAdminGuard implements CanActivate {
constructor(private router: Router) { }
public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (localStorage.getItem('sessiontoken')) {
if (JSON.parse(localStorage.getItem('sessiontoken')).type === 'ADMIN') {
return true;
}
}
// not logged in so redirect to login page with the return url
localStorage.removeItem('sessiontoken');
this.router.navigate(['session/signin']);
return false;
}
}
Auth layout component looks like this:
<div>
<router-outlet></router-outlet>
</div>
As I say, this is actually working in localhost and even in my server, but when I generate the apk It automatically redirects to the "session/not-found" path like it doesn't recognize the root "session/signin".
I build the app using ng build --aot --output-hashing all and also I change the base href with <base href="./"> and put the cordova script in the index.html
I tried everything but nothing seems to work. Pleas help
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 just downloaded sencha touch 2.4 and created a test android app. I am able to compile and run the app on android 4+ without problems. However, when I try to run it on android 2.3, the app doesn't go past the app loader indicator and I logged the process no errors are being displayed. Following is the code:
Ext.application({
name: 'Voice',
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('Voice.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
and the main code:
Ext.define('Voice.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
scrollable: true,
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
}]
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
]
}
});
I think it must be a bug in the 2.4 sencha touch release
We also had the same issue and it seems that it is a bug introduced in Sencha Touch 2.4.
And the reason is the usage of bind() method which is a part of ECMAScript 5 not supported on android 2.3
So to fix it you can find the file touch\src\event\publisher\TouchGesture.js and replace the following lines
if (Ext.feature.has.Touch) {
// bind handlers that are only invoked when the browser has touchevents
me.onTargetTouchMove = me.onTargetTouchMove.bind(me);
me.onTargetTouchEnd = me.onTargetTouchEnd.bind(me);
}
with these
if (Ext.feature.has.Touch) {
// bind handlers that are only invoked when the browser has touchevents
me.onTargetTouchMove = Ext.Function.bind(me.onTargetTouchMove, me);
me.onTargetTouchEnd = Ext.Function.bind(me.onTargetTouchEnd, me);
}
This solution helped us to avoid the problem