Progressive Web App (PWA) Features

Progressive Web App (PWA) Features in Boxible

The Boxible app leverages Progressive Web App (PWA) features to enhance user experience, particularly on mobile devices. Here’s a detailed explanation of how these features are implemented:

Progressive Web App Features

1. PWA Utilization:

   • The app uses a combination of different workflows and JavaScript to transform into a PWA.

   • When a user accesses the app on mobile, they are prompted to add the page to their home screen.

   • This action allows the app to open in a fullscreen mode, providing an experience similar to a native mobile app.

2. PWA Detection:

   • The following JavaScript code checks whether the user is using the PWA:

     javascriptCopy codebubble_fn_pwa(('standalone' in window.navigator) && window.navigator.standalone);

   • This code ensures that specific PWA features are only enabled when the app is running as a standalone PWA.

Restricting Landscape Mode and Tablet Access

To ensure optimal user experience, the app restricts usage to portrait mode on mobile devices and disables landscape mode and tablet access.

1. Disable Landscape Mode:

   • The following function checks if the device is in landscape mode and if the screen width is less than or equal to 767 pixels:

     javascriptCopy codefunction disableLandscapeMode() {
       if (window.matchMedia("(orientation: landscape)").matches && window.innerWidth <= 767) {
         alert("Landscape mode is not supported. Please rotate your device to portrait mode.");
         return false;
       }
     }

   • If the device is in landscape mode, an alert is displayed asking the user to rotate to portrait mode.

2. Event Listener for Orientation Change:

   • To continuously monitor and enforce this restriction, the app adds an event listener for orientation changes:

     javascriptCopy codewindow.addEventListener("orientationchange", disableLandscapeMode);
     disableLandscapeMode();

   • This ensures that the landscape mode check is performed whenever the device orientation changes.

Disabling Zoom and Making the Status Bar Transparent

To further enhance the mobile app experience, the app disables zoom and makes the status bar transparent.

1. Disable Zoom:

   • The following code creates a meta tag to set the viewport properties, disabling zoom:

     javascriptCopy code// Create the meta tag
     var metaTag = document.createElement('meta');
     metaTag.setAttribute('name', 'viewport');
     metaTag.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover');
     
     // Append the meta tag to the document head
     document.head.appendChild(metaTag);

2. Hide Zoom Controls on iOS:

   • Optional CSS is added to hide zoom controls on iOS devices:

     javascriptCopy codevar css = document.createElement('style');
     css.innerHTML = '.non-scaling { touch-action: manipulation; }';
     document.head.appendChild(css);