iOS Prompting '403 Forbidden Error' When Adding to Home Screen and Unexpected Malfunctions

Exploring a New Feature: Today, I came across the intriguing iPhone "Add to Home Screen" functionality and I'm eager to experiment with it. After testing it on various websites, I decided to try implementing it on my own sites as well, but I'm facing some challenges in the process. https://i.sstatic.net/bZlzlnIU.png

  1. Successful Implementation: For instance, if you navigate to the Memorize Quran website using Safari, tap on the Share Icon, then select "Add to Home Screen," you'll notice that upon clicking on the added icon from your Home Screen, it opens the page separately rather than within the Safari browser, limiting access to other webpages:

  2. Error Encounter: Conversely, when attempting the same procedure on my website, Conference Live Captioning home page, users are met with a "403 Forbidden Error" message upon opening it from the Home Screen.

  3. Unexpected Behavior: Lastly, trying the feature on the Conference Live Captioning customer portal, instead of opening it as a standalone page outside Safari, the site loads within the browser similar to a bookmark added to the home page.

Troubleshooting Attempts: Desperate for a solution, I scoured for relevant articles or resources to resolve this issue, yet nothing proved fruitful.

Experimentation Continues: In an attempt to rectify the problem, I even experimented by adding the code 

<meta name="apple-mobile-web-app-capable" content="no"/>
into the source files, toggling it alternatively, albeit unsuccessful results as highlighted here.

Fruitless Inspection: Upon inspecting successful website codes written in React, which mirrors mine, there were no explicit hints or solutions to be derived. The simplicity of the code snippet can be noted below:

[Code Snippet Provided]
javascripthtmlcssiosreactjs

Answer №1

The solution that worked for me can be found here. I implemented the changes based on this commit, and after saving, the page displayed correctly without any 403 errors or Safari redirects!

Here are the details:

I decided to create a separate manifest file for this specific page instead of using the original site's root manifest. This new manifest includes all the necessary information as outlined in the Mozilla PWA Guide:

{
    "name": "Custom Page Manifest Test",
    "short_name": "Custom Page Test",
    "start_url": "../custom-page/index.html",
    "display": "standalone",
    "background_color": "#fff",
    "theme_color": "#000",
    "description": "Testing a custom manifest for a specific page",
    "icons": [{
      "src": "../custom/favicon-16x16.png",
      "sizes": "16x16",
      "type": "image/png"
    }, {
      "src": "../custom/favicon-32x32.png",
      "sizes": "32x32",
      "type": "image/png"
    }, {
      "src": "../custom/favicon.ico",
      "sizes": "48x48",
      "type": "image/ico"
    }]
  }

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

Is there a way to bring this specific function into a separate file?

There's a common practice where anonymous functions (arrow functions) are exported as default from one file. My question is, how can this be imported and used in another file? If I export the following function that returns an Object containing store ...

javascriptreactjsecmascript-6redux-persist

Concealing the links except for when viewed on a smaller device

Currently, I am faced with the task of creating my header using bootstrap in such a way that only the brand is displayed on screens larger than small, while the links are hidden. However, on smaller screens, I would like to have a collapsible button for th ...

htmlcssbootstrap-4display

AngularJS Controller managing the entry field

I am still learning AngularJS and attempting to retrieve user input from a text box to use for querying an endpoint and displaying the result in another text box. Here is a preview of the user interface: https://i.sstatic.net/zXCgQ.jpg Here is the HTML c ...

javascriptangularjs

What is the best way to incorporate CSS into an AJAX request?

I am facing a challenge in creating a tree menu within my PHP code that is located in an ajax php file. The issue arises due to the presence of classes used inside the tree code: $html .= '<li><span style="min-width:200px" class="folder"> ...

phpcssajax

Is there a way to access the Scene object within React Three Fiber?

I'm currently exploring ways to programmatically obtain the scene object in React Three Fiber. My goal is to add a Three component using the conventional method: scene.add(myThing). I attempted to utilize const canvasRef = useRef() in conjunction with ...

reactjsthree.js3dreact-three-fiberreact-three-drei

A step-by-step guide to thoroughly examining the form status in a React application, allowing for the activation of a previously disabled submit button

When I have an onChange event in React, the state is populated correctly. I disable the form button when a field is empty on submit, but I also want users to be able to go back and fill out those fields. The key issue is that if both fields have data, I wa ...

javascriptreactjsformsdomonchange

What is the best way to retrieve the targeted style directly from CSS, rather than relying on the computed style of the element?

Although similar questions have been posed before, such as this one, I haven't found a working solution. Is there a way for me to retrieve the width attribute value from a CSS class and then write it to a div? I'm looking to access the exact va ...

jquerycss

What could be causing the `else` part of an if/else statement to run when the condition is already satisfied

Currently, I have an if/else statement in place to compare the input value with the titles of movies. However, even when the title and the input value match, the loop continues to run and executes the instructions within the else statement. What could be c ...

javascriptreactjsif-statementnext.jsinput

Why isn't the selected option appearing first?

I have written a PHP code to display the specified div <div id="main_catsel"> <select id="maincat" > <option value="1">none</option> <option value="2">Computer</option> <option value="4">Refrigerator& ...

phphtml

Automate the manipulation of a dynamically-generated table using Selenium and javascript

Is it feasible to use Selenium to select a menu item created primarily with JavaScript? The HTML tags for this table are only visible in the view source. <table id = "table_id"> <tr> <td> <script> *** </script> </ ...

javascripthtmlselenium

Is there a way to eliminate the .html extension from the end of URLs for web pages?

Can someone provide guidance on how to eliminate the .html extensions from file names? Specifically, I noticed this feature on the site tekmillion.com. Your assistance is greatly appreciated. Thank you! ...

html

Storing a form in a database using SQL

I have developed a PHP script that is meant to save form input into a database called XXXX_comments in a table called Comments, with columns for Name and Comment. When a user clicks the Save button, the form data should be inserted into the database. The d ...

phphtmlmysql

Reach the underlying DOM element <input>...</input> using styled-components

I am struggling to make changes to the styling of an <input /> wrapped in a React component using styled components. The style I want to override is visible in Dev Tools here: .ui.input input {...} I believe the wrapping component needs to pass th ...

cssreactjsstyled-components

What is the best approach to execute a javascript on an HTML page that is dynamically generated?

Working with jQuery Mobile, I have a situation where I am creating a listView of pages based on events stored in a database. Each event is parsed on my webpage to generate a unique HTML page for each one. Within each page, I include a distinct "subscribe" ...

javascriptjqueryhtmlajaxjquery-mobile

How to Build a Bootstrap Table using PHP and JSON Data?

Trying to use json data like this https://i.sstatic.net/iRUUE.png {"endpoint":"127.0.0.1","id":1,"identifiers":["license:LICENSEKEY","xbl:XBLKEY","live:LIVEKEY","discord:DISCORDID&q ...

javascriptphphtmljsondatatables

Encountering ReferenceError: window object is not recognized in nextjs environment

Hey there, I'm currently working with Next.js and ran into this error: https://i.sstatic.net/pFwxh.jpg Below is the snippet of my code: import React, { createContext, useState, useContext, useEffect } from "react"; import useAuth from '../ ...

reactjsnext.js

Condition Handling in AngularJS

When using Handlebars, we can create conditions using #unless. For example: <input type="checkbox" {{#unless fee.isSubmitted}}disabled{{/unless}}> Now, how would we implement this logic using AngularJS? ...

htmlangularjshandlebars.js

Tips for updating the modal content with a dynamic approach upon clicking an image

On my HTML page, I have 3 thumbnail images. What I want to achieve is that when a user clicks on any of these images, the clicked image should be displayed in a modal window. Is there a way to dynamically pass the image name into the modal-body every time ...

javascripthtmlcssbootstrap-4bootstrap-modal

Navigating through a React application using React Router allows for seamless transition between different

I am currently working on a navigation setup using React.Router. Here are the paths I have configured: example 1: takes you to "/example1" example 2: takes you to "/example2" example 3: redirects to "/example3" If I click on ...

reactjsreact-routerreact-router-dom

Leveraging angular.forEach for JSON Iteration

In my app and controller, I am working on creating a "flow chart style" question and answer system. To keep track of the current question and answer, I am using variables like $scope.ActiveQuestion and an array named $scope.ActiveAnswers. I am struggling ...

javascriptarraysjsonangularjsangularjs-ng-repeat