I recently found out about the iPhone "Add to Home Screen" functionality and I am exploring ways to use it. It's working well on some other websites I tried, and I'm trying to make it work on some of my websites, but I'm not sure how to do it.
Working well: If you open safari and go to the Memorize Quran website and tap on the Share Icon, then select "Add to Home Screen". When you go to your Home Screen and tap on it, you'll be taken to a page that looks like above in the screenshot, not within the Safari browser and without the option to go to other webpages:
403 Forbidden Error: If you open safari and go to my website Conference Live Captioning home page in Safari, tap on Share, and Add to Home Screen, and then open it from the Home Screen, it shows a "403 Forbidden Error" as shown above
Strange Behavior: If you open safari and go to the Conference Live Captioning customer portal in Safari, tap on Share, and Add to Home Screen, and then open it from the Home Screen, it opens the website in Safari as if it was a bookmark that was added on the home page
Debugging: I tried to look into this issue, but I'm not having any articles or resources that have been helpful.
I found this code <meta name="apple-mobile-web-app-capable" content="no"/>
in some websites so I tried to add it and toggle it, as you can see here but without any success as you can see here.
I tried to inspect the code of the website that did work, but couldn't find anything in particular. It seems to be written in React which is also what option 3 above uses, so that doesn't help. The code also seems straightforward as you can see below
<meta charset="utf-8">
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-JWW3CSCPKC"></script>
<script src="/cdn-cgi/apps/head/NCs3f5VLUUwGVXoMx2QKhksFPHk.js"></script>
<script src="/cdn-cgi/apps/body/bcFDIesC64uR9Pu65gN4ni0E6wo.js"></script>
<link rel="shortcut icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#000000">
<meta name="description" content="Quran Memorization - FREE Desktop & Web App in One. A Muslim Central Project.">
<link rel="manifest" href="/manifest.json">
<title>Memorize Quran - Web & Desktop App</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f05d61">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<meta property="og:url" content="https://memorizequran.app/">
<meta property="og:type" content="website">
<meta property="og:title" content="Memorize Quran App">
<meta property="og:description" content="Quran Memorization - FREE Desktop & Web App in One. A Muslim Central Project.">
<meta property="og:image" content="https://memorizequran.app/og-image.jpg">
<meta property="og:image:width" content="279"><meta property="og:image:height" content="279">
<meta property="fb:app_id" content="526260910776488">
<script defer="defer" src="/static/js/main.6acb2d6f.js"></script>
<link href="/static/css/main.2e3790fe.css" rel="stylesheet">
<style data-emotion="css-global" data-s=""></style>
<style data-emotion="css-global" data-s=""></style>
<style data-emotion="css-global" data-s=""></style>
<style data-emotion="css" data-s=""></style>
I was able to get the solution working here, using this commit, so if you go to the page and save, you will be able to see the page without the 403 error/safari page redirect!
Details:
Instead of using the site's original root manifest <link rel="manifest" href="https://thefirstprototype.com/favicon/site.webmanifest">
, I created a manifest of this page by itself <link rel="manifest" href="./manifest.json">
. And then I made sure the manifest contains all the required values stated in the Mozilla PWA Guide:
{
"name": "Airplane Prayer Calculator",
"short_name": "In Flight Prayer Time Calculator",
"start_url": "../flight-prayer-time-airplane-travel-calculator/index.html",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#000",
"description": "In Flight Prayer Time Calculator For Muslims travelling by Airplane",
"icons": [{
"src": "../favicon/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
}, {
"src": "../favicon/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
}, {
"src": "../favicon/favicon.ico",
"sizes": "48x48",
"type": "image/ico"
}, {
"src": "../favicon/apple-touch-icon.png",
"sizes": "180x180",
"type": "image/png"
}, {
"src": "../favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
}, {
"src": "../favicon/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}]
}