How to prompt device to seek user permission again with ios 13 DeviceOrientationEvent.requestPermission

Apple introduced the API DeviceOrientationEvent.requestPermission in iOS 13, requiring user action to trigger it such as a click or tap. The issue I'm facing is that once the user denies permission, the result appears to be cached, preventing me from asking for access again as the promise automatically returns the cached value. Is there a way to reset the cached value on the device and prompt the user to allow or deny access to orientation data again?

Here is the relevant code snippet:

if (DeviceOrientationEvent && typeof(DeviceOrientationEvent.requestPermission) === "function") {
    const permissionState = await DeviceOrientationEvent.requestPermission();

    if (permissionState === "granted") {
      // Permission granted
    } else {
        // Permission denied
    }
}

Answer №1

If you close Safari and reopen it, the dialogue box will reappear.

Answer №2

Experiencing a similar issue on iOS 13 Safari. To resolve this, clear the website data for the specific site requiring permission. Simply navigate to Settings > Safari > Advanced > Website data, locate the site in question, and delete all stored data. Afterward, the permission prompt should reappear when requested.

Answer №3

Is it possible that the issue is not related to caching? I'm facing an issue in incognito mode on Safari in iOS 13 where I immediately receive a "denied" response without any prompt for permission.

I've been using this code snippet to test the outcome, but every time it returns "denied" without triggering a prompt event. (https://codepen.io/ejarnutowski/pen/WNePqmM)

<button onclick="testDeviceOrientation()">Test Device Orientation</button>
function testDeviceOrientation() {
  if (typeof DeviceOrientationEvent !== 'function') {
    return setResult('DeviceOrientationEvent not detected')
  }
  if (typeof DeviceOrientationEvent.requestPermission !== 'function') {
    return setResult('DeviceOrientationEvent.requestPermission not detected')
  }
  DeviceOrientationEvent.requestPermission().then(function(result) {
    return setResult(result);
  });
}

function setResult(result) {
  document.getElementById('result').innerHTML = 'RESULT: ' + result;
}

It seems like drawmote.app has successfully implemented this feature, but their JavaScript code is compiled making it challenging for me to understand their approach.

Answer №4

Send it to a different subdomain that leads to the identical page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message: "Issue encountered with locating Node import module while operating within a docker

I've created a React app along with a Node.js server that includes the following imports: import express from 'express' import compression from 'compression' import cookieParser from 'cookie-parser' import bodyParser from ...

Prevent discrepancies between the outcome on the server and the client side

My website utilizes a combination of PHP and JavaScript for processing results - some server-side, some client-side. Solely relying on JavaScript can cause issues with search engine crawling, while using only PHP may not provide real-time responses accura ...

How can I retrieve the identifier in Socket.io?

Is there a way to retrieve the unique Id from the server using socket.io? I attempted using clients[socket.id] = socket; However, I encountered an error stating: connections property is deprecated. use getconnections() method Does anyone have any sugg ...

Is there a method to add HTML code statically rather than in a dynamic environment?

I'm currently in the process of developing a front-end website with no backend code, as I plan to host it on GitHub pages. I feel that adding any additional backend functionality would be unnecessary. Is there a simple method to incorporate common el ...

Using Angular JS version 1.2.26 to implement promises within a forEach iteration

I am working on a JavaScript project where I have implemented an angular.forEach loop to iterate over image configuration objects and create Image() objects using the URLs from the config. My goal is to ensure that none of the resulting images are returne ...

The text for the Google chart is nowhere to be found

After creating a test project using the Google Chart example, I noticed that some text from the chart is missing after adding CSS. Here is the CSS code I used: html, body { font-size: 100%; height: 100%; width: 100%; } body { background: ...

How to Retrieve a Specific Line with jQuery

Could jQuery be used to retrieve the offset of the first letter in the 5th visual line of a block's content? I am referring to the visual line determined by the browser, not the line seen in the source code. ...

What is the process of invoking a function on a specific element when it is encapsulated within an if statement in Meteor.js

Here is an example: {{#if currentUser}} <li><a class="waves-effect waves-light btn modal-trigger modal-close" href="#upload">Upload Image</a></li> {{/if}} Currently, I am implementing the following: Template.MasterLayout.onRe ...

Is there a way to incorporate an SSL certificate into a JavaScript POST request?

I need to send a post request to an endpoint using a SSL certificate in either typescript or javascript. This is for a project that I am currently working on with Ionic 3. ...

What is the best practice for storing a SQLITE database file in electron when in production mode?

Currently, I am developing a portable Node.js server using Electron and utilizing an SQLITE database for data storage. During development, the database file test.db is placed in the same directory as my Main.js file, which works perfectly. However, when I ...

"Identifying Mouse Inactivity in React: A Guide to Detecting When the Mouse

I need to dynamically control the visibility of a button element based on mouse movement. I am able to show the button when the mouse is moving using onMouseMove, but I'm stuck on how to hide it when the mouse stops moving. React doesn't have an ...

Creating and accessing a temporary binary file using Node Js

Challenge I have been working on integrating the Google Text To Speech (TTS) service to save a generated binary audio file to Google Cloud Storage (GCS). Considering that saving a local binary file in Firebase's Cloud Functions environment may not b ...

Drawbacks of adjusting design according to screen width via javascript detection

When creating a website, I want it to be compatible with the most common screen resolutions. Here is my proposed method for achieving this: -Develop CSS classes tailored to each screen resolution, specifying properties such as width and position. -Write ...

Ways to conceal various components while showcasing just a single element from every individual container

I am looking to only display specific span elements within their parent container (coin) while hiding the rest. The desired output should show only "1" and "first" while the other spans are hidden. <div class="types"> <div class=" ...

Issue with VueJS compilation: JSON data import causing failure

I'm attempting to bring in a static .json file within the <script> section of a .Vue file using the code snippet import Test from '@assets/test.json' From what I've gathered about webpack, this should work effortlessly. I have ev ...

Is it necessary to make multiple calls following a successful AJAX request?

Here is an AJAX call I am setting up. The first step is to hit the endpoint dofirstthing.do. Once that is successful, the next step is to make another call with "param1" as the query parameter. Now, my question is - how can I make a third call with "param ...

The ReactJS application is experiencing issues when run on an outdated version of Chrome, specifically version

I recently set up a new ReactJS project using create-react-app, with node Version 12.22.12. To ensure compatibility with older browsers, I incorporated the polyfill core-js. As a result, the project now functions smoothly on Chrome versions 31 and above; h ...

The issue of local notifications not appearing in the foreground has been identified in iOS 10.2

I've successfully set up local notifications for iOS 10.2. The issue I'm facing is that notification alerts only appear when the app is in the background - they don't show up when the app is in the foreground. Is there a way to receive loc ...

What initiates Electron after npm processes the package.json file?

As I delve into the realms of JavaScript, HTML, and Electron, a particular question has been playing on my mind - what exactly happens when you run electron . in the "scripts" -> "start" section of package.json? The mysterious way it operates sends shiv ...

Retrieve the direction of panning when the panning stops with hammer.js and limit the possible

I have integrated the hammer.js library along with its jQuery plugin. I followed the documentation and used the following code to initialize it on .game-card-mobile divs: /* Creating a Hammer object for swipeable game cards */ var $gameCard = $('.gam ...