Training Module 22 — PWA & Offline Mode

GoClubPro User Training | Area: Progressive Web App / Offline

---

What Users Need to Learn

GoClubPro is a Progressive Web App (PWA) — it can be installed on phones and computers like a native app, and has limited offline functionality. Users need to understand:

• How to install the app on their device
• What works offline vs. what requires internet
• How the offline fallback page works
• How to get push notifications from the installed app
• How to update the app when a new version is released

---

1. Step-by-Step Walkthrough

Installing on iPhone (iOS Safari)

1. Open GoClubPro in Safari (must be Safari on iOS — Chrome won't show the install option).
2. Tap the Share button (box with arrow pointing up) at the bottom of the screen.
3. Scroll down in the share sheet and tap Add to Home Screen.
4. Edit the name if desired (default: "GoClubPro").
5. Tap Add — the app icon appears on your home screen.
6. Open the app from the home screen — it launches in full-screen mode with no browser address bar.

Installing on Android (Chrome)

1. Open GoClubPro in Chrome on Android.
2. Tap the three-dot menu (⋮) in the top-right corner.
3. Tap Add to Home Screen (or Install App if Chrome shows a banner at the bottom).
4. Confirm by tapping Add or Install.
5. The app appears on your home screen and in your app drawer.
6. Open from there — it runs as a standalone app.

Installing on Desktop (Chrome/Edge)

1. Open GoClubPro in Chrome or Microsoft Edge.
2. Look for the install icon (⊕ or a screen-with-arrow icon) in the address bar, right side.
3. Click it and confirm Install.
4. The app opens in its own window (no browser chrome).
5. A shortcut is added to your desktop or taskbar.

Enabling Push Notifications

1. After installing the PWA, open it from your home screen.
2. When prompted "Allow notifications?" — tap Allow.
3. If you missed the prompt: go to Profile → Notification Preferences and re-enable push notifications.
4. OR go to your device's Settings → Apps → GoClubPro → Notifications → turn on.

What Works Offline

When you lose internet connection:

• Available offline: Recently visited pages (cached), previously loaded schedule data, your profile info.
• Not available offline: Payments, real-time data updates, RSVP submission, squad building.
• Offline page: If you navigate to a page not in cache, you see the offline fallback (/~offline) — a simple message confirming you're offline.

Updating the App

GoClubPro updates automatically in the background:

• When connected to the internet, the PWA checks for updates.
• If an update is available, a banner may appear: "A new version is available — Refresh to update."
• Tap Refresh to apply.
• If no banner appears, close and reopen the app — it checks for updates on launch.

---

2. Simple Explanation (Beginners)

GoClubPro can be saved to your phone's home screen just like any other app — no App Store download needed. It's built into the website itself.

Once installed, it behaves like a real app: it opens full-screen, can send you notifications, and remembers some data even when you're offline. The offline capability is limited — it's there so the app doesn't crash if you lose signal, not for full offline use.

---

3. Advanced Explanation (Power Users)

Service worker caching: GoClubPro uses a service worker to cache key assets (HTML shell, CSS, JS, icons) and recently visited data. The caching strategy is "network first" for dynamic content (falls back to cache if offline) and "cache first" for static assets.

Push notification architecture: Push notifications use the Web Push API via the service worker. Notifications are sent from GoClubPro's backend (on events like squad selection, payment reminders) to the device's push service (APNs for iOS, FCM for Android), which delivers them even when the app is closed.

iOS limitations: iOS Safari has historically had more restrictions on PWA features (background push, background sync). As of iOS 16.4+, web push notifications are supported for PWAs installed from Safari. Users on older iOS will not receive push notifications from the PWA.

Storage: The service worker cache is subject to browser storage limits (~50MB typical). If the device is low on storage, the browser may evict PWA cache, causing the offline fallback to appear even for previously cached pages.

Background sync: For actions taken offline (e.g., drafting an RSVP), background sync queues the action and submits it when connectivity resumes. Not all actions support background sync — payments and squad confirmation require live connectivity.

Update mechanism: The service worker update cycle is: browser checks for new service worker on page load → if different, downloads new SW → waits for all tabs to close → activates new SW. The "refresh to update" banner accelerates this by skipping the wait.

---

4. Visual Description (Text-Based)

INSTALLING ON iPhone:
 Safari → [Share ↑] → Add to Home Screen → Add

INSTALLING ON Android:
 Chrome → [⋮ menu] → Add to Home Screen → Add

INSTALLING ON Desktop:
 Chrome/Edge → [⊕ in address bar] → Install

─────────────────────────────────────────────────────────

OFFLINE BEHAVIOUR:

 ✅ WORKS OFFLINE: ❌ REQUIRES INTERNET:
 → Previously loaded schedule → Pay fees
 → Your profile page → Submit RSVP
 → Recently cached fixtures → Squad builder
 → Dashboard (cached data) → Live standings
 → Notifications

─────────────────────────────────────────────────────────

OFFLINE FALLBACK PAGE (/~offline):

 ┌───────────────────────────────────────────────┐
 │ GoClubPro │
 │ │
 │ 📡 You're offline │
 │ │
 │ Some features require an internet connection.│
 │ Check your connection and try again. │
 │ │
 │ [ Try Again ] │
 └───────────────────────────────────────────────┘

---

5. Tooltips & Hints

---

6. FAQ — PWA & Offline

Q: Do I need to download GoClubPro from the App Store? A: No — it's a web app. Install it directly from the browser via "Add to Home Screen". No App Store account needed.

Q: Will I get notifications when the app is closed? A: Yes, if you've allowed notifications and you're on a supported device. Android (Chrome): full support. iOS 16.4+: supported when installed from Safari. Older iOS: not supported.

Q: The app is asking for notifications again — did I accidentally deny them? A: You may have denied the notification prompt or your device settings changed. Go to your device Settings → Apps → GoClubPro (or the browser's site settings) → Notifications → Enable.

Q: I see the offline page even though I have internet. A: Try refreshing. If the problem persists, the service worker may be stale — clear your browser/app cache: device Settings → Apps → GoClubPro → Storage → Clear Cache.

Q: How do I update to the latest version? A: Updates happen automatically. If you see a "New version available" banner, tap Refresh. Otherwise, close and reopen the app.

Q: Does the installed app use data differently from the browser version? A: Same data consumption — it's the same app, just with a native-feeling shell. No difference in features or performance.

Q: Can I install GoClubPro on my iPad? A: Yes — same process as iPhone (Safari → Share → Add to Home Screen). Works well on iPad with the larger screen layout.

---

7. Common Mistakes & How to Avoid Them

---

8. Short Onboarding Script

Install GoClubPro — No App Store Needed

Get the full app experience on your device in 30 seconds:

• iPhone: Safari → Share → Add to Home Screen
• Android: Chrome → Menu → Add to Home Screen
• Desktop: Click the install icon in your browser address bar

Once installed, you'll get push notifications for squad selection, payments, and fixture updates — even when the app is closed.

---

9. Long Training Guide

PWA vs. Native App — What's the Difference?

For a sports club app used primarily for scheduling, payments, and communication, PWA performance is indistinguishable from a native app in practice.

Push Notification Setup for Clubs

For members to receive push notifications, two things must be true:

1. The PWA must be installed on their device.
2. They must have allowed notifications when prompted.

Admin tip: At season launch, include in your Broadcast:

"Install the GoClubPro app on your phone: [iPhone instructions] or [Android instructions]. Allow notifications when prompted — you'll get instant alerts for squad selection and payment reminders."

This dramatically improves RSVP response rates and payment collection.

Clearing Cache When Things Look Wrong

If a member reports the app is behaving strangely (showing old data, layout broken, etc.):

1. Close the app completely (swipe away on mobile).
2. Reopen.
3. If that doesn't fix it: device Settings → Apps/Application Manager → GoClubPro → Storage → Clear Cache (keep data — don't clear storage, which would log them out).
4. Reopen — the app re-fetches fresh data.

---

10. Micro-Training (Quick Tips)

⚡ QUICK TIPS — PWA & Offline

✅ iPhone: use Safari (not Chrome) to install
✅ Allow notifications when prompted — critical for squad alerts
✅ Updates are automatic — refresh when banner appears
✅ Offline = previously cached pages only; pay fees online
✅ App acting weird? Close fully and reopen
✅ Clearing cache fixes most display/data issues

---

11. Troubleshooting

---

Module 22 of 26+ | Next: Module 23 — Carpool & Cost Sharing