TIP: Change Elements if pages are being viewed from an iOS application (WKWebview)

Ask the community
, , , ,
1

Just a quick Tip. and Using my needed example.

I need to add our blog pages to an iOS app.

The goal is to have one of the Tab views on the iOS app to view the blog page only. And do not allow the user to navigate else where on the site via the menus. Also we have a stream player inside the header which should not show as the iOS App already has it’s own native player elsewhere.

As the header is Global across all pages including the blog pages, we cannot edit them to remove the elements and menus without affecting the normal browsers views (non iOS App)

So we need a way of distinguishing the two, normal browsers and iOS device App.

All the site pages including the the blog and blog posts use the same global header.

—-

The trick is to use Wix locations API’s query and queryParams and Local Storage API

We simply add a queryParam to the url we use for the blog page load in the iOS app’s WKWebview…

.i.e

https://mywixurl&deviceid=iOSDEVICE

Then in the masterPage.js;

We check for the queryParam.
If it is found. We set it to be stored in local storage.
Ensuring it is always registered in the app.
We also do a double check to with the local storage.

We then run code that will collapse/hide/delete or what ever we choose to do with elements we don’t want the user to access or see in the iOS app.
We can also activate elements hidden and we only want displayed in the iOS app.

In my case the user is limited to being only able to view and navigate within the Blogs

Because the normal browsers url will never have the queryParam, their display and behaviour is never altered.

import wixLocation from 'wix-location';
import { local } from "wix-storage-frontend";

//== THIS IS FOR THE IOS APP.
/*
In The iOS App we set the url to include a queryParam 
"https://site/news?deviceId=iOSDEVICE"

We then detect that param when the first page loads and set a wix local storage entry to true.
Then when any page loads this loacl staorage will be checked. if tre the player collapse will happen, 
ensuring it is never displayed in the iOS app and the blog page and post pages.

Using the param will never happen outside of the iOS App so normal desktop and mobile browsers will not be affected.

TO DO WE ALSO NEED TO HANDLE THE MENU ITEMS.
 */



$w.onReady(async function () {
    const queryParams = wixLocation.query;
    const deviceId = queryParams["deviceId"]; // Retrieve the "deviceId" parameter

    if (deviceId === "iOSDEVICE") {
        await local.setItem("iOSDEVICE", "true");
    }
    const isiOSDEVICE = await local.getItem("iOSDEVICE");

    if (deviceId === "iOSDEVICE" || isiOSDEVICE) {
        ///console.log("4 BLOG COLLAPSE Collapsing Player for this device");
        safelyCollapseElement("#html3"); //Stream Player

        // Handle menus and buttons / remove menus and revealle hidden buttons to nav back to All Posts only.
        const menusToUpdate = [
            { menu: "#menuToggle1", button: "#mobileButton1" },
            { menu: "#horizontalMenu1", button: "#mobileButton2" },
        ];

        menusToUpdate.forEach(({ menu, button }) => {
            safelyUpdateMenu(menu, button);
        });
    }
});

//  collapse an element if it exists / depending on Desktop layout or mobile
function safelyCollapseElement(selector) {
    try {
        if ($w(selector)) {
            $w(selector).collapse();
        }
    } catch (error) {
        console.error(`Error collapsing element ${selector}:`, error);
    }
}

//  delete a menu and enable its associated button
function safelyUpdateMenu(menuSelector, buttonSelector) {
    try {
        if ($w(menuSelector)) {
            $w(menuSelector).delete();
        }
        if ($w(buttonSelector)) {
            $w(buttonSelector).enable();
            $w(buttonSelector).show();
        }
    } catch (error) {
        console.error(`Error updating menu ${menuSelector} and button ${buttonSelector}:`, error);
    }
}

*This is done in the masterPage.js for a couple of reasons. *
One, in my case I am changing the Header elements with code, this can only be done in the masterPage.js.
Two, even though we are collapsing/deleting/ showing/hiding elements. a page change will reload them to the default state. Even in Wix Editor which is a SPA and I am affecting global elements. There does not seem to be a state memory when they are changed via code. The masterPage ensure we always get these changes and do not have to duplicate code in all pages.

You may find in your situ, you may not need to do this