We Keep Coding

Handling History Changes In Google Apps Script Web App

I'm building a web app using Google Apps Script, looking to replicate a multi-page site, and struggling to get the history changes to do what I want.
I have links set up with event listeners that use google.script.history.push() like this:
document.getElementById('navPage1').addEventListener('click', function() {
google.script.history.push({timestamp:new Date().getTime(),page:'page1'}, {page:'page1'})
});
When I click on this link, I see the URL update accordingly with the parameters (i.e. to https://script.google.com/a/XXX/macros/s/XXX/dev?page=page1).
In my HTML file I then want to use google.script.history.setChangeHistory() to detect these changes and load content accordingly. However, the event doesn't seem to be triggering at all. I currently have it set up just to log on history change, and I'm not seeing anything at all:
google.script.history.setChangeHandler(function(e) {
console.log('History Change Triggered');
});
Have I misunderstood how these should be used?

As written in the documentation,
Calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in JavaScript), when navigating between two history entries for the same document.
Related Answer:
Sample web app

Vaadin onbeforeunload event

Is there any Out Of the Box Vaadin 10 (and higher) event similar to window.onbeforeunload in JavaScript?
I've tried to use onDetach() or beforeLeave(), but it only works inside UI, and when user reloads the page or closes the page it's not working.

You can use the approach described in https://vaadin.com/forum/thread/17523194/unsaved-changes-detect-page-exit-or-reload that was already suggested in a comment.
At the same time, I'd urge you to be really careful with beforeunload events since they are in some situations fired even though the user is actually not navigating away from the page.
The most common case is if the user clicks a link that starts a download. In that case the browser will fire the event immediately when the user clicks the link. Slightly later when the browser receives the response headers, it will discover that it's a download and not a new HTML page to display. The end result is then that beforeunload has been fired but the previous page is still kept running.
If you want to use the event for cleanup, then the best approach today is probably a combination of the unload event and then using the new-ish Beacon API for notifying the server that the user has actually navigated away. Integrating this into a Vaadin application will require slightly more JavaScript, but it has the benefit that it will actually work.

What can be the event similar to onpopstate that works across documents?

From mozilla docs:
A popstate event is dispatched to the window every time the active
history entry changes between two history entries for the SAME
DOCUMENT.
Which window event should i use if i need to listen to 'session history changes' ACROSS DOCUMENTS in a browsing context?
I am writing a js library that helps tracking navigation when user use back/forward browser buttons. The library would record when user is navigated from page B to page A (backwards) or page A to page B(forward). I've achieved the tracking for the pages that use hashes using the 'popstate' event but when user navigate from page A to page B this event doesn't work.
I've looked at pageshow/pagehide events but they fires on simple page loads as well and not just when the 'session history' changes (ie page fetched from history).
What should i be looking at to know "browser has looked into session history to fetch the current page"?

You're going to have to handle the Window's beforeunload event, and also put code on whichever page loading event is appropriate for your use case.
Note that for beforeunload, you don't have time to write something server-side. You'll have to track this in LocalStorage.

There is something weird in your requirements:
You say you are writing a js library, but for this library to work across different documents, for a start, it would at least have to be executed on every documents navigated by the user.
And even if it were the case, there wouldn't be any solid way to do what you want.
Browsers' behavior regarding history navigation vary a lot:
For instance, FF will keep in memory its current state, and will not reload the page per se, but simply reactivate its saved state (i.e you won't even be able to know that the user came back to this page (apart from ugly polling of performance.navigation.type, which despite what MDN says is only absent in Safari).
So all in all, what you want to make is a job for a browser extension, not for a web-library.

IE9 firing onbeforeunload event when the window opens

I'm building a site using the JFileUpload applet and want to handle the closing of a page in a certain way. JSTransferCancelled is called when the applet is cancelled. The following code is what I'm using to handle these events and it works in all browsers except IE.
function JSTransferCancelled(){
bCancel=false;
$.post("cancel.php");
self.close();
}
$(window).load(function(){
$(window).bind('beforeunload',function(){
document.uploader.setEnabled(false);
if(bCancel){ document.uploader.cancel();}
});
});
I open the page with the uploader on it in a new tab from the main site and want to close it when they cancel the upload. When I open the tab in IE, however, I instantly get the alert saying The webpage you are viewing is trying to close this tab. Do you want to close this tab? [OK] [Cancel] and my uploader is both inaccessible because of the setEnabled(false) call and cancelled because of the cancel() call.
What I'm looking for is the same functionality, just in IE. I know there are many many many issues in IE with events like onbeforeunload with it triggering in response to different things, but I've checked for all of those problems in my site and haven't found anything. I haven't run into anything online that deals with the kind of problem I'm having.
I've tried wrapping the onbeforeunload function in different things such as the load function above as well as $(document).ready(), but they either give me the same problems or create new ones.

Check Microsoft's Ridiculous Documentation Then make sure none of the code you are using does anything they list as a trigger to invoke beforeunload, which includes several things that do not actually unload the page (go Microsoft!)

How can my app request FB permissions upon click of the like button?

I have a website with Facebook integration. The homepage has a few Like buttons, which are popular, and a login button, which is not. I'd like to attach an event to the Like buttons which will make them de facto login buttons - that is, in addition to everything Facebook is doing, I want to take the opportunity to request extended permissions for my app.
It doesn't work, and here's what I know about why:
I'm listening for clicks using the following call:
FB.Event.subscribe("edge.create", function (obj) { /* my callback */ });
The edge.create event is fired when Facebook FINISHES processing the click.
Facebook processes the click asynchronously, deferring during completion of a request-response cycle.
Javascript code executed after this async wait is not part of the same stack, and lacks the blessings conferred by the user action.
The means that Facebook provides to request extended permissions involves creating a popup window, and most modern browsers include a popup blocker which rejects the call outside of a stack triggered by a user action.
This chain leads to the result that handlers fired on edge.create are unable to request extended permissions. I can think of two classes of solutions:
Find a way to listen on the original click, rather than after Facebook receives the click, sends a request, receives a response, and finally fires the global handler
Find an alternate UI for requesting permissions that doesn't involve a popup
Nothing I've found in researching has shown me an easy way to do either of these. On solution 1, FBJS provides an addEventListener method, but as far as I can tell FBJS has nothing to do with my case (integration on a website that I own), so I can't use that to catch the click. On solution 2, Facebook's own documentation for FB.login says the following:
You should only call this on a user event as it opens a popup. Most browsers block popups, unless they were initiated from a user event, such as a click on a button or a link.
(Source: https://developers.facebook.com/docs/reference/javascript/FB.login/)
So I'm at a dead end, but it seems like a terribly artificial problem - does Facebook want me to be able to request permissions upon click of a Like button, or not? If so, what am I missing? If not, why are they implementing this restriction in the UI layer?

Facebook Like buttons exist inside of an <iframe>. As such there is no way for you to capture or intercept the button's click event, or even to have a click event on the <iframe> itself as far as I can determine.
Perhaps you could start the page out displaying your own buttons that look like Facebook Like buttons, and then you can handle clicks on those as normal. You could wire them so that on the first click they request permissions and then replace all your custom Like buttons with actual Like buttons.