Hey there! I am on a mission to determine whether my webpage is being accessed through Samsung's default browser or as a standalone web app saved on the homescreen. Unfortunately, the javascript codes I have come across only seem to work for Safari and Chrome.
Is there anyone out there who can offer me a reliable solution to this issue? I would greatly appreciate it!
There seems to be an issue with the
window.matchMedia('(display-mode: standalone)').matchesfalse even when in standalone mode.
To address this problem specifically for Samsung Internet browsers, you can use the solution outlined in this response:
Modify the start URL in the manifest file to contain a query string parameter, for example:
"start_url": "./?mode=standalone"This allows you to check for that specific query string parameter in your JavaScript code.
Since users in standalone mode do not see the address bar, adding this query string parameter should have no impact on their experience.
As someone new to the world of PWA, I encountered a similar issue with the Samsung browser.
It seems that many others have faced this problem in the past few years, and despite searching for a solution, the simple "start_url" wasn't enough for me.
After some extensive googling and exploring different avenues, I stumbled upon a helpful post that finally resolved my dilemma. You can read more about it here.
In my own experience, I focused on testing the behavior of the Chrome, Samsung, and Safari browsers. Feel free to customize this approach according to your needs by making adjustments in the source code.
const BROWSER_TAB = "browser-tab";
const STAND_ALONE = "standalone";
const getDisplayMode = () => {
let displayMode = BROWSER_TAB;
if (window.navigator.standalone || window.matchMedia("(display-mode: standalone)").matches) {
displayMode = STAND_ALONE; // PWA
} else if (
window.screen.height - document.documentElement.clientHeight <
100
) {
displayMode = STAND_ALONE; // PLAY_STORE, (maybe AppStore as well)
} else if (
new URLSearchParams(window.location.search).get("source") === "pwa" // "start_url": "/?source=pwa", from menifest.json
) {
displayMode = STAND_ALONE; // IOS or PWA or PLAY_STORE but it only works on start_url in menifest.json
}
return displayMode;
};While not a foolproof solution, I hope this information proves useful to you in navigating through similar challenges.
Working on making my webpage responsive for iPad and mobile devices. While adjusting the media query, I noticed a white area at the bottom of the page that seems to be outside the body element. Unsure of where it's coming from. Any help would be great ...
Encountering a 400 bad request error when attempting to log out a user from the idp session. Despite successfully logging out the user from the application/passport session, they remain logged in to the idp session. The logout and callback endpoints are c ...
Is there a way to redirect from Vue.js to a Laravel controller using the POST method without using AJAX? I would like to be able to use var_dump or dd inside the controller. //Vue.js axios.post('/add-hotel-listing', this.finish).then((respons ...
Creating a Form in index.html: <form id="mc-embedded-subscribe-form" class="validate" name="mc-embedded-subscribe-form" method="post" action="mailing.php"><pre> <fieldset> <div class="mc-field-group"> <div class="input-cont"> ...
Is anyone else encountering a similar issue? The viewport is set to "width=device-width" in order to scale your webapp correctly on an iPhone. It was working fine on my iOS 6 device, but after updating to iOS 7, it seems to be malfunctioning. Could there ...
I am currently working on fetching API data (specifically category names) from the back-end (Node.js) to the front-end (React). My main objective right now is to populate a Select component from Material UI. To fetch the API data, I am utilizing Express an ...
I've been exploring online tutorials to learn about ajax as it's a new technology for me. My main goal is to understand how to utilize two functions, create() and population(), in a php file. The create() function generates a form like this: ma ...
Currently, I am in the process of developing a chat website and focusing on managing ONLINE USERS. I have implemented AJAX to handle refreshing data, however, I am facing issues with using Append(); method. Whenever I refresh the section, the same data k ...
Greetings! Let me begin by saying how wonderful this page is - I have already found many answers here before. Please forgive any errors in my English :) In my efforts to optimize my website for SEO and increase its speed, I made several changes. The site ...
I have just started diving into the world of unit testing. While I've been successful in running simple tests such as "adding two numbers and checking if the result is greater than 0", my goal now is to develop a REST API using Test-Driven Development ...
I'm currently stuck on a project involving a Three.js canvas with OrbitControls for interactive 3D visualization. The main issue I'm facing is the lack of synchronization between scrolling within the canvas and the rest of the page content. Whil ...
Good day everyone: It seems like a simple question, but despite spending hours searching online, I am still unable to find the solution: how can an URL be validated with the inclusion of www without using http. Here's what I have tried so far: I a ...
When attempting to run a blockchain application, I encountered an error message that reads: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] install: node-gyp rebuild npm ERR! Exit status 1 npm E ...
After deploying my react application on Netlify, I used the npm run build command to create the local scripts and manually deployed them in production mode on Netlify. The build scripts were generated on my local machine and then uploaded to the Net ...
After clicking on a button, a function is triggered (think of it as a published/unpublished button). Immediately after the function is activated, I change the element to display a loader gif. function updateStatus(event, status, element, data, action) { ...
Recently, I set up the NPM package along with the http server within the "server" directory. Initially, everything was functioning smoothly; however, the server abruptly ceased operating. Upon attempting to launch the local http server, an error message a ...
I am trying to add a nested <ul> element inside a specific <li> element in my menu structure without affecting any other elements. I want to increase the depth of the parent menu item while keeping the siblings unchanged. This is the current H ...
Is there a way to retrieve updated table values after adding a user to the "WOD" table without making an additional query? Currently, when I add a third user to my WOD table, I can only return the first two users because I am unable to access the updated ...
Previously, I utilized the following code to extract text from the data-placeholder attribute and apply it as a placeholder for my div. [contentEditable=true]:empty:not(:focus):before { content:attr(data-placeholder) } While this method worked well b ...
Suppose I have numerous form fields that need to be displayed on the user interface. Additionally, in a standard Modify workflow, let's assume that these fields will have various attributes like value, mandatory, editable, disabled, label, regex (for ...