Office-js: History API's pushState & replaceState are nullified by Office.js

[shirbr510]

I'm currently writing an outlook add-in that can also act as a web application.
Office.js's code consists of some history API nullifying logic that turns history.pushState & history.replaceState into null.
this behaviour will break all Add-ins that try to use modern routing solutions like react-router, etc...

Expected Behavior

history API will remain unharmed.

Current Behavior

history.pushState & history.replaceState become null

Steps to Reproduce, or Live Example

* Link to live example: ______
1. import Office.js (either CDN or npm)
2. try using the history API
3. App Crashes: TypeError: globalHistory.replaceState is not a function

Your Environment

• Platform [PC desktop, Mac, iOS, Office Online]: Outlook (both native mac & online)
• Host [Excel, Word, PowerPoint, etc.]: Outlook
• Office version number: 16 (don't think subversion is relevant)
• Operating System: Mac OSX Mojave
• Browser (if using Office Online): Any

I assume that these are the relevant piece of code:

https://github.com/OfficeDev/office-js/blob/b357f8e44939c9bd92fe6c04edb8a8eb541b30e6/dist/office.debug.js#L1587
https://github.com/OfficeDev/office-js/blob/b357f8e44939c9bd92fe6c04edb8a8eb541b30e6/dist/office.debug.js#L1588

[Zlatkovsky]

FYI, there appears to be a related question (and explanation/workaround) here: https://stackoverflow.com/questions/42642863/office-js-nullifies-browser-history-functions-breaking-history-usage

[exextoc]

The internal Outlook browser has does not support the History API. The history.replaceState and history.pushState are visible but just throw “unspecified error” when used. Due to this behavior, the history objects are set to null in Office.js by-design.

[shirbr510]

@exextoc any plans on supporting the history API anytime soon?
Also, on which specific environment is it not supported? Ios native browser? Android?
Cause locally on my mac with the native outlook it appears to be working properly

[shirbr510]

@Zlatkovsky I actually posted a similar solution on stack overflow to a different variation of this question (that might be a duplicate to the one you posted)
https://stackoverflow.com/questions/33954663/unable-to-use-window-history-replacestate-function-in-mail-addin/55202524#55202524

[vyazadji]

I faced an issue in Windows Outlook after restore history.replaceState and history.pushState

//save "replaceState" and "pushState"
window._historyCache = {
        replaceState: window.history.replaceState,
        pushState: window.history.pushState
   };

//LOADING Office.js
...

//restore "replaceState" and "pushState"
window.history.replaceState = window._historyCache.replaceState;
window.history.pushState = window._historyCache.pushState;

They throw some unexpected error :( (Looks like due of this these methods were disabled in Office.js) So react router didn't work.
But I found one interesting thing. If suppress the error they do their work.

So my final result is:

    function isIE10 () {
      return !!document.documentMode
    }

    // Office js deletes window.history.pushState and window.history.replaceState. Cache them and restore them
    // Also there is an issue in Windows Outlook with `pushState` and `replaceState`. They throw an error but in the same time do their expected work
    // So I suppress errors for IE10 (we use it inside Window Outlook)
    window._historyCache = {
      replaceState: function (originalReplaceState) {
        return function () {
          try {
            return originalReplaceState.apply(window.history, arguments)
          } catch (e) {
            if (isIE10()) {
              console.warn("Unexpected error in 'window.history.replaceState', but we can continue to work :)");
              return false;
            }
            throw(e);
          }
        }
      }(window.history.replaceState),
      pushState: function (originalFunction) {
        return function () {
          try {
            return originalFunction.apply(window.history, arguments)
          } catch (e) {
            if (isIE10()) {
              console.warn("Unexpected error in 'window.history.pushState', but we can continue to work :)");
              return false;
            }
            throw(e);
          }
        }
      }(window.history.pushState)
    };

      // In Window Outlook we have issue with 'replaceState' and 'pushState. So replaced it by wrapped version.
      window.history.replaceState = window._historyCache.replaceState;
      window.history.pushState = window._historyCache.pushState;

//include the main code with react-router
//include Office.js


   Office.initialize = function () {

    // Office js deletes window.history.pushState and window.history.replaceState. Restore them
    window.history.replaceState = window._historyCache.replaceState;
    window.history.pushState = window._historyCache.pushState;

    // Now you can start initialize&&run your application
        ....
   }

[shirbr510]

@vyazadji correct me if I'm wrong, IE10 has reached EOL about 2 years ago and all the rest of the browsers should have full history API support

[vyazadji]

@shirbr510 I say about IE10 because it runs inside Outlook under Windows. My Windows version is 10 Pro, default browser is Edge 42.17134.1.0 . But the right side bar where Outlook runs add-in uses this old browser (IE10 as a browser also is in Windows). I don't know this is true for all Windows or it's some specific case for my version. So I must adapt my add-in (and part of my application which I use in this add-in) for IE10 ;(

PS. IE10 supports history.replaceState and history.pushState, but inside Outlook I have problems with these methods, so simple restore doesn't work for me.

[exextoc]

Navigation is not available in mshtml, but available in WebKit (hence Mac), which is why it works on MAC but not on win32. We are actively working on enabling a new WebView Control based off of Edge where history will be supported.

[exextoc]

https://developer.microsoft.com/en-us/office/blogs/microsoft-edge-webview-for-office-add-ins/

[shirbr510]

@exextoc so from now on, history API is supported everywhere?

cause as far as the post explains, only new Office365 based versions will support history API

[exextoc]

Only on new versions.

[sundariragavan]

@vyazadji @exextoc i'm getting this error Uncaught TypeError: Cannot read property 'apply' of null . How to solve this error.

[vyazadji]

@sundariragavan I resolved it as described here https://github.com/OfficeDev/office-js/issues/429#issuecomment-479982199. It was more than a year ago. I no longer work on a project, where I used it, so I can't confirm that it's still actual.