Office Add-ins

An Office web add-in is a web application hosted inside a browser control that runs inside an Office application (desktop and online).
An add-in is not installed on the host but has its implementation hosted on a web server.
This type of add-in uses standard web technologies like HTML5, XML, CSS3, JavaScript and REST APIs.
These types of add-ins have two distinct parts, a Manifest and a Web Page.

Documentation

link - learn.microsoft.com/en-us/office/dev/add-ins/ 
link - learn.microsoft.com/en-us/learn/paths/extend-office-fundamentals/ 
link - learn.microsoft.com/en-us/office/dev/add-ins/overview/core-concepts-office-add-ins 

Add-ins can access information in the current document and connect to web services and other web-based resources.
The JavaScript API has a common object model (or Shared API) that is shared across the different application.
The JavaScript API also has host-specific object models.

npm install @microsoft/office-js

Your add-in must include a reference to the Office.js JavaScript library.
The office.js library is a script loader that loads the object model corresponding to the office application.
This provides access to the Office top level object that represents an instance of an add-in.

npm install @microsoft/office-js 

Originally installed using npm install office-js
github.com/OfficeDev/office-js

Office.onReady - this event occurs when the runtime environment is loaded and ready exposing a callback function
Office.context - represents the runtime environment of the add-in
Office.select - allows support for the promises pattern for working with existing binding objects (getDataAsync, setDataAsync, addHandlerAsync, removeHandlerAsync)
var = office.context.displayLanguage
var = office.context.contentLanguage

Namespace - Microsoft.Office.WebExtension

Using Office.js enables you to access the Microsoft.Office.WebExtensions namespace using the alias "Office".
The alias name "Office" is automatically defined to allow easy access to this namespace.

Office Runtime

Office add-ins are controlled by a specific runtime.
This runtime controls permissions as well as performance
This runtime protects the user experience
This runtime prevents any modal interactions
This runtime prevents any direct access to the host applications UI thread
This runtime isolates the process the app run in
This runtime manages the app lifecycle and interoperability between the app and the client host

Add-in Initialisation

When a supported add-in starts, it reads the XML manifest
For Excel, Word, PowerPoint and Project the add-in loads when a document is opened or the add-in is inserted making the UI visible.
For Outlook whenever the context satsifies the activation of an add-in, then the UI is visible
The Office application opens the HTML page in a browser control (or an iFrame if it's a web application). The browser control uses Internet Explorer 9 components and security.
The OnLoad event is called
The office add-in framework calls the event handler for the initialize event of the Office object
When the HTML finishes loading the add-in finishes initializing and the main functionality can proceed