Ionic livereload to root page but need to last loaded page - ionic-framework

I am working with ionic application, ionic CLi 4.5.0
I am using using ionic serve & open preview in browser & when edit any file live reload load to root page but I need to load last woreking/loaded page
suppose root page is home so liveload always load at http://localhost:8100/#/home
if my last working/open page is http://localhost:8100/#/login and I make change in any file liveload still load at http://localhost:8100/#/home but I need to load at http://localhost:8100/#/login

It will always load the rootpage which you configured in your app.compontent.ts. If it is text change, it will do a hot-reload feature. If you make any changes in your component, it will restart from the root page.
The simple way to do is to store the session in observable object or session storage after successful login.
ionViewDidEnter() {
this.storage.get(LOCALSTORAGE.TOKEN).then((val) => {
if (val)
this.navCtrl.setRoot(HomePage);
});
}
Using an observable object,
private tokenString: BehaviorSubject<string>;
setTokenObject(val) {
if (val)
this.tokenString.next(val);
else
console.log(val);
}
getTokenObject() {
return this.tokenString.asObservable();
}
Updating the token in login success for the first time
this.tokenString.next(token); // here token should read it from your login response
Hope this helps!

Related

Open url and submitted data to app in flutter

I have a requirement ,in app I need to navigate the user to webview (website) and there will be a form with 5 fields and once the form is submitted a flag to be passed to app and app should work based on the flag .. So how it can be achieved
I have checked that there is a url_launcher or webview_flutter but i don know how to redirect the app once the form is submitted in website
I am not entirely sure if I understood the problem. But here is what can be done.
Open url in webview.
Now you should listen to webview state change. There must be a listener for this. say the listener is webViewStateChanged which will give you the state of webview.
Then you can check like
void webViewStateChanged(WebViewStateChanged newState) async {
if (newState.type != WebViewState.finishLoad ||
newState.url != desiredURL) {
return;
}
// At this point, you want to return to your app. If you need data from
// website, you can do so by accessing cookies of webview.
// Now you are back to the app, you can pop/replace the webview whatever
// is your requirement.

Ionic Capacitor Browser closes automatically

I am trying to implement an OAuth2 implicit grant frow with a redirect.
Using the browser like this:
import { Plugins } from '#capacitor/core';
const { Browser } = Plugins;
await Browser.open({ url: loginUrl });
results in navigating to the login page, but then immediately jumping back to the previous (main app) screen. Any idea why? BTW, Angular's Platform.paused observable is getting triggered when opening the url and when jumping back (not-paused) as well
In case someone else stumbles upon this issue:
the problem was only on an Android Emulator, not on a real device. Wiping data in the AVD manager made it work in the Emulator as well.

How do I call AdSense Auto Ads on route change for SPA (single page app)?

I have included the needed script tag in the global template.html file which contains all dynamic pages for my SPA (written in Sapper/Svelte).
www.ensueco.com
<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
​If I load the index page, auto ads load perfectly, but when I click a link navigating to another page/article, client-side routing will change the content in the content window, but won't recreate new autogenerated ads.
If I open a given article/subpage as initial page load, it also loads ads from auto ads perfectly, but clicking "home" in main navigation going back to the homepage, doesn't load new ads in the content window.
Q: How do I ask the adsbygoogle script to execute again on client-side routing to fill in auto ads on all pages?
I currently have a script that subscribes to route change events and forward these informations to Google Analytics:
page.subscribe(({ path, params, query }) => {
gtag("config", "GOOGLE_ANALYTICS", { page_path: path });
});
But not sure if I could do something similar in this to ask adsbygoogle to execute again? (below code has been tested and doesn't work)
page.subscribe(({ path, params, query }) => {
// (window.adsbygoogle = []).push({
// google_ad_client: "ca-pub-XXXXXXXXXXXXX",
// enable_page_level_ads: true,
// tag_partner: "site_kit"
// });
gtag("config", "GOOGLE_ANALYTICS", { page_path: path });
});
Above code at testing gives me this:
I get this error on route change then:
Uncaught
O {message: "adsbygoogle.push() error: Only one 'enable_page_level_ads' allowed per page.", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: Only one 'enab…esyndication.com/pagead/js/adsbygoogle.js:58:409)"}
And if I remove the enable_page_level_ads I get this:
Uncaught
O {message: "adsbygoogle.push() error: All ins elements in the … with class=adsbygoogle already have ads in them.", name: "TagError", pbr: true, stack: "TagError: adsbygoogle.push() error: All ins elemen…js/adsbygoogle.js:185:25)↵ at <anonymous>:1:38"}
So basically, I need to execute some method that creates new tags (based on auto ads) so I can execute this method and populate all the new ins elements. I think.
Thanks
ADDITIONAL THOUGHTS
From what I understand, the script is loaded post SSR (server-side rendering), why the content, HTML, CSS, and JS from my site already is loaded once the adsbygoogle script is executed.
From a development POW, I would expect it to be possible to empty the adsbygoogle array and re-initialize the ads by google script in order for the JS, to crawl the now dynamically loaded content and based on the new window.pushed URI (window.history.pushState()), and place new ads as it would have done anyway, should it have been loaded after this particular page's SSR.
Possible Solution with jQuery
Make a file:
If you place the script tag in a separate php/html file call it autoads.html and place you ads script tag inside it. Place this somewhere you can call it from on the server via URL.
<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Call the file:
Using jQuery .click & .load functions we can call the autoads.html via it's URL when a link with the class .myNavButton is clicked which should execute any scripts which the file contains.
As the script isn't visible we can just load it into the body tag, although any existing tag should work.
HTML
Home
Some Page
Another Page
jQuery
$(document).ready(function(){
$(".myNavButton").click(function(){
$("body").load("autoads.html");
});
});
Alternative:
As executing the script multiple times could cause conflict issues an alternative might be target the jQuery to reload any iframes on the page.
Maybe using something like this inside the click function?
$('iframe').attr('src', $('iframe').attr('src'));
Sources:
https://www.w3schools.com/jquery/ajax_load.asp
https://api.jquery.com/load/
https://css-tricks.com/snippets/jquery/force-iframe-to-reload/

Page should not active when reload

I am new to openui5 and developing web application. The page should not active when i reload the page. I am searching to do that using openui5 but i not getting idea about that.
Please help me anyone.
Use some session storage to check whether the page is reloaded and if reloaded just kill it. for example assuming you want to kill the page:
oStorage = jQuery.sap.storage("session");
$(window).load(function() {
if(!oStorage.get("is_reloaded")){
oStorage.put("is_reloaded",false);
}
checkNoOfVisits();
});
function checkNoOfVisits(){
if(oStorage.get("is_reloaded")){
window.stop();
}
else{
oStorage.put("is_reloaded",true);
}
}

Ionic 2 Livereload

When developing with Ionic 2 how does one stay on the current page when making code changes? In Ionic 1 livereload would take you back to your current url - however in ionic 2 there are no urls.
Is there a setting that will make livereload keep me on the current page?
I'm open to enabling URLs as well if that's what it takes to not have to manually navigate back to my page on every code change. However I haven't been able to find how to do that in the v2 docs yet.
To stop live reloading in Ionic2 following changes I have done in the configurations file : ionic.config.js.
In ionic.config.js
watch: {
sass: ['app/**/*.scss'],
html: ['app/**/*.html'],
livereload: [
'www/build/**/*.html',
'www/build/**/*.js',
'www/build/**/*.css'
]
}
above section edited to :
watch: {
sass: ['app/**/*.scss'],
html: ['app/**/*.html'],
}
Then stopped ionic serve by q, and again started. Auto refreshing got stopped, we have to manually refresh to reflect the latest changes.
You could set the this.rootPage in your app.component.ts to the page you are working on. I often do this if i am working on say the foobar.ts page for a while ill change it to
this.rootPage = FooBar;
And then change it back to the default root page when i am done.
Actually ionic.config.js has been deprecated . So i found a way may , go to this node_modules\#ionic\app-scripts\config . Change in file called watch.js
srcFiles: {
paths: ['{{SRC}}/**/*.(ts|html|s(c|a)ss)'],
options: { ignored: ['{{SRC}}/**/*.spec.ts', '{{SRC}}/**/*.e2e.ts', '**/*.DS_Store'] },
callback: watch.buildUpdate
},
No, there is no way to do what you are asking for, because ionic 2 is not using urls. Actually they are handling the pages as a variable on window, so when you or the live reload refresh the page it will go to the initial state. By the way actually there are no plans for implement the angular router, let's wait until the RC, maybe they would like to implement it