add PWA Installation Guide
Hunter
Thursday, July 31st, 2025 at 5:36 PM
16
17 <i>
18 <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>
19 +Try installing Web Workshop as a <a href="https://hunterirving.github.io/web_workshop/pages/pwa">Progressive Web App</a>!</i>
20
21 ## Technologies Used
22
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +<head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
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 + body {
10 + font-family: serif;
11 + max-width: 800px;
12 + margin: 0 auto;
13 + padding: 20px;
14 + background-color: #f5f5f5;
15 + color: #333;
16 + line-height: 1.6;
17 + }
18 +
19 + h1 {
20 + text-align: center;
21 + border-bottom: 3px double #333;
22 + padding-bottom: 10px;
23 + margin-bottom: 30px;
24 + }
25 +
26 + h2 {
27 + border-bottom: 1px solid #666;
28 + padding-bottom: 5px;
29 + margin-top: 0;
30 + }
31 +
32 + .toc {
33 + border: 1px solid #ccc;
34 + padding: 15px;
35 + margin: 20px 0;
36 + background-color: #fff;
37 + }
38 +
39 + .toc h3 {
40 + margin-top: 0;
41 + text-decoration: underline;
42 + }
43 +
44 + .toc ul {
45 + margin: 10px 0;
46 + padding-left: 20px;
47 + }
48 +
49 +
50 + .toc a {
51 + color: #0000EE;
52 + text-decoration: underline;
53 + }
54 +
55 + .toc a:visited {
56 + color: #551A8B;
57 + }
58 +
59 + .auto-detected {
60 + background-color: #ffffcc;
61 + border: 1px dashed #333;
62 + padding: 10px;
63 + margin: 20px 0;
64 + font-weight: bold;
65 + display: none;
66 + }
67 +
68 + .lightbulb {
69 + text-shadow: 0px 0px 1px black;
70 + }
71 +
72 + .section {
73 + margin: 30px 0;
74 + padding: 20px;
75 + padding-top: 16px;
76 + background-color: #fff;
77 + border: 1px solid #ccc;
78 + }
79 +
80 + ol {
81 + padding-left: 25px;
82 + }
83 +
84 + li {
85 + margin: 8px 0;
86 + }
87 +
88 + .toc li {
89 + margin: 5px 0;
90 + }
91 +
92 + code {
93 + background-color: #f0f0f0;
94 + padding: 2px 4px;
95 + font-family: "Courier New", monospace;
96 + border: 1px solid #ddd;
97 + }
98 +
99 + .note {
100 + font-style: italic;
101 + color: #666;
102 + border-left: 3px solid #ccc;
103 + padding-left: 10px;
104 + margin: 15px 0;
105 + }
106 +
107 + footer {
108 + text-align: center;
109 + margin-top: 50px;
110 + padding-top: 20px;
111 + border-top: 1px solid #333;
112 + font-size: 0.9em;
113 + color: #666;
114 + }
115 + </style>
116 +</head>
117 +<body>
118 + <h1>Installing Progressive Web Apps</h1>
119 + <center><p><em>A comprehensive guide for installing PWAs across different operating systems and browsers</em></p></center>
120 +
121 + <div id="auto-detected" class="auto-detected">
122 + <p><span class="lightbulb">💡</span> Based on your system, you might want to jump directly to: <span id="detected-link"></span></p>
123 + </div>
124 +
125 + <div class="toc">
126 + <h3>Table of Contents</h3>
127 + <ul>
128 + <li><a href="#about-pwas">About PWAs</a></li>
129 + <li><a href="#chrome-desktop">Chrome (Windows/Mac/Linux)</a></li>
130 + <li><a href="#firefox-desktop">Firefox (Windows/Mac/Linux)</a></li>
131 + <li><a href="#safari-mac">Safari (macOS)</a></li>
132 + <li><a href="#edge-windows">Microsoft Edge (Windows)</a></li>
133 + <li><a href="#chrome-android">Chrome (Android)</a></li>
134 + <li><a href="#firefox-android">Firefox (Android)</a></li>
135 + <li><a href="#safari-ios">Safari (iOS/iPadOS)</a></li>
136 + <li><a href="#troubleshooting">Troubleshooting</a></li>
137 + </ul>
138 + </div>
139 +
140 + <div id="about-pwas" class="section">
141 + <h2>About Progressive Web Apps (PWAs)</h2>
142 +
143 + <h3>What are PWAs?</h3>
144 + <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>
145 +
146 + <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>
147 +
148 + <h3>How to Install and Use PWAs</h3>
149 + <ul>
150 + <li><strong>Installation:</strong> Use the browser-specific methods outlined below to install PWAs directly from supported websites</li>
151 + <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>
152 + <li><strong>Updates:</strong> PWAs update automatically in the background, ensuring you always have the latest version</li>
153 + </ul>
154 +
155 + <!-- <h3>Creating PWAs</h3>
156 + <p>To make your web application installable as a PWA, it must have the following:</p>
157 + <ul>
158 + <li><strong>Web App Manifest:</strong> A JSON file that defines app metadata, icons, and display preferences</li>
159 + <li><strong>Service Worker:</strong> JavaScript that runs in the background to enable offline functionality and caching</li>
160 + <li><strong>HTTPS:</strong> Secure connection required for service worker registration</li>
161 + </ul> -->
162 + </div>
163 +
164 + <div id="chrome-desktop" class="section">
165 + <h2>Chrome (Windows/Mac/Linux)</h2>
166 + <ol>
167 + <li>Open Chrome and navigate to the website you'd like to install as a PWA</li>
168 + <li>Click the install icon in the address bar (usually appears as a computer with a down arrow)</li>
169 + <ul>
170 + <li>Alternatively, go to the three-dot menu → Cast, save, and share → Install page as app...</li>
171 + </ul>
172 + </li>
173 + <li>Click "Install"</li>
174 + <li>The app will be installed and can be found in your applications folder or Start menu</li>
175 + </ol>
176 + <p class="note">Note: The install option will only be available if the website meets PWA requirements.</p>
177 + </div>
178 +
179 + <div id="firefox-desktop" class="section">
180 + <h2>Firefox (Windows/Mac/Linux)</h2>
181 + <p><strong>⚠️ The desktop version of Firefox lacks PWA support.</strong></p>
182 + <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>
183 +
184 + <p><strong>Recommendation:</strong> Use Chrome, Safari, or Microsoft Edge for better PWA support.</p>
185 +
186 + <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>
187 + </div>
188 +
189 + <div id="safari-mac" class="section">
190 + <h2>Safari (macOS)</h2>
191 + <ol>
192 + <li>Open Safari and navigate to the website you'd like to install as a PWA</li>
193 + <li>Click "File" in the menu bar → "Add to Dock"
194 + <ul>
195 + <li>Alternatively, click the share button and select "Add to Dock"</li>
196 + </ul>
197 + </li>
198 + <li>The PWA will appear in your Dock and Applications folder</li>
199 + <li>When launched, it will open in its own window without browser UI</li>
200 + </ol>
201 + <p class="note">Note: Safari's PWA support on macOS is relatively new (macOS Sonoma 14+). Older versions may not support this feature.</p>
202 + </div>
203 +
204 + <div id="edge-windows" class="section">
205 + <h2>Microsoft Edge (Windows)</h2>
206 + <ol>
207 + <li>Open Microsoft Edge and navigate to the website you'd like to install as a PWA</li>
208 + <li>Look for the install app icon in the address bar</li>
209 + <li>Click the install icon, or go to the three-dot menu → "Apps" → "Install this site as an app"</li>
210 + <li>Click "Install"</li>
211 + <li>The app will be installed and accessible from the Start menu</li>
212 + </ol>
213 + </div>
214 +
215 + <div id="chrome-android" class="section">
216 + <h2>Chrome (Android)</h2>
217 + <ol>
218 + <li>Open Chrome on your Android device and navigate to the website you'd like to install as a PWA</li>
219 + <li>Tap the three-dot menu in the top right</li>
220 + <li>Select "Add to Home screen"</li>
221 + <li>Tap "Install"</li>
222 + <li>Confirm installation</li>
223 + <li>The PWA will be added to your app drawer and can be dragged out to the home screen for easy access</li>
224 + </ol>
225 + </div>
226 +
227 + <div id="firefox-android" class="section">
228 + <h2>Firefox (Android)</h2>
229 + <ol>
230 + <li>Open Firefox for Android and navigate to the website you'd like to install as a PWA</li>
231 + <li>Tap the three-dot menu</li>
232 + <li>Select "Add app to Home screen"</li>
233 + <li>Tap the "Add to home screen" button or drag the app icon to its desired location</li>
234 + <li>The shortcut will appear on your home screen</li>
235 + </ol>
236 + </div>
237 +
238 + <div id="safari-ios" class="section">
239 + <h2>Safari (iOS/iPadOS)</h2>
240 + <ol>
241 + <li>Open Safari on your iOS device and navigate to the website you'd like to install as a PWA</li>
242 + <li>Tap the Share button (square with an arrow pointing up)</li>
243 + <li>Scroll down and tap "Add to Home Screen"</li>
244 + <li>Enter a name for the app and tap "Add"</li>
245 + <li>The PWA will appear on your home screen</li>
246 + </ol>
247 + <p class="note">Note: iOS only allows PWA installation through Safari.</p>
248 + </div>
249 +
250 + <div id="troubleshooting" class="section">
251 + <h2>Troubleshooting</h2>
252 + <h3>Install Option Not Available?</h3>
253 + <ul>
254 + <li>Ensure the website is served over HTTPS</li>
255 + <!-- <li>Check that the site has a valid web app manifest</li>
256 + <li>Verify the site has a registered service worker</li> -->
257 + <li>Try refreshing the page or clearing browser cache</li>
258 + </ul>
259 +
260 + <h3>PWA Not Working Properly?</h3>
261 + <ul>
262 + <li>Check your Internet connection</li>
263 + <li>Clear the app's cache or data</li>
264 + <li>Uninstall and reinstall the PWA</li>
265 + <li>Update your browser to the latest version</li>
266 + </ul>
267 +
268 + <h3>Can't Find Installed PWA?</h3>
269 + <ul>
270 + <li><strong>Windows:</strong> Check Start menu, Desktop, or Apps list</li>
271 + <li><strong>Mac:</strong> Look in Applications folder or Launchpad</li>
272 + <li><strong>Android:</strong> Check home screen, app drawer, or search</li>
273 + <li><strong>iOS:</strong> Look on home screen or in App Library</li>
274 + </ul>
275 + </div>
276 +
277 + <footer>
278 + <p>This guide covers the most common browsers and platforms as of 2025. PWA support continues to evolve.</p>
279 + </footer>
280 +
281 + <script>
282 + function detectPlatform() {
283 + const userAgent = navigator.userAgent.toLowerCase();
284 + const platform = navigator.platform.toLowerCase();
285 +
286 + let detectedOS = '';
287 + let detectedBrowser = '';
288 + let targetSection = '';
289 +
290 + // Detect OS
291 + if (platform.includes('win')) {
292 + detectedOS = 'Windows';
293 + } else if (platform.includes('mac')) {
294 + detectedOS = 'macOS';
295 + } else if (platform.includes('linux')) {
296 + detectedOS = 'Linux';
297 + } else if (userAgent.includes('android')) {
298 + detectedOS = 'Android';
299 + } else if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
300 + detectedOS = 'iOS';
301 + }
302 +
303 + // Detect Browser
304 + if (userAgent.includes('firefox')) {
305 + detectedBrowser = 'Firefox';
306 + if (detectedOS === 'Android') {
307 + targetSection = 'firefox-android';
308 + } else {
309 + targetSection = 'firefox-desktop';
310 + }
311 + } else if (userAgent.includes('safari') && !userAgent.includes('chrome')) {
312 + detectedBrowser = 'Safari';
313 + if (detectedOS === 'iOS') {
314 + targetSection = 'safari-ios';
315 + } else {
316 + targetSection = 'safari-mac';
317 + }
318 + } else if (userAgent.includes('edg')) {
319 + detectedBrowser = 'Edge';
320 + targetSection = 'edge-windows';
321 + } else if (userAgent.includes('chrome')) {
322 + detectedBrowser = 'Chrome';
323 + if (detectedOS === 'Android') {
324 + targetSection = 'chrome-android';
325 + } else {
326 + targetSection = 'chrome-desktop';
327 + }
328 + }
329 +
330 + if (targetSection) {
331 + const autoDetectedDiv = document.getElementById('auto-detected');
332 + const detectedLink = document.getElementById('detected-link');
333 +
334 + detectedLink.innerHTML = `<a href="#${targetSection}">${detectedBrowser} on ${detectedOS}</a>`;
335 + autoDetectedDiv.style.display = 'block';
336 +
337 + }
338 + }
339 +
340 + // Run detection when page loads
341 + window.addEventListener('load', detectPlatform);
342 + </script>
343 +</body>
344 +</html>