-After you configure your app code for app caching, your code must be as shown in the following example:

-/// </summary>

-/// In beforeUnloadHandler using setItems and readyToUnload callback function

-/// </summary>

-const beforeUnloadHandler = (

- setItems: React.Dispatch<React.SetStateAction<string[]>>,

- readyToUnload: () => void) => {

- setItems((Items) => [...Items, logItem("OnBeforeUnload", "purple", "Started")]);

- // Dispose resources and cleanup

- // Write your custom code to perform resource cleanup.

- setItems((Items) => [...Items, logItem("OnBeforeUnload", "purple", "Dispose resources and cleanup")]);

- setItems((Items) => [...Items, logItem("OnBeforeUnload", "purple", "Completed")]);

- console.log("sending readyToUnload to TEAMS");

- readyToUnload();

- return true;

-};

-/// </summary>

-/// loadHandler using setItems to set values

-/// </summary>

-const loadHandler = (

- setItems: React.Dispatch<React.SetStateAction<string[]>>,

- data: microsoftTeams.LoadContext) => {

- setItems((Items) => [...Items, logItem("OnLoad", "blue", "Started for " + data.entityId)]);

- // Use the entityId, contentUrl to route to the correct page within your App and then invoke notifySuccess

- setItems((Items) => [...Items, logItem("OnLoad", "blue", "Route to specific page")]);

- setItems((Items) => [...Items, logItem("OnLoad", "blue", "Completed for " + data.entityId)]);

- microsoftTeams.app.notifySuccess();

-};

-const AppCacheTab = () => {

- const [items, setItems] = useState<string[]>([]);

- const [title, setTitle] = useState("App Caching Sample");

-

- React.useEffect(() => {

- let app = microsoftTeams.app;

- app.initialize().then(app.getContext).then((context: any) => {

- app.notifySuccess();

- // Check if the framecontext is set to sidepanel

- if (context.page.frameContext === "sidePanel") {

- const loadContext = logItem("Success", "green", "Loaded Teams context");

- setItems((Items) => [...Items, loadContext]);

- const newLogItem = logItem("FrameContext", "orange", "Frame context is " + context.page.frameContext);

- setItems((Items) => [...Items, newLogItem]);

- microsoftTeams.teamsCore.registerBeforeUnloadHandler((readyToUnload: any) => {

- const result = beforeUnloadHandler(setItems, readyToUnload);

-

- return result;

- });

- microsoftTeams.teamsCore.registerOnLoadHandler((data: any) => {

- loadHandler(setItems, data);

- setTitle("Entity Id : " + data.entityId);

- console.log(data.contentUrl, data.entityId);

- });

- const newItem = logItem("Handlers", "orange", "Registered load and before unload handlers. Ready for app caching.");

- setItems((Items) => [...Items, newItem]);

- }

- }).catch(function (error: any) {

- console.log(error, "Could not register handlers.");

- });

- return () => {

- console.log("useEffect cleanup - Tab");

- };

- }, []);

- return (

- <div>

- <h3>{title}</h3>

- {items.map((item) => {

- return <div dangerouslySetInnerHTML={{ __html: item }} />;

- })}

- </div>

- );

-};

-export default AppCacheTab;

- The scene is tested or accessed by creating a test meeting and launching custom Together Mode scenes. For more information, see [activate custom Together Mode scenes](#activate-custom-together-mode-scenes):

-Now that you've gone through the sample scene.json, you can activate the custom Together Mode scenes to engage in scenes.

-## Activate custom Together Mode scenes

-To select scenes and activate custom Together Mode scenes, follow these steps:

- > On selecting **Preview** in the Scene studio, the scene is installed as an app in Teams. This is the model for a developer to test and try out scenes from the Scene studio. After a scene is shipped as an app, users see these scenes in the scene gallery.

-> * App installation is supported only on Teams desktop app.

-To publish your app to the Microsoft Teams store, you must [set up your Partner Center developer account](/office/dev/store/open-a-developer-account). Depending on your scenario, you might be able to use an existing account.

-## End-user in-app purchasing experience

-The following example shows the users to purchase subscription plans for a fictional Teams app called *Contoso Tasks for Teams*:

-1. In the Teams **Store**, find and select the app.

-1. In the app details dialog, select **Buy a subscription** or **Add for me**.

- :::image type="content" source="~/assets/images/saas-offer/buysubscriptionplancontoso.png" alt-text="Buying the subscription for the selected app.":::

-1. **Add for me** offers a free trial version of the app and later **Upgrade** it to a paid version.

- :::image type="content" source="~/assets/images/saas-offer/upgradeapp.png" alt-text="Upgrading to the subscription for the selected app." lightbox="../../../../assets/images/saas-offer/upgradeapp.png":::

-1. In the **Choose a subscription plan** dialog, choose the plan and select **Checkout**.

- :::image type="content" source="~/assets/images/saas-offer/choosingsubscriptionplancontoso.png" alt-text="Selecting the appropriate subscription plan." lightbox="../../../../assets/images/saas-offer/choosingsubscriptionplancontoso.png":::

-1. Complete the transaction and select **Configure now** to set up your subscription.

- :::image type="content" source="~/assets/images/saas-offer/saas-offer-configure-now.png" alt-text="Setting up the subscription." lightbox="../../../../assets/images/saas-offer/saas-offer-configure-now.png":::

- :::image type="content" source="~/assets/images/saas-offer/getstarted.png" alt-text="Landing page of the subscription." lightbox="../../../../assets/images/saas-offer/getstarted.png":::

-The following example shows how users can purchase subscription plans for a fictional Teams app called *Recloud*.

-1. In the Teams store, find and select the *Recloud* app.

- :::image type="content" source="~/assets/images/saas-offer/buysubscriptionplan.png" alt-text="Buying the subscription for the selected app.":::

-1. In the **Choose a subscription plan** dialog, choose the plan you want and select **Checkout**. (Note: Private plans are visible only to users in orgs you're providing the offer to. These plans are indicated with a **Special offer** :::image type="icon" source="~/assets/icons/special-icon.png"::: icon.)

- :::image type="content" source="~/assets/images/saas-offer/choosingsubscriptionplan.png" alt-text="Selecting the appropriate subscription plan.":::

- :::image type="content" source="~/assets/images/saas-offer/subscriptionlicenses.png" alt-text="Configuring user licenses.":::

-In the collaborative social framework of Teams, there's a wide variety of user needs that you can solve with a Teams app. For example, an app that bridges gap in achieving effective collaboration is a great fit.

-As a Teams admin, you can upload and pre-install the app package for your organization's tenant from [Teams admin center](https://admin.teams.microsoft.com/). For more information, see [upload your custom apps in the Microsoft Teams admin center](/microsoftteams/upload-custom-apps).

-As a global admin, you can upload and pre-install the app package from [Microsoft admin](https://admin.microsoft.com/). For more information, see [test and deploy Microsoft 365 Apps by partners in the Integrated apps portal](/microsoft-365/admin/manage/test-and-deploy-microsoft-365-apps).

-## Sample full manifest

-The following schema sample shows all extensibility options:

-## Sample full manifest

- "websiteUrl": "https://website.com/",

- "privacyUrl": "https://website.com/privacy",

- "termsOfUseUrl": "https://website.com/app-tos",

-|`resource`|string|2048 characters|✔️|Resource URL of app for acquiring auth token for SSO. </br> **NOTE:** If you aren't using SSO, ensure that you enter a dummy string value in this field to your app manifest, for example, `https://notapplicable` to avoid an error response. |

-1. Use the [sample manifest schema](#sample-full-manifest) to create a .json file.

-> The manifest example content shown here is only for a tab app. It uses example values for subdomain URI. For more information, see [sample manifest schema](#sample-full-manifest).

- > [!NOTE]

- > In either v3 or v4, the best action is to upgrade to the latest point release that is 3.30.2 or 4.8 or later respectively.

-### To build your app to zip app package file

-### To upload app package