iOS Safari PWA walkthrough Hunter Saturday, January 31st, 2026 at 11:06 PM
80 padding: 10px; 81 } 82 83 + .auto-detected #detected-link span { 84 + color: #0000EE; 85 + } 86 + 87 .lightbulb { 88 text-shadow: 0px 0px 1px black; 89 font-size: 1.4em; 107 padding-bottom: 6px; 108 } 109 110 + #pwa-emoji { 111 + float: right; 112 + margin: 15px; 113 + margin-top: 40px; 114 + font-size: 70px; 115 + line-height: 1; 116 + cursor: default; 117 + user-select: none; 118 + } 119 + 120 + #pwa-infrared { 121 + display: none; 122 + float: right; 123 + margin: 10px; 124 + margin-top: 15px; 125 + margin-right: 7px; 126 + padding-left: 10px; 127 + width: 100px; 128 + image-rendering: pixelated; 129 + cursor: default; 130 + user-select: none; 131 + } 132 + 133 .big-letter { 134 font-size: 1.25em; 135 font-variant: normal; 275 .note code { 276 font-style: normal; 277 } 278 + 279 + .walkthrough-image { 280 + width: 100%; 281 + } 282 283 /* Dark mode styles */ 284 @media (prefers-color-scheme: dark) { 314 a:visited { 315 color: #80d4ff; 316 } - - /* code { - background-color: #3d3d3d; - border-color: #555; - color: #e0e0e0; - } */ 317 + 318 + .auto-detected #detected-link span { 319 + color: #80d4ff; 320 + } 321 322 .ui-element { 323 background-color: #3d3d3d; 385 padding-bottom: 6px; 386 } 387 - .pwa-icon { - margin-right: 5px !important; - } - 388 .auto-detected { 389 margin: 20px 0; 390 padding: 12px 16px; 391 border: none; 392 border-radius: 0; 393 } - } 394 + } 395 </style> 396 </head> 397 <body> - <!-- <h1>PWA Installation Guide</h1> --> - - <!-- <div class="toc"> - <h3>Table of Contents</h3> - <ul> - <li><a href="#about-pwas">About PWAs</a></li> - <li><a href="#chrome-desktop">Chrome (Desktop)</a></li> - <li><a href="#firefox-desktop">Firefox (Desktop)</a></li> - <li><a href="#safari-mac">Safari (macOS)</a></li> - <li><a href="#edge-windows">Microsoft Edge (Windows)</a></li> - <li><a href="#chrome-android">Chrome (Android)</a></li> - <li><a href="#firefox-android">Firefox (Android)</a></li> - <li><a href="#safari-ios">Safari (iOS/iPadOS)</a></li> - <li><a href="#troubleshooting">Troubleshooting</a></li> - <li><a href="#try-these-pwas">Progressive Web Apps You Can Install Right Now</a></li> - </ul> - </div> --> - 398 <div id="about-pwas" class="section"> - <span class="pwa-icon" style="float: right; margin: 15px; margin-top: 40px; font-size: 70px; line-height: 1; cursor: default; user-select: none;">📲</span> - <p><b><span class="big-letter">P</span>rogressive <span class="big-letter">W</span>eb <span class="big-letter">A</span>pps</b> (PWAs) are websites that can be installed like native apps, but without reliance on or approval from centralized app stores.</p> - - <p>You can use the browser-specific instructions below to install PWAs directly from supported websites. - <!-- Once installed, they work just like regular "app store" apps. --> - </p> - - <!-- <p>To explore the full range of PWA capabilities, visit <a href="https://whatpwacando.today/" target="_blank" rel="noopener">What PWA Can Do Today</a>.</p> --> - - <!-- <h3>Creating PWAs</h3> - <p>To make your web application installable as a PWA, it must have the following:</p> - <ul> - <li><strong>Web App Manifest:</strong> A JSON file that defines app metadata, icons, and display preferences</li> - <li><strong>Service Worker:</strong> JavaScript that runs in the background to enable offline functionality and caching</li> - <li><strong>HTTPS:</strong> Secure connection required for service worker registration</li> - </ul> --> 399 + <span id="pwa-emoji" class="pwa-icon">📲</span> 400 + <img id="pwa-infrared" src="infrared.png" alt=""> 401 + <p><b><span class="big-letter">P</span>rogressive <span class="big-letter">W</span>eb <span class="big-letter">A</span>pps</b> (PWAs) are apps that can be installed directly from supported websites, independent of centralized app stores.</p> 402 + 403 + <p>You can use the instructions below to install PWAs directly from your web browser.</p> 404 </div> 405 406 <div id="auto-detected" class="auto-detected"> 409 410 <div id="safari-ios" class="section"> 411 <h2>Safari (iOS / iPadOS)</h2> - <p>Navigate to a website that supports PWA installation, then tap:</p> - <p><span class="ui-element"><span class="dots"><span></span></span></span> <span class="arrow"></span> Share <span class="arrow"></span> More <span class="arrow"></span> Add to Home Screen <span class="arrow"></span> Add</p> - <p class="note">Note: on iOS, Safari is the <a href="https://open-web-advocacy.org/walled-gardens-report/#ios-web-app-installation---a-well-hidden-safari-exclusive">only browser</a> that can install PWAs.</p> 412 + <p class="note">Note: on iOS, Safari is the only browser that can install PWAs.</p> 413 + <p>Open Safari and navigate to a website that supports PWA installation, then tap:</p> 414 + <p>1. The three dots button in the bottom right corner of the screen:</p> 415 + <img src="ios_safari/dots.jpeg" class="walkthrough-image"> 416 + <p>2. Share:</p> 417 + <img src="ios_safari/share.jpeg" class="walkthrough-image"> 418 + <p>3. View More:</p> 419 + <img src="ios_safari/view_more.jpeg" class="walkthrough-image"> 420 + <p>4. Scroll down to reveal the hidden "Add to Home Screen" button:</p> 421 + <video src="ios_safari/scroll_down.mov" autoplay muted loop playsinline class="walkthrough-image"></video> 422 + <p>5. Tap the "Add to Home Screen" button:</p> 423 + <img src="ios_safari/add_to_home_screen.jpeg" class="walkthrough-image"> 424 + <p>6. Tap "Add":</p> 425 + <img src="ios_safari/add.jpeg" class="walkthrough-image"> 426 + <p>The app will be installed directly to your home screen.</p> 427 + 428 </div> 429 430 <div id="chrome-android" class="section"> 467 While Firefox Beta 141+ has introduced <a href="https://www.omgubuntu.co.uk/2025/03/firefox-nightly-supports-web-apps-taskbar-tabs">some web app functionality</a>, it remains incomplete.</p> 468 </div> 469 - <!-- <div id="troubleshooting" class="section"> - <h2>Troubleshooting</h2> - <h3>Install Option Not Available?</h3> - <ul> - <li>Ensure the website is served over HTTPS</li> - <li>Check that the website meets <a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#installability">the requirements</a> for PWA installation</li> - <li>Try refreshing the page or clearing browser cache</li> - </ul> - - <h3>PWA Not Working Properly?</h3> - <ul> - <li>Check your Internet connection</li> - <li>Clear the app's cache or data</li> - <li>Uninstall and reinstall the PWA</li> - <li>Update your browser to the latest version</li> - </ul> - - <h3>Can't Find Installed PWA?</h3> - <ul> - <li><strong>Windows:</strong> Check Start menu, Desktop, or Apps list</li> - <li><strong>Mac:</strong> Check Applications folder or Launchpad</li> - <li><strong>Android:</strong> Check home screen, app drawer, or search</li> - <li><strong>iOS:</strong> Check home screen</li> - </ul> - </div> --> - 470 <div id="try-these-pwas" class="section"> 471 <h2>Progressive Web Apps You Can Install Right Now</h2> 472 545 } 546 } 547 - if (targetSection) { 548 + const isPhone = (detectedOS === 'Android' || detectedOS === 'iOS'); 549 + if (!isPhone) { 550 + document.getElementById('pwa-emoji').style.display = 'none'; 551 + document.getElementById('pwa-infrared').style.display = 'block'; 552 + } 553 + 554 + if (targetSection) { 555 const autoDetectedDiv = document.getElementById('auto-detected'); 556 const detectedLink = document.getElementById('detected-link'); 557 - detectedLink.innerHTML = `<a href="#${targetSection}">${detectedBrowser} on ${detectedOS}</a>`; 558 + detectedLink.innerHTML = `<span style="text-decoration: underline;">${detectedBrowser} on ${detectedOS}</span>`; 559 autoDetectedDiv.style.display = 'block'; 560 561 autoDetectedDiv.addEventListener('click', function() { - window.location.hash = targetSection; 562 + document.getElementById(targetSection).scrollIntoView({ behavior: 'smooth' }); 563 }); 564 } 565 }
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.