1

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?

Jeff Posnick
  • 53,580
  • 14
  • 141
  • 167
cyberabis
  • 310
  • 3
  • 13

1 Answers1

2

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.

Jeff Posnick
  • 53,580
  • 14
  • 141
  • 167
  • Thanks Jeff, this appears to be it. Will test it out. Our service worker is built using workbox, but I see there is a similar configuration in workbox too for dealing with single page apps - https://developers.google.com/web/tools/workbox/modules/workbox-routing#how_to_register_a_navigation_route – cyberabis Aug 11 '18 at 08:47