Some of my Word Addin users are reporting that it is failing to load. I've managed to track the problem down to the existence of 'hostInfoValue' in SessionStorage. If this value is there, the Addin won't load. Some other users work fine and it loads the Addin without any problems.
Inspecting some users and their first request (from Word) is to a url like this:
https://office.mydomain.com/?et=ZZZ&_host_Info=Word$Win32$16.01$en-US$$$$0
[I've replaced the real value of 'et' with 'ZZZ'].
This adds the hostInfoValue to SessionStorage for my domain.
If that value is present in session storage (I can add it manually too and it causes the same issue) then the Addin will fail to load the full app (and just displays the default contents of index.html - see the main.ts file below, the Office.onReady callback never gets called). Once you've got this value in session storage, even if you try to load without the query params, like this, it fails:
If I delete the hostInfoValue from Session storage, then loading https://office.mydomain.com works again - i.e. the Office.onReady callback is executed.
It looks like this is a bug in this officejs scripts...
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
Two questions:
- Why do some users get navigated with the '?et=...' query params and some don't.
- Is this a bug in OfficeJS, or do I need to do something in my code?
Edit:
I've also been doing some reading about the Edge integration - on the problematic machine, I see the following error in the console (right-click 'inspect' in the addin). Is this related to the issue? I've cleared the SessionStorage cache and this has allowed the addin to load our app - but, I did this yesterday too and while it worked on that machine for a few hours, it eventually ended up in the same broken state.
That console window suggests it was loaded outside of an Office Client, this was 100% loaded in Windows Word desktop app.
Is this related to any of these:
- https://github.com/OfficeDev/office-js/issues/1812
- https://github.com/OfficeDev/office-js/issues/1799
- https://github.com/OfficeDev/office-js/issues/1784
- Tracking Prevention blocked access to storage for https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js
These are the key files (index.html and main.ts). Note: This is an Angular 10 app.
import {
enableProdMode
} from '@angular/core';
import {
platformBrowserDynamic
} from '@angular/platform-browser-dynamic';
import {
AppModule
} from './app/app.module';
import {
environment
} from './environments/environment';
// polyfill TextEncoder for IE Edge
import {
TextEncoder
} from 'text-encoding';
if (typeof(window as any).TextEncoder === 'undefined') {
(window as any).TextEncoder = TextEncoder;
}
if (environment.production) {
enableProdMode();
}
declare
const Office: any;
Office.onReady(function(info) {
console.log(`Office.js is now ready in ${info.host} on ${info.platform}`);
var sideload = document.getElementById('sideload-msg');
if (sideload.remove) {
sideload.remove();
} else {
console.log("Error Remove not supported");
}
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(error => console.error(error));
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyAddin</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="/assets/fonts/Lato/latofonts.css" rel="stylesheet">
<link href="/assets/fonts/icon-pack/style.css" rel="stylesheet" type="text/css">
<link href="/assets/fonts/Circular-std/circular-std.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
<script type="text/javascript" src="/assets/js/dom4.max.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
<script type="text/javascript">
// Office js deletes window.history.pushState and window.history.replaceState. Cache them....
window._historyCache = {
replaceState: window.history.replaceState,
pushState: window.history.pushState
};
</script>
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
<script type="text/javascript">
// ... and restore them.
window.history.replaceState = window._historyCache.replaceState;
window.history.pushState = window._historyCache.pushState;
</script>
</head>
<body>
<div id="sideload-msg" class="sideload-msg">
<h2 class="body-regular sideload-msg__title">Loading, please wait...</h2>
<p class="body__small sideload-msg__text">If you experience problems, please close and re-open this sidebar. If the problem persists, please send a message to <a href="mailto:support@myaddin.com">support@myaddin.com</a></p>
</div>
<app-root></app-root>
</body>
</html>