Opening a Single Page App PWA using a non-base URL when offline

Question

Let's take an example PWA (Progressive Web App) built with an Single Page App (SPA) framework like Angular - https://www.ngcolombia.com.

1. Open the site.
2. Navigate to a different page, eg: https://www.ngcolombia.com/speakers.
3. Go offline and hit reload - The site will not load.

If we tried reloading from the base URL it works, but in a single page app it's common to reload from a different page with a full URL.

How to solve this issue, appears specific to SPA PWAs?

Answer 1

When using an Application Shell architecture (which is usually the case in a Single Page App), what you'd normally want your service worker to do is to respond to all navigation requests, regardless of the URL, with your cached App Shell HTML.

You can configure Angular's service worker to do that by using the navigationUrls option: https://angular.io/guide/service-worker-config#navigationurls

This approach does not require using hashes in your URLs—you can continue using real URLs and the History API.