PWA Links Plugin

File Information

• Path: plugins/pwa-links.client.js
• Purpose: Handles link navigation in PWA standalone mode

Overview

The PWA Links plugin ensures that links work correctly when the application is running as a Progressive Web App (PWA) in standalone mode. It intercepts link clicks and handles navigation appropriately, keeping internal links within the PWA and allowing external links to open in the browser.

Key Features

1. Standalone Detection

   • Detects PWA standalone mode
   • Adds CSS class for styling
   • Handles iOS and Android

2. Link Interception

   • Intercepts link clicks
   • Handles internal links
   • Allows external links

3. Navigation Handling

   • Uses Vue Router for internal links
   • Falls back to location for non-SPA paths
   • Preserves query parameters and hash

Standalone Detection

const isStandalone = () =>
  window.matchMedia('(display-mode: standalone)').matches ||
  window.navigator.standalone === true // iOS

Link Handling

Internal Links

• Prevented from opening in browser
• Navigated using Vue Router
• Kept within PWA

External Links

• Allowed to open in browser
• Added noopener for security
• Opens in new window/tab

CSS Hook

When in standalone mode:

• Adds pwa-standalone class to document.documentElement
• Allows CSS styling for standalone mode
• Can hide browser UI elements

Usage

The plugin runs automatically:

• No configuration needed
• Intercepts all link clicks
• Handles navigation automatically

Link Click Logic

1. Detection: Checks if link was clicked
2. Modifier Check: Ignores modified clicks (Ctrl, Cmd, etc.)
3. Standalone Check: Only processes in standalone mode
4. Origin Check: Determines if internal or external
5. Navigation: Routes appropriately

Code Flow

Link Click
  ↓
Is Standalone?
  ↓ Yes
Is Internal Link?
  ↓ Yes
Prevent Default
  ↓
Use Vue Router
  ↓
Navigate

Integration Points

• Vue Router: Internal navigation
• PWA Configuration: Standalone mode
• All Links: Automatic handling

Notes for Development

• Plugin is client-only (.client.js)
• Only affects standalone mode
• Preserves normal browser behavior
• Handles both iOS and Android
• CSS class for styling hooks

Related Documentation

• PWA Configuration - Nuxt PWA
• Vue Router - Router documentation