commit f88eaf7b6a47453d67031ae70f8ba863686c8c61
parent 0e034ef7b8fd752df89eb0ca850520a875f1012b
Author: Hunter
Date: Thu, 31 Jul 2025 17:36:36 -0400
add PWA Installation Guide
Diffstat:
2 files changed, 346 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Craft handmade websites in their natural habitat (your web browser).
<i>
<img src="images/hint.gif" width=60px>
-Try installing Web Workshop as a <a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Installing">Progressive Web App</a>!</i>
+Try installing Web Workshop as a <a href="https://hunterirving.github.io/web_workshop/pages/pwa">Progressive Web App</a>!</i>
## Technologies Used
diff --git a/pages/pwa/index.html b/pages/pwa/index.html
@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <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>">
+ <title>PWA Installation Guide</title>
+ <style>
+ body {
+ font-family: serif;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 20px;
+ background-color: #f5f5f5;
+ color: #333;
+ line-height: 1.6;
+ }
+
+ h1 {
+ text-align: center;
+ border-bottom: 3px double #333;
+ padding-bottom: 10px;
+ margin-bottom: 30px;
+ }
+
+ h2 {
+ border-bottom: 1px solid #666;
+ padding-bottom: 5px;
+ margin-top: 0;
+ }
+
+ .toc {
+ border: 1px solid #ccc;
+ padding: 15px;
+ margin: 20px 0;
+ background-color: #fff;
+ }
+
+ .toc h3 {
+ margin-top: 0;
+ text-decoration: underline;
+ }
+
+ .toc ul {
+ margin: 10px 0;
+ padding-left: 20px;
+ }
+
+
+ .toc a {
+ color: #0000EE;
+ text-decoration: underline;
+ }
+
+ .toc a:visited {
+ color: #551A8B;
+ }
+
+ .auto-detected {
+ background-color: #ffffcc;
+ border: 1px dashed #333;
+ padding: 10px;
+ margin: 20px 0;
+ font-weight: bold;
+ display: none;
+ }
+
+ .lightbulb {
+ text-shadow: 0px 0px 1px black;
+ }
+
+ .section {
+ margin: 30px 0;
+ padding: 20px;
+ padding-top: 16px;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ }
+
+ ol {
+ padding-left: 25px;
+ }
+
+ li {
+ margin: 8px 0;
+ }
+
+ .toc li {
+ margin: 5px 0;
+ }
+
+ code {
+ background-color: #f0f0f0;
+ padding: 2px 4px;
+ font-family: "Courier New", monospace;
+ border: 1px solid #ddd;
+ }
+
+ .note {
+ font-style: italic;
+ color: #666;
+ border-left: 3px solid #ccc;
+ padding-left: 10px;
+ margin: 15px 0;
+ }
+
+ footer {
+ text-align: center;
+ margin-top: 50px;
+ padding-top: 20px;
+ border-top: 1px solid #333;
+ font-size: 0.9em;
+ color: #666;
+ }
+ </style>
+</head>
+<body>
+ <h1>Installing Progressive Web Apps</h1>
+ <center><p><em>A comprehensive guide for installing PWAs across different operating systems and browsers</em></p></center>
+
+ <div id="auto-detected" class="auto-detected">
+ <p><span class="lightbulb">💡</span> Based on your system, you might want to jump directly to: <span id="detected-link"></span></p>
+ </div>
+
+ <div class="toc">
+ <h3>Table of Contents</h3>
+ <ul>
+ <li><a href="#about-pwas">About PWAs</a></li>
+ <li><a href="#chrome-desktop">Chrome (Windows/Mac/Linux)</a></li>
+ <li><a href="#firefox-desktop">Firefox (Windows/Mac/Linux)</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>
+ </ul>
+ </div>
+
+ <div id="about-pwas" class="section">
+ <h2>About Progressive Web Apps (PWAs)</h2>
+
+ <h3>What are PWAs?</h3>
+ <p>Progressive Web Apps are web applications that use modern web technologies to provide a native app-like experience across desktop and mobile platforms. They combine the best of web and mobile apps, offering features like offline functionality, push notifications, and home screen installation.</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>How to Install and Use PWAs</h3>
+ <ul>
+ <li><strong>Installation:</strong> Use the browser-specific methods outlined below to install PWAs directly from supported websites</li>
+ <li><strong>Usage:</strong> Once installed, PWAs appear as regular apps on your device and can work offline, send notifications, and provide fast, responsive experiences</li>
+ <li><strong>Updates:</strong> PWAs update automatically in the background, ensuring you always have the latest version</li>
+ </ul>
+
+ <!-- <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> -->
+ </div>
+
+ <div id="chrome-desktop" class="section">
+ <h2>Chrome (Windows/Mac/Linux)</h2>
+ <ol>
+ <li>Open Chrome and navigate to the website you'd like to install as a PWA</li>
+ <li>Click the install icon in the address bar (usually appears as a computer with a down arrow)</li>
+ <ul>
+ <li>Alternatively, go to the three-dot menu → Cast, save, and share → Install page as app...</li>
+ </ul>
+ </li>
+ <li>Click "Install"</li>
+ <li>The app will be installed and can be found in your applications folder or Start menu</li>
+ </ol>
+ <p class="note">Note: The install option will only be available if the website meets PWA requirements.</p>
+ </div>
+
+ <div id="firefox-desktop" class="section">
+ <h2>Firefox (Windows/Mac/Linux)</h2>
+ <p><strong>⚠️ The desktop version of Firefox lacks PWA support.</strong></p>
+ <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>. 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>
+
+ <p><strong>Recommendation:</strong> Use Chrome, Safari, or Microsoft Edge for better PWA support.</p>
+
+ <p class="note">Alternative: Try the <a href="https://github.com/filips123/PWAsForFirefox">PWAsForFirefox extension</a>, though it requires the installation of a helper application, among other caveats.</p>
+ </div>
+
+ <div id="safari-mac" class="section">
+ <h2>Safari (macOS)</h2>
+ <ol>
+ <li>Open Safari and navigate to the website you'd like to install as a PWA</li>
+ <li>Click "File" in the menu bar → "Add to Dock"
+ <ul>
+ <li>Alternatively, click the share button and select "Add to Dock"</li>
+ </ul>
+ </li>
+ <li>The PWA will appear in your Dock and Applications folder</li>
+ <li>When launched, it will open in its own window without browser UI</li>
+ </ol>
+ <p class="note">Note: Safari's PWA support on macOS is relatively new (macOS Sonoma 14+). Older versions may not support this feature.</p>
+ </div>
+
+ <div id="edge-windows" class="section">
+ <h2>Microsoft Edge (Windows)</h2>
+ <ol>
+ <li>Open Microsoft Edge and navigate to the website you'd like to install as a PWA</li>
+ <li>Look for the install app icon in the address bar</li>
+ <li>Click the install icon, or go to the three-dot menu → "Apps" → "Install this site as an app"</li>
+ <li>Click "Install"</li>
+ <li>The app will be installed and accessible from the Start menu</li>
+ </ol>
+ </div>
+
+ <div id="chrome-android" class="section">
+ <h2>Chrome (Android)</h2>
+ <ol>
+ <li>Open Chrome on your Android device and navigate to the website you'd like to install as a PWA</li>
+ <li>Tap the three-dot menu in the top right</li>
+ <li>Select "Add to Home screen"</li>
+ <li>Tap "Install"</li>
+ <li>Confirm installation</li>
+ <li>The PWA will be added to your app drawer and can be dragged out to the home screen for easy access</li>
+ </ol>
+ </div>
+
+ <div id="firefox-android" class="section">
+ <h2>Firefox (Android)</h2>
+ <ol>
+ <li>Open Firefox for Android and navigate to the website you'd like to install as a PWA</li>
+ <li>Tap the three-dot menu</li>
+ <li>Select "Add app to Home screen"</li>
+ <li>Tap the "Add to home screen" button or drag the app icon to its desired location</li>
+ <li>The shortcut will appear on your home screen</li>
+ </ol>
+ </div>
+
+ <div id="safari-ios" class="section">
+ <h2>Safari (iOS/iPadOS)</h2>
+ <ol>
+ <li>Open Safari on your iOS device and navigate to the website you'd like to install as a PWA</li>
+ <li>Tap the Share button (square with an arrow pointing up)</li>
+ <li>Scroll down and tap "Add to Home Screen"</li>
+ <li>Enter a name for the app and tap "Add"</li>
+ <li>The PWA will appear on your home screen</li>
+ </ol>
+ <p class="note">Note: iOS only allows PWA installation through Safari.</p>
+ </div>
+
+ <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 site has a valid web app manifest</li>
+ <li>Verify the site has a registered service worker</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> Look in Applications folder or Launchpad</li>
+ <li><strong>Android:</strong> Check home screen, app drawer, or search</li>
+ <li><strong>iOS:</strong> Look on home screen or in App Library</li>
+ </ul>
+ </div>
+
+ <footer>
+ <p>This guide covers the most common browsers and platforms as of 2025. PWA support continues to evolve.</p>
+ </footer>
+
+ <script>
+ function detectPlatform() {
+ const userAgent = navigator.userAgent.toLowerCase();
+ const platform = navigator.platform.toLowerCase();
+
+ let detectedOS = '';
+ let detectedBrowser = '';
+ let targetSection = '';
+
+ // Detect OS
+ if (platform.includes('win')) {
+ detectedOS = 'Windows';
+ } else if (platform.includes('mac')) {
+ detectedOS = 'macOS';
+ } else if (platform.includes('linux')) {
+ detectedOS = 'Linux';
+ } else if (userAgent.includes('android')) {
+ detectedOS = 'Android';
+ } else if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
+ detectedOS = 'iOS';
+ }
+
+ // Detect Browser
+ if (userAgent.includes('firefox')) {
+ detectedBrowser = 'Firefox';
+ if (detectedOS === 'Android') {
+ targetSection = 'firefox-android';
+ } else {
+ targetSection = 'firefox-desktop';
+ }
+ } else if (userAgent.includes('safari') && !userAgent.includes('chrome')) {
+ detectedBrowser = 'Safari';
+ if (detectedOS === 'iOS') {
+ targetSection = 'safari-ios';
+ } else {
+ targetSection = 'safari-mac';
+ }
+ } else if (userAgent.includes('edg')) {
+ detectedBrowser = 'Edge';
+ targetSection = 'edge-windows';
+ } else if (userAgent.includes('chrome')) {
+ detectedBrowser = 'Chrome';
+ if (detectedOS === 'Android') {
+ targetSection = 'chrome-android';
+ } else {
+ targetSection = 'chrome-desktop';
+ }
+ }
+
+ if (targetSection) {
+ const autoDetectedDiv = document.getElementById('auto-detected');
+ const detectedLink = document.getElementById('detected-link');
+
+ detectedLink.innerHTML = `<a href="#${targetSection}">${detectedBrowser} on ${detectedOS}</a>`;
+ autoDetectedDiv.style.display = 'block';
+
+ }
+ }
+
+ // Run detection when page loads
+ window.addEventListener('load', detectPlatform);
+ </script>
+</body>
+</html>
+\ No newline at end of file