I have seen most of the mobile application has an intro slider when we first time installs the app.
I searched on google but all of them are old version of Ionic with Angular.
I'm very confused about where to put the component and how should I manage the state.
I'm using Capacitor in my application and I think the capacitor has storage.
I also want to know what is the proper flow of doing this thing.
Thanks in advance.
To remember or track if the slider was shown before you have to store some kind of information to the device. You can use the localStorage or capacitor storage plugin. I will recommend using the plugin as localStorage data might get removed by the operating system or user after some time.
Here is the process to achieve this using the plugin.
Install and sync the plugin
If you are using the Capacitor version 2 or less, you don't have to install it.
npm install #capacitor/storage
npx cap sync
Use it like this
import { Storage } from '#capacitor/storage';
const { value } = Storage.get({
key: 'introShowed',
});
if (!value) {
// logic to show the intro goes here
// set the value to true so next time this code block will not be executed
Storage.set({
key: 'introShowed',
value: true,
});
}
When main layout is created you can store an value to Storage.
And after that you can check for it.
Related
I'm pretty new to javascript programming, I managed to make a PWA type application, made with Quasar, and now I'm looking for a solution to exclude some routes. I'm trying to exclude for example "/registerWoE" from appearing the install button. My app is purposed to be a B2C app.
Case 1: If a Client wants to register on the app via path above, provided by an employee I don't want the Install button to appear.
Case 2: If an Employee access "/admin" path, the Install button can appear and the Employee can install his application in the phone / PC for easier access.
I found that I need to change to "/src-pwa/custom-service-worker.js", but I couldn't figure out how to exclude that path.
You can add this snippet to the pages you want to ignore.
See beforeinstallprompt on MDN
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e; // if you want to automate showing it later
});
My website gathers information for Google Analytics, so I need to include a Cookie consent banner for the users to opt in/out of.
I saw the plugin gatsby-plugin-gdpr-cookies and thought it looked perfect.
I've followed the startup and have it inside my config file. However I'm not sure what to do next. Do I need to create a banner component and link it all up somehow? I've tried to look around for other examples but can't see any.
Any help appreciated, thanks.
You have to combine a Gatsby plugin and build your own cookie consent banner or use a ready made component to achieve this.
First as AskaNor_29 suggested you need to install and configure the gatsby-plugin-gdpr-cookies plugin. You can get the plugin here.
Configure the plugin in gatsby-config.js
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-gdpr-cookies`,
options: {
googleAnalytics: {
trackingId: 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID',
// Setting this parameter is optional
anonymize: true
},
facebookPixel: {
pixelId: 'YOUR_FACEBOOK_PIXEL_ID'
},
// Defines the environments where the tracking should be available - default is ["production"]
environments: ['production', 'development']
},
},
],
}
The second part is showing a cookie consent banner or modal so the user can make his choice.
For this you can use the react-cookie-consent npm module. You can get the npm package here.
To make it work with the gatsby-plugin-gdpr-cookies, you need to set the cookieName="gatsby-gdpr-google-analytics" prop.
Then you put the CookieConsent component in your layout.js file so it's activated on any page the user visits first.
<CookieConsent
location="bottom"
buttonText="Accept"
declineButtonText="Decline"
cookieName="gatsby-gdpr-google-analytics">
This site uses cookies ...
</CookieConsent>
The component takes many props so you can tweak the behaviour and looks.
If you want both Google Analytics and Facebook Pixel cookies to be set, there are callbacks for accepting/declining cookies where you can add your custom code to set both cookies.
If you're interested I wrote a longer how-to describing the steps.
From the plugin page
First of all the plugin checks in which environment your site is running. If it’s currently running in one of your defined environments it will add the Facebook Pixel javascript by default to the of your site. It will not be activated or initialized by this.
By default this plugin will not send any data to Google or Facebook to
make it GDPR compliant. The user first needs to accept your cookie
policy. By accepting that you need to set two cookies -
gatsby-gdpr-google-analytics and gatsby-gdpr-facebook-pixel. Depending
on the user input the value of each of the cookies should be true or
false.
If the gatsby-gdpr-google-analytics cookie is set to true, Google
Analytics will be initialized onClientEntry. Same is for the Facebook
Pixel.
The page view will then be tracked on onRouteUpdate.
So you should build a banner component and set the cookies to true or false, it depends on the user choice.
Attention, I had an issue with tracking via Google Analytics. After a lot of research I found the solution in the reactGaOptions which is used under the hood by gatsby-plugin-google-analytics-gdpr.
Use the sampleRate option to enable 100% tracking so that also mobilephones will send the requests to Google. In normal mode it is set to 1% so in low bandwith you will loose a lot of user information.
reactGaOptions: {
debug: false,
gaOptions: {
sampleRate: 100,
siteSpeedSampleRate: 100
}
}
I recently developed an Android App with native vue.js.
I used geolocation plugin and its works perfectly on devices with google play services but not on those where Google services are deactivated.
I am searching for a module which can make location possible on devices without Google services.
Your help is needed.
Try this,
import * as application from "application";
const PLAY_SERVICES_RESOLUTION_REQUEST = 9999;
...
isGooglePlayServicesAvailable() {
const googleApiAvailability = com.google.android.gms.common.GoogleApiAvailability.getInstance();
const resultCode = googleApiAvailability.isGooglePlayServicesAvailable(application.android.context);
if (resultCode != com.google.android.gms.common.ConnectionResult.SUCCESS) {
if (googleApiAvailability.isUserResolvableError(resultCode)) {
apiAvailability.getErrorDialog(application.android.context, resultCode, PLAY_SERVICES_RESOLUTION_REQUEST)
.show();
}
return false;
}
return true;
}
...
It would notify and install play services if not available.
As it is an android app, you can use LocationManager and set the appropriate provider, GPS or NETWORK.
I am not an expert in vue, so can not give you code but as you have access to all native APIs in nativescript, you can convert that.
Sample
LocationManager locationManager = (LocationManager) getApplicationContext().getSystemService(LOCATION_SERVICE);
Location location = locationManager.getLastKnownLocation(LocationManager.NETWORK_PROVIDER);
I have used it before in nativescript angular app.
For location strategies, you can refer here.
I met the same problem, and finally I fixed it, the problem is, nativescript-geolocation v3.0.1 do not deponds on google play service, but it is outdated and not work with tns v6. this is my solution:
you can get the code of nativescript-geolocation v3.0.1, modify a little, and then, depend the source code on your tns v6 project, it works. following is the details.
git#github.com:NativeScript/nativescript-geolocation.git
cd nativescript-geolocation
git checkout -b your-branch v3.0.1
next, modify the code of src/geolocation.android.ts file, just one line
- let currentContext = <android.app.Activity>androidAppInstance.currentContext;
+ let currentContext = <android.app.Activity>androidAppInstance.context;
next, use the source code dependency in your project,
tns plugin add /path/to/nativescript-geolocation/src
you can see demo/app/main-page.ts file in the git repo for how to use this plugin of this version.
After using the below code. App is launching the native android map showing the app with passed lat and long value.but my problem is after clicking on the nav option the 'from' is blank but 'to' should be coming as my passed value. But it is coming as blank value.
window.location = 'geo:40.765819,-73.975866'
If you are willing to use Cordova plugins, then I would suggest taking a look at the Launch Navigator plugin.
It allows you to do exactly what you want, but also allows you to launch other supported apps and even allows you to prompt the user with a list of applications to choose from.
There is an example in the documentation, showing how you can open a specific application, like Google Maps. For your convenience, I have also posted it below.
launchnavigator.isAppAvailable(launchnavigator.APP.GOOGLE_MAPS, function(isAvailable) {
var app;
if(isAvailable) {
app = launchnavigator.APP.GOOGLE_MAPS;
} else {
console.log("Google Maps not available - falling back to user selection");
app = launchnavigator.APP.USER_SELECT;
}
launchnavigator.navigate([40.765819, -73.975866], {
app: app
});
});
In this piece of code, the user will still be given a choice to pick another app, if Google Maps is not available.
There is also an AngularJS wrapper available for this called ngCordova, installation instructions are here and documentation about the wrapper for the Launch Navigator plugin can be found here.
I'm developing a phonegap app and hot code push is causing a problem for some of my users (after push, app hangs and users have to re-install the new app).
I'd like to disable hot code pushes and found the following snippet but am getting the error, "TypeError: Cannot call method 'onMigrate' of undefined"
Meteor._reload.onMigrate(function() {
return [false];
});
Looks like the _reload object is only available on the client. I moved the snippet of code to a client directory and that solved it.
Leaving this question / answer here for anyone else who might come across it.
You can set the environment variable AUTOUPDATE_VERSION to something static. You need to set this environment variable when you build your app and when you start the server. (Source)