Are push notifications supported in Ionic3?

I've been struggling to set up push notifications in my Ionic3 app for the past couple of days, and no matter what I try, it doesn't seem to work due to the current versions I'm using.

Here are my current versions:

rxjs: 5.5.11

Angular: 5.2.11

Typescript: ~2.6.2

Firebase: 5.8.2

@angular/fire: ^5.1.1

angularfire2: ^5.1.1

Some methods I've attempted:

1) AngularFirestore-Firebase Native

Encountering an error 'Object(...) is not a function' due to my rxjs version being outdated. Updating rxjs to version 6 presented TypeScript errors as it required features from ts 2.8 which was unsupported by Ionic. Upgrading Ionic to version 4 would resolve this issue but I'd prefer not to invest time in that now.

2) ionic-push

Still facing the same 'Object(...) is not a function' error.

3) FCM

Weirdly, I can't add FCM to the providers in app.module.ts. TypeScript throws an error stating that FCM cannot be used as a provider.

Any suggestions on how to implement push notifications with my current package versions? Thanks in advance!

angulartypescriptionic3

Answer №1

Encountered a similar issue recently while attempting to use AngularFire + Firebase in Ionic 3. In my scenario, AngularFire wasn't necessary (mostly for storing data in Firebase DB). Instead, I opted to use 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3935283e352c3b772a36283f383b293f1a68746a746f">[email protected]</a>
with @ionic-native/firebase@^4.20.0. This setup allowed me to successfully build and enable notifications on Android (iOS testing pending).

If your aim is solely push notifications, consider utilizing the Firebase plugin (along with the Ionic Native wrapper).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Loading and unloading an Angular 6 component

One challenge I'm facing involves creating an image modal that appears when an image is clicked. Currently, I have it set up so that the child component loads upon clicking the image. However, the issue is that it can only be clicked once and then dis ...

angulartypescriptfrontendangular6angular-components

The custom resolver for product page metadata is not being activated

I'm having an issue with implementing Meta Description on my PDP page in Spartacus version 6.5. I have added a resolver that extends ProductPageMetaResolver into the providers section of my custom product.module file. However, for some reason, my &apo ...

angularmeta-tagsspartacus-storefront

Determining the type of a keyof T in Typescript

I am currently working on developing a reusable function that takes an observable and applies various operators to return another observable. One issue I am facing is getting the correct type for the value based on the use of the key. The code snippet bel ...

typescript

Creating a flexible parent tag for grouping child elements using Angular 2

My Objective I am determined to develop an Angular 2 button component that can dynamically render as either an <a /> tag or an <input /> tag based on the value of a property called type. Furthermore, this button component should be able to acc ...

javascriptangular

Dealing with client-side exceptions in a Next.js 13 application's directory error handling

After carefully following the provided instructions on error handling in the Routing: Error Handling documentation, I have successfully implemented both error.tsx and global-error.tsx components in nested routes as well as the root app directory. However, ...

javascriptreactjstypescriptnext.jserror-handling

Guide: Implementing material-ui theme with redux in gatsby

I'm currently utilizing the material-ui theme in conjunction with redux-toolkit within a gatsby project. This is my theme.ts file: import { createMuiTheme } from "@material-ui/core"; import { useSelector } from "react-redux"; import { State } from ". ...

javascriptreactjstypescriptreduxmaterial-ui

Using TypeScript to filter and compare two arrays based on a specific condition

Can someone help me with filtering certain attributes using another array? If a condition is met, I would like to return other attributes. Here's an example: Array1 = [{offenceCode: 'JLN14', offenceDesc:'Speeding'}] Array2 = [{id ...

javascriptangulartypescript

Contact creation not working on non-HubSpot form popups

I'm currently experiencing an issue with my website that has non-Hubspot forms. We have successfully integrated the tracking code to generate cookies for users, track their sessions, and enable the non-Hubspot forms. However, we are facing a problem s ...

reactjstypescriptnext.jshubspot

Progressive series of observable conditions

The issue at hand: I am faced with the task of checking multiple conditions, some of which lead to the same outcome. Here is the current flow: First, I check if a form is saved locally If it is saved locally, I display text 1 to the user If not saved l ...

angulartypescriptrxjs

Angular Elements generates compact, single-line HTML output

It's incredibly frustrating how browsers handle inline-block elements, creating invisible margins when placed side by side. You can experience this "bug" firsthand here: http://jsfiddle.net/8o50engu/ Interestingly, if these elements are on the same l ...

angularangular6angular-elements

A guide to configuring VSCode to recognize the DefinitelyTyped global variable (grecaptcha) within a Vuejs 3 TypeScript project

I have recently set up a new project using Vue.js 3 and TypeScript by running the command npm init vue@latest. I now want to integrate reCaptcha v2 into the project from scratch, without relying on pre-existing libraries like vue3-recaptcha-v2. Instead of ...

typescriptvue.jsvuejs3vitegrecaptcha

Tips for avoiding the influence of the parent div's opacity on child divs within a Primeng Carousel

I'm struggling to find a solution to stop the "opacity" effect of the parent container from affecting the child containers. In my code, I want the opacity not to impact the buttons within the elements. I have tried using "radial-gradient" for multipl ...

javascripthtmlcssangulartypescript

Retrieving data and parameter data simultaneously from the ActivatedRoute

I am currently utilizing Angular and have a webpage where I need to send data to another page. Transmit an array of selected values Generate multiple records (associating with a model) this.activatedRoute.data.subscribe(({ model] }) => { setTim ...

angulartypescriptangular-routingangular-router

Bar chart in Chart.js becomes crowded and illegible on smaller screens due to overlapping bars

Hello there! I've encountered an issue where the bar chart overlaps when the screen width is too low. It seems to be related to the maintainAspectRatio property, which I set to false because I wanted the charts to shrink only in width, not in both axe ...

angulartypescriptchart.jsng2-charts

Guide to Displaying Individual Observable Information in HTML with Ionic 3

When using Observable to retrieve a single object from Firebase, how can I display this data on an HTML page? I attempted to use {{(postObservable2|async)?.subject}}, but it does not render. Another approach involved AngularFireObject, yet it resulted in ...

angularionic3observableangularfire5

When the session times out in Angular 5, the previous user's credentials remain on the page instead of being replaced with the current user's information

When switching from one user to another in Angular 5, I am facing an issue where the previous user's credentials are displayed instead of the current user's until I refresh the page. I have tried using the localstorage.clear() method but it doesn ...

angular.net-coreangular5

Tips for successfully passing a prop to a custom root component in material-ui@next with TypeScript

Is there a way to properly render a ListItem component with react-router Link as the root component? Here's the code snippet in question: <ListItem to="/profile" component={Link} > Profile ...

reactjstypescriptreact-routermaterial-ui

Having trouble retrieving information from hash fetch fragment following authentication redirection in Angular 4

Once the authorization process is complete, the browser will be redirected to the following URL: &token_type=bearer&state=XYZ&expires_in=3599 However, just before I can retrieve the details, everything seems to disappear and the browser' ...

angularhttp-redirectaccess-token

What is the best way to apply a custom date format of 'MM/DD/YYYY H:MM am/pm' with moment.js?

I recently started using Angular4 and moment.js to work with dates. I created a custom format: 'MM/DD/YYYY H:MM am/pm' but I'm having trouble implementing it correctly. Here is my Component.ts file: import * as moment from 'moment&apo ...

angularmomentjs

"Sorry, but it appears that the tooltip-basic module is

I have been attempting to implement ng-bootstrap tooltips (or any of their widgets) in my Angular 7 application. Despite what seems to be a successful installation of ng-bootstrap, I am facing an issue where nothing happens when I try to use the tooltip as ...

angularmoduleng-bootstrap