Is there a way to use both localNotificationSchedule and Firebase Remote Push Notification in a React Native app at the same time?
Using the common library on https://github.com/zo0r/react-native-push-notification says that the AndroidManifest.xml needs two different services
<!-- < Only if you're using GCM or localNotificationSchedule() > -->
<service
android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerServiceGcm"
android:exported="false" >
<intent-filter>
<action android:name="com.google.android.c2dm.intent.RECEIVE" />
</intent-filter>
</service>
<!-- </ Only if you're using GCM or localNotificationSchedule() > -->
<!-- < Else > -->
<service
android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
android:exported="false" >
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</service>
<!-- </Else> -->
So do I have to choose either of them?
I am using OneSignal myself, but I can tell you you need to add both if you want to use local notifications.
Also, GCM will be deprecated in a few weeks so you don't want to use that one. Just use FCM from Firebase.
Related
We are migrating our React Web App to a Linux App Service from a Windows App Service. We had a custom web.config that would handle routing so that when a user manually visits one of our routes, they would not run into a 404. This fix is not working on a Linux App Service.
We're running into 404's and we need this to work as we have custom routes that the user should be able to reach. The site works if they route to the default index.html, but custom routes don't. We've tried creating a new Windows App Service and the migration works just fine. Any ideas on how to get custom routes working in a Linux App Service?
Here's our web.config we are currently using:
<?xml version="1.0"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<remove fileExtension=".otf" />
<remove fileExtension=".ttf" />
<remove fileExtension=".eot" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
<mimeMap fileExtension=".otf" mimeType="application/font-otf" />
<mimeMap fileExtension=".ttf" mimeType="application/font-ttf" />
<mimeMap fileExtension=".eot" mimeType="application/font-eot" />
<clientCache cacheControlMode="DisableCache" />
</staticContent>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
As you are running your app in a Linux App Service you don't need a web.config file since its only used by IIS, as #PeterPan already said.
To run your React web app in Azure Linux Web App Service, and make any direct access on custom routes be handled by index.html you need to configure the startup command on "Settings > General settings > Startup Command" like the exemple below. Remember to change the path to your build path.
pm2 serve /home/site/wwwroot/build --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.
You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
I've coped with the same problem recently: React router direct links not working on Azure Web App Linux
Azure Linux WebApp is based on Docker Container which be different from Azure Windows WebApp with IIS and web.config.
So you just need to remove the web.config file and make it run on local or a docker container, then to build it as a docker image or use Azure CLI to deploy to Azure WebApp for Container.
There are two offical documents you can refer to.
Create a Node.js app in Azure for Linux
Run a custom Linux container in Azure App Service
I have an AngularJS SPA application that I have developed using Visual Studio 2015. When I click publish it publishes the index.html and works just fine. However if I am on a page and I click refresh then it tries to do a refresh of the SPA page such as example.com/home/about. This fails as I don't have a home/about page.
Is there some way that I could modify my web.config file (just for local testing) so that it would actually go to the index.html (load that up) and then to the /home/about state?
Here's my current web.config:
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
</configuration>
It seems you are using html5mode. In this case there's no # to keep the URL changing from requesting to the server.
With this configuration, you need help from the server. It will serve the index.html when it receives requests from your SPA routes.
This SO answer has details on configuring URL Rewrite on web.config:
Rules go by:
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
It assumes your API is under: /api and for any directory or file that it finds, it serves as-is.
Anything else, gets rewritten to / which having default document configured to index.html, will load you SPA.
Also note you need to install the URL Rewrite module for IIS (IIS Express doesn't need the module)
Another option is one of these lightweight HTTP servers npm packages.
John Papa has one: lite-server. It uses BrowserSync under the hood:
BrowserSync does most of what we want in a super fast lightweight
development server. It serves the static content, detects changes,
refreshes the browser, and offers many customizations.
When creating a SPA there are routes that are only known to the
browser. For example, /customer/21 may be a client side route for an
Angular app. If this route is entered manually or linked to directly
as the entry point of the Angular app (aka a deep link) the static
server will receive the request, because Angular is not loaded yet.
The server will not find a match for the route and thus return a 404.
The desired behavior in this case is to return the index.html (or
whatever starting page of the app we have defined). BrowserSync does
not automatically allow for a fallback page. But it does allow for
custom middleware. This is where lite-server steps in.
lite-server is a simple customized wrapper around BrowserSync to make
it easy to serve SPAs.
I am creating an angular app, that will later be compiled on phonegap for android and ios. i have tried numerous plugins to integrate into facebook (mainly for login and sharing to facebook) on development - in the chrome browser while running on phonegap server, this works well.
I am able to click and share or have the pop up screen for permissions come up. however when i compile the the code and run it on a device it no longer works. i am suspecting this is because the the app does not have access to the device browser? or does not allow pop up in app? How can i resolve this problem? is cordova inapp the only way?
The updated cordova version doesn't allow the app to make any request outside the app. You need to follow the instructions in order to make it work.
Add the "Cordova Whitelist Plugin" in your config.xml
<gap:plugin name="cordova-plugin-whitelist" spec="1.1.0" />
Or simply
<plugin name="cordova-plugin-whitelist" spec="1.1.0" />
Try putting the following in your config.xml
<content src="index.html" />
is the path to your HTML file inside the source directory.
<access origin="*" />
will allow you to make a request anywhere from your app.
At the end, put the following intents
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
It will solve your problem. Give it a try and let me know!
I have an app using cordova and angularjs. Some features on the app require access to the Google Maps API and Yahoo Weather API.
When I compile to Android and iOS platforms everything works fine, but not on windows platform (windows phone 8.1). I get these errors on both calls (google and yahoo):
"**APPHOST9601** An app can't load remote web content in the local context".
I think I have the cordova-plugin-whitelist correctly configured with the proper intent, navigation and network tags on config.xml (I also have the meta tag on index.html).
Strangely if I add wp8 cordova platform and run it, I have no errors. Only on the windows platform running the windows phone 8.1 project inside the solution.
This is what I have in the config.XML
<!--Controls which URLs the WebView itself can be navigated to. Applies to top-level navigations only.-->
<allow-navigation href="*" />
<!-- Controls which URLs the app is allowed to ask the system to open. By default, no external URLs are allowed. -->
<allow-intent href="comgooglemaps:*" />
<allow-intent href="sms:*" />
<allow-intent href="tel:*" />
<allow-intent href="geo:*" />
<allow-intent href="*" />
<!-- Controls which network requests (images, XHRs, etc) are allowed to be made (via cordova native hooks). -->
<access origin="https://tel:*" launch-external="yes" />
<access origin="https://mailto:*" launch-external="yes" />
<access origin="https://geo:*" launch-external="yes" />
<access origin="https://comgooglemaps:*" launch-external="yes" />
<access origin="https://*" />
<access origin="http://maps.google.com/*" />
<access origin="content:///*" />
<access origin="*"/> and I also have this in the HTML page <!-- Enable all requests, inline styles, and eval() -->
And in the HTML I have the following metadata
<meta http-equiv="Content-Security-Policy" content="default-src *; media-src *; style-src 'self' * 'unsafe-inline' * 'unsafe-eval' *; script-src 'self' * 'unsafe-inline' * 'unsafe-eval' *" />
I'm developing a Windows Phone 8.1 app using WinJs 2.1 and AngularJS 1.4. It worked fine until I needed to add either Google or Bing maps. I tried the following example but I got the following error.
Network request to https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization did not succeed.
Your application manifest does not declare the following capabilities: internetClient privateNetworkClientServer
http://www.creepyed.com/2012/11/how-to-use-the-google-maps-api-on-windows-8/
Does anyone gone through the same issue or used something I missed to get this done?
I have added the following lines in my manifest
<ApplicationContentUriRules>
<Rule Type="include" Match="https://maps.googleapis.com/maps/api/js*" />
<Rule Type="include" Match="https://www.google.com/" />
<Rule Type="include" Match="https://earthquake.usgs.gov/" />
<Rule Type="include" Match="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx"/>
</ApplicationContentUriRules>
</Application>
</Applications>
<Capabilities>
<Capability Name="internetClientServer" />
<Capability Name="internetClient" />
<Capability Name="privateNetworkClientServer" />
<DeviceCapability Name="location" />
</Capabilities>
Thanks!