update pwa guide; add warioware images Hunter Friday, January 30th, 2026 at 12:11 AM
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
Binary files differ.
3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📲</text></svg>"> 6 + <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💡</text></svg>"> 7 <title>PWA Installation Guide</title> 8 <style> 9 html { 11 } 12 13 body { - font-family: serif; 14 + font-family: sans-serif; 15 max-width: 800px; 16 margin: 0 auto; 17 padding: 20px; 66 } 67 68 .auto-detected { - background-color: #ffffcc; - border: 1px dashed #333; - padding: 10px; 69 + --r: 8px; /* control the stamp radius */ 70 + background: linear-gradient(to top right, #2a2a5a 0%, #ffffcc 100%); 71 + padding: var(--r); 72 margin: 20px 0; 73 font-weight: bold; 74 font-size: 1.15em; 75 display: none; 76 + text-align: center; 77 + cursor: pointer; 78 + mask: 79 + radial-gradient(50% 50%, #0000 66%, #000 67%) round 80 + var(--r) var(--r)/calc(2*var(--r)) calc(2*var(--r)), 81 + conic-gradient(#000 0 0) content-box; 82 + -webkit-mask: 83 + radial-gradient(50% 50%, #0000 66%, #000 67%) round 84 + var(--r) var(--r)/calc(2*var(--r)) calc(2*var(--r)), 85 + conic-gradient(#000 0 0) content-box; 86 + } 87 + 88 + .auto-detected p { 89 + padding: 10px; 90 } 91 92 .lightbulb { 105 border: 1px solid #ccc; 106 font-size: 1.1em; 107 } 108 + 109 + .section:last-of-type { 110 + margin-bottom: 0; 111 + padding-bottom: 10px; 112 + } 113 114 ol { 115 padding-left: 25px; 129 font-family: "Courier New", monospace; 130 border: 1px solid #ddd; 131 } - 132 + 133 + .arrow { 134 + display: inline-block; 135 + width: 16px; 136 + height: 10px; 137 + position: relative; 138 + margin: 0 6px; 139 + vertical-align: middle; 140 + } 141 + 142 + .arrow::before { 143 + content: ''; 144 + position: absolute; 145 + top: 50%; 146 + left: 0; 147 + width: 7.5px; 148 + height: 2px; 149 + background-color: #333; 150 + transform: translateY(-50%); 151 + } 152 + 153 + .arrow::after { 154 + content: ''; 155 + position: absolute; 156 + top: 50%; 157 + left: 7.5px; 158 + width: 0; 159 + height: 0; 160 + border-top: 5px solid transparent; 161 + border-bottom: 5px solid transparent; 162 + border-left: 6px solid #333; 163 + transform: translateY(-50%); 164 + } 165 + 166 + .ui-element { 167 + background-color: #f0f0f0; 168 + padding: 2px 6px; 169 + border-radius: 4px; 170 + border: 1px solid #ddd; 171 + font-size: 1em; 172 + } 173 + 174 + .dots { 175 + display: inline-flex; 176 + align-items: center; 177 + gap: 3px; 178 + height: 1em; 179 + vertical-align: middle; 180 + } 181 + 182 + .dots::before, 183 + .dots::after, 184 + .dots span::before { 185 + content: ''; 186 + display: inline-block; 187 + width: 3.5px; 188 + height: 3.5px; 189 + background-color: #333; 190 + border-radius: 50%; 191 + } 192 + 193 + .dots span { 194 + display: inline-flex; 195 + } 196 + 197 + .dots span::before { 198 + content: ''; 199 + } 200 + 201 + .vdots { 202 + display: inline-flex; 203 + flex-direction: column; 204 + align-items: center; 205 + gap: 3px; 206 + vertical-align: middle; 207 + justify-content: center; 208 + min-height: 1.8em; 209 + box-sizing: content-box; 210 + padding: 2px 0; 211 + } 212 + 213 + .vdots::before, 214 + .vdots::after, 215 + .vdots span::before { 216 + content: ''; 217 + display: block; 218 + width: 3.5px; 219 + height: 3.5px; 220 + background-color: #333; 221 + border-radius: 50%; 222 + } 223 + 224 + .vdots span { 225 + display: flex; 226 + } 227 + 228 + .vdots span::before { 229 + content: ''; 230 + } 231 + 232 + .ui-element:has(.vdots:only-child) { 233 + padding-top: 6px; 234 + padding-bottom: 6px; 235 + } 236 + 237 .note { 238 font-style: italic; 239 color: #666; 261 .toc, .section { 262 background-color: #242424; 263 border: none; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); 264 + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); 265 } 266 267 .auto-detected { - background-color: #2d4a2d; - border: none; - text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.35); 268 + background: linear-gradient(to top right, #1a1a3a 0%, #47496b 100%); 269 + text-shadow: 0px 1px 1px rgb(0, 0, 0); 270 } 271 272 a { - color: #66b3ff; 273 + color: #9ae7ff; 274 } 275 276 a:visited { 277 color: #66b3ff; 278 } 279 - code { 280 + /* code { 281 + background-color: #3d3d3d; 282 + border-color: #555; 283 + color: #e0e0e0; 284 + } */ 285 + 286 + .ui-element { 287 background-color: #3d3d3d; 288 border-color: #555; 289 color: #e0e0e0; 290 } - 291 + 292 + .arrow::before { 293 + background-color: #fff; 294 + } 295 + 296 + .arrow::after { 297 + border-left-color: #fff; 298 + } 299 + 300 + .dots::before, 301 + .dots::after, 302 + .dots span::before { 303 + background-color: #e0e0e0; 304 + } 305 + 306 + .vdots::before, 307 + .vdots::after, 308 + .vdots span::before { 309 + background-color: #e0e0e0; 310 + } 311 + 312 .note { 313 color: #aaa; 314 border-left-color: #666; 336 display: none; 337 } 338 - .section, .toc, .auto-detected { 339 + .section, .toc { 340 margin: 20px 0; 341 padding: 15px 10px; 342 border-left: none; 343 border-right: none; 344 } 345 + 346 + .auto-detected { 347 + margin: 20px 0; 348 + padding: 15px 10px; 349 + border: none; 350 + mask: none; 351 + -webkit-mask: none; 352 + } 353 } 354 </style> 355 </head> 373 </div> --> 374 375 <div id="about-pwas" class="section"> - <h2>About Progressive Web Apps</h2> - - <!-- <h3>What are PWAs?</h3> --> - <p>Progressive Web Apps (PWAs) are websites that can be installed like native apps, but without reliance on or approval from centralized app stores.</p> - - 376 + <p><b>Progressive Web Apps</b> (PWAs) are websites that can be installed like native apps, but without reliance on or approval from centralized app stores.</p> 377 - <p>Use the browser-specific instructions below to install PWAs directly from supported websites. Once installed, they'll work just like regular "app store" apps.</p> 378 + <p>You can use the browser-specific instructions below to install PWAs directly from supported websites. 379 + <!-- Once installed, they work just like regular "app store" apps. --> 380 + </p> 381 - 382 <!-- <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> --> 383 384 <!-- <h3>Creating PWAs</h3> 397 <div id="safari-ios" class="section"> 398 <h2>Safari (iOS / iPadOS)</h2> 399 <p>Navigate to a website that supports PWA installation, then tap:</p> - <p><code>···</code> → Share → More → Add to Home Screen → Add</p> - <p class="note">Note: on iOS, all browsers use Safari's rendering engine. You can install PWAs using other browsers, but the effect will be the same as if they were installed from Safari.</p> 400 + <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> 401 + <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> 402 </div> 403 404 <div id="chrome-android" class="section"> 405 <h2>Chrome (Android)</h2> 406 <p>Navigate to a website that supports PWA installation, then tap:</p> - <p><code>⋮</code> → Add to Home screen → Install.</p> 407 + <p><span class="ui-element"><span class="vdots"><span></span></span></span> <span class="arrow"></span> Add to Home screen <span class="arrow"></span> Install.</p> 408 </div> 409 410 <div id="firefox-android" class="section"> 411 <h2>Firefox (Android)</h2> 412 <p>Navigate to a website that supports PWA installation, then tap:</p> - <p><code>⋮</code> → <code>··· More</code> → Add to Home screen → Add to Home screen.</p> 413 + <p><span class="ui-element"><span class="vdots"><span></span></span></span> <span class="arrow"></span> <span class="ui-element"><span class="dots"><span></span></span> <span style="position: relative; top: 1px;">More</span></span> <span class="arrow"></span> Add to Home screen <span class="arrow"></span> Add to Home screen.</p> 414 </div> 415 416 <div id="safari-mac" class="section"> 417 <h2>Safari (macOS)</h2> - <p>Navigate to a website that supports PWA installation, then click File → Add to Dock.</p> 418 + <p>Navigate to a website that supports PWA installation, then click File <span class="arrow"></span> Add to Dock.</p> 419 <p>The app will appear in your Dock and Applications folder, and will open in its own window without browser UI.</p> 420 <!-- <p class="note">Note: Requires macOS Sonoma 14+. Older versions may not support this feature.</p> --> 421 </div> 423 <div id="edge-windows" class="section"> 424 <h2>Microsoft Edge (Windows)</h2> 425 <p>Navigate to a website that supports PWA installation, then click:</p> - <p><code>···</code> → Apps → Install this site as an app.</p> 426 + <p><span class="ui-element"><span class="dots"><span></span></span></span> <span class="arrow"></span> Apps <span class="arrow"></span> Install this site as an app.</p> 427 <p>The app will appear in the Start menu.</p> 428 </div> 429 430 <div id="chrome-desktop" class="section"> 431 <h2>Chrome (Desktop)</h2> 432 <p>Navigate to a website that supports PWA installation, click the install icon (downward pointing arrow) in the address bar, then click Install.</p> - <!-- <p class="note">Alternatively: <code>⋮</code> → Cast, save, and share → Install page as app</p> --> 433 + <!-- <p class="note">Alternatively: <code>⋮</code> ➛ Cast, save, and share ➛ Install page as app</p> --> 434 <p>The app will appear in your applications folder or Start menu.</p> 435 </div> 436 437 <div id="firefox-desktop" class="section"> 438 <h2>Firefox (Desktop)</h2> - <p><strong>⚠️ The desktop version of Firefox lacks PWA support.</strong><br>Use <a href="#chrome-desktop">Chrome</a>, <a href="#safari-mac">Safari</a>, or <a href="#edge-windows">Edge</a> instead.</p> 439 + <p><strong>⚠️ The desktop version of Firefox lacks PWA support.</strong><br>Try <a href="#chrome-desktop">Chrome</a>, <a href="#safari-mac">Safari</a>, or <a href="#edge-windows">Edge</a> instead.</p> 440 <p>In 2020, Mozilla stated that <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1682593#c8">"there is currently no plan for PWA support in Firefox"</a>.<br> 441 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> 442 </div> 476 <h3><a href="https://hunterirving.com">HunterIrving.com</a></h3> 477 <p class="note">Experience Huntergram, Gobbler, and more in the dedicated hunterirving.com PWA.</p> 478 - <h3><a href="https://hacksburg.org">Hacksburg.org</a></h3> - <p class="note">Stay up to date with goings on at Hacksburg, a makerspace in Blacksburg, VA.</p> 479 + <h3><a href="https://hunterirving.github.io/qr/">QR</a></h3> 480 + <p class="note">A no-nonsense QR code generator.</p> 481 + 482 + <!-- <h3><a href="https://hacksburg.org">Hacksburg.org</a></h3> 483 + <p class="note">Stay up to date with goings on at Hacksburg, a makerspace in Blacksburg, VA.</p> --> 484 485 <h3><a href="https://hunterirving.github.io/klaxon/" target="_blank">Klaxon</a></h3> 486 <p class="note">A chess clock in your pocket, optimized for touchscreen devices and competitive play.</p> 491 <h3><a href="https://hunterirving.github.io/pop_viz/">Pop Viz</a></h3> 492 <p class="note">What does 100,000 people look like? Don't ask me — install this Progressive Web App.</p> 493 - <h3><a href="https://hunterirving.github.io/web_workshop/pages/snake/">SNAKE</a></h3> - <p class="note">The classic game, reimagined for the modern era.</p> 494 + <!-- <h3><a href="https://hunterirving.github.io/web_workshop/pages/snake/">SNAKE</a></h3> 495 + <p class="note">The classic game, reimagined for the modern era.</p> --> 496 </div> 497 498 <script> 548 if (targetSection) { 549 const autoDetectedDiv = document.getElementById('auto-detected'); 550 const detectedLink = document.getElementById('detected-link'); - 551 + 552 detectedLink.innerHTML = `<a href="#${targetSection}">${detectedBrowser} on ${detectedOS}</a>`; 553 autoDetectedDiv.style.display = 'block'; - 554 + 555 + autoDetectedDiv.addEventListener('click', function() { 556 + window.location.hash = targetSection; 557 + }); 558 } 559 } 560