Appearance

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 ​

javascript
const isStandalone = () =>
  window.matchMedia('(display-mode: standalone)').matches ||
  window.navigator.standalone === true // iOS
  • Prevented from opening in browser
  • Navigated using Vue Router
  • Kept within PWA
  • 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
  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