# PWA Navigation — Stay Inside the Home Screen App

When a multi-page HTML prototype is added to the iPhone home screen, tapping a normal `<a href="page2.html">` link can open the system browser (Safari) and reveal the URL bar. This breaks the native-app illusion.

## Solution

Use JavaScript to intercept internal links and navigate via `window.location.href`. This keeps the user inside the standalone web app.

## Drop-in Script

Save as `pwa-nav.js` in the project directory and include it at the bottom of every page:

```javascript
(function() {
  function fixInternalLinks() {
    document.querySelectorAll('a[href]').forEach(function(link) {
      var href = link.getAttribute('href');
      if (!href || href.startsWith('#') || href.startsWith('http') ||
          href.startsWith('mailto:') || href.startsWith('tel:')) return;
      if (link.dataset.pwaNav === 'fixed') return;
      link.dataset.pwaNav = 'fixed';
      link.addEventListener('click', function(e) {
        e.preventDefault();
        window.location.href = href;
      });
    });
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fixInternalLinks);
  } else {
    fixInternalLinks();
  }
})();
```

Include in each HTML page:

```html
<script src="pwa-nav.js"></script>
```

## When to Use

- Multi-page home-screen web apps on iOS
- Banking UI prototypes or any app that should feel native
- Links between pages in the same directory/project

## Do Not Use For

- External links (leave those as normal `a` tags)
- Mailto/tel links
- In-page anchor links (`#section`)

## Related

- `web-ui-replication/SKILL.md` — full UI replication workflow
- `mobile-web-development/SKILL.md` — mobile meta tags and safe areas