Html Popup to add PWA icon to Phone - javascript

Ok, I haven't found an answer to this.
I need to create a Popup in HTML that allows me to install the PWA Icon on the home screen, and I am not speaking of the regular install banner.
I already know how to do this by using the manifest and the service worker.
Now, to understand this, what I need you can see this behavior when installing Instagram PWA.
Instagram shows this html popup, I guess that theres some sort of javacript code that gest fired when pressing the button, it fires the regular
install banner.
Any idea?

When the PWA meets the requirements for adding to home screen, the browser fires a "beforeinstallprompt" event. The event may be caught and fired manually again at a later time. Basically: listen for the event, grab it if it fires, show the user your custom add to home screen view, if the user clicks re-fire the vent.
Specific details and code samples: https://developers.google.com/web/fundamentals/app-install-banners/

Related

Is there a way to detect user's actions on a webpage for Chrome Extension

I want to trigger some event on my extension whenever
the website page is loaded
user navigates on the same page by clicking
some links
The first, I can accomplish with:
chrome.tabs.onUpdated.addListener(...)
But it does not trigger when the user click something to navigate through the page. (it's a single-page application)
You should use click listeners or MutationObservers in your content script.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe

Adobe analytics- Exit Click coming always with page view for all links within app

Recently implemented adobe analytics in our application and i can see all adobe clicks well. But somehow for all link clicks within application am seeing Exit click(which is not needed) along with page views.
Can anyone know why exit click is getting triggered along with page view. its not supposed to trigger unless we navigate from our current application.
Any help will be highly appreciated
Thanks
If you are using Launch and Adobe Analytics Extension, navigate to the extension configuration, and under LINK TRACKING, for every domain you do not want to track as exit links, add an entry for the domain under the Never Track field. Domains can be partially matched, e.g. putting ".mysite.com" will count for www.mysite.com, foo.mysite.com, etc.
If you do not want any exit link tracking to fire at all, then you can skip the above and just uncheck the Track outbound links checkbox.
If you are not using Launch / Adobe Analytics Extension (e.g. full custom coding somewhere), then within your code, look for these variables:
s.trackExternalLinks - This controls whether or not to track exit links (same as the Track outbound links checkbox in the Launch extension). Since you see exit link triggering, this should currently be set to true. Change it to false or remove it if you do not want to track any links as exit link clicks.
s.linkInternalFilters - This is a comma delimited list of domains to match against the link's href attribute (similar to the Never Track field in the Launch extension). Anything on this list will count as internal and exit link tracking will not trigger. If you do want exit link tracking in general, but want to suppress it for links that point to other pages of your site, leave s.trackExternalLinks=true, and add domain(s) here.

Navigate between facebook profiles listener

I'm developing a google chrome extension that will insert a button in facebook profile cover, using content script that documented in chrome API i can insert that button on the refresh the page or open the profile in other window - tab, the problem is open any profile link in the same window - tab will not add that button! I think facebook load the content via AJAX without refresh the page.
I used that code:
$("div#contentArea").on("DOMNodeInserted DOMSubtreeModified DOMNodeRemoved",function() {
// Do somthing
});
but it does not fire on navigate between profiles!
How to know if the user is open other profile? I'm thinking to check url for every 1 seconds but is that the final solution?
I know it's been long time for this question, but I see it will be better to share the solution, a new one!
It's not good to use any of these DOMNodeInserted DOMSubtreeModified DOMNodeRemoved, instead use this API from HTML5 MutationObserver.
There is more than that you can use within MutationObserver is this library mutation-summary.
Thanks for Firefox developers because they share this with me when I submitted this add-on to store.
Best if luck to all.

Looking to Mimic GMail page change detection behavior

I would like to have my web app be abple to pop open new windows like GMail does for chats and phone calls but I'd also like to be able to detect if they click on something in the nav that will take the main window to another URL and break the code running in the popups windows.
Ideally it would prompt them and give them a chance to cancel the page change and not break the app. Any ideas how GMail does this?
You want to use the onbeforeunload event. The string you return will be displayed to the user in a dialog, giving the user the option of canceling the page navigation.

Facebook Connect Bug - JavaScript Refresh

Facebook Connect has a recent bug that is causing the permissions pop-up window to not close and refresh the parent window as it is designed to do. Instead, after approval by the user it attempts to load the page directly in the pop-up window which is an awful user experience and really hurting our registrations. You can see the bug by registering for our site using Facebook Connect: http://alltrails.com
The URL of the page after the user connects that Facebook Connect is incorrectly loading in the permissions pop-up window is of the form:
http://alltrails.com/?installed=1&session={"session_key":"2.Gu0duOqdElNjXRac5wnetw__.3600.1283799600-1486832834","uid":1486832834,"expires":1283799600,"secret":"tKFaEgBTF9RJeuQZfYUSCw__","base_domain":"alltrails.com","sig":"a8dd9f75418b530ae6c3d935e14274c4"}
I'm hoping that someone much better at JavaScript than myself could suggest a simple code snippet that we could add to our homepage that would only be invoked if the page URL includes '?installed=1' and would do the following to allow the same user experience as Facebook Connect was intended to provide:
Close the permissions pop-up window
Load the appropriate page http://alltrails.com/register/facebook in the original parent window
I've tried to do this a bunch of different ways but haven't had any luck with getting it to work correctly. Thanks in advance for your help!
It's a (unconfirmed) bug.
http://bugs.developers.facebook.net/show_bug.cgi?id=12260
Hopefully it gets more votes so it gets fixed - vote people!
In the meantime, i am (attempting) to employ the following 'creative workaround':
Add logic to my Default.aspx page to detect that URL they are redirecting to in the popup.
Redirect to my page, FacebookInboundAuthorization.aspx, preserving querystring.
On load of that page, register some JavaScript to close the popup and manually fire the "onlogin" event handler for my button.
EDIT - Another possible solution
So i do something like this for the "Disconnect from Facebook" button, which has a similar bug which has been in FBC from day 1. If the user is already logged in, and you click the "Disconnect from Facebook" button, the "onlogin" handler is not fired.
So what i ended up doing is replacing the Facebook Disconnect button with my own regular anchor tag, mimicing the Facebook CSS. This way i can have full control over the click event (fire the function i want).
So, this principle could (theoretically) be applied to this current bug.
That is, after you do FB.Init on client-side:
Check FB auth status using FB.Connect.ifUserConnected
If user is connected, hide the regular FB:Login button, and show your "fake" FB Login button. Copy across the "onlogin" function from your regular FB:Login button to your fake button as the onclick event.
Your Fake FB Login button would be a regular anchor tag, with the same CSS applied to the regular FB Login buton.
So essentially, if the user is already connected, we don't really need FB's intervention for authentication, we can just do whatever we want (request perms, redirect, etc).
That should work.
Unfortunately i have higher priority things i need to work on, but it sounds like this is top priority for you.
So give that a go, hope it helps.

Categories

Resources