Should a PWA be a SPA too?

Question

I was wondering that because my app does have an initial journey that is totally diferente from the behaviour of the app.

I would like to separate this initial journey into a different "HTML" due data transfer and load time. Even not using the same framework (Angular2) as the rest of the app.

But this way the app is not a SPA anymore.

Does this harms the "Connectivity independent" or "App-like" PWA principles?

Obs. We are trying this because our researches shows direct relation between user engagement and speed of the loading time of initial tour.

Answer 1

Following the single-page app pattern for your web app means that you'll have a smooth transition to handling navigations cache-first in your progressive web app, using an App Shell approach.

Following the App Shell pattern isn't the only way to build a progressive web app, but if you take a different approach, you'll need to put more thought into how you cache your HTML, and you might have a harder time using a service worker to respond to navigation in a cache-first manner. Some of these considerations are outlined in this "High-performance service worker loading" article.

If your web app is currently a hybrid of a SPA along with a few static pages, then you can take that into account when you respond to navigation requests in your service worker by examining the incoming URL. Assuming there's a well-known prefix or other way of identifying whether a given URL corresponds to the SPA portion of your web app or the basic HTML portion, you can respond differently inside your fetch handler:

// Not shown: install and activate handlers to keep app-shell.html
// cached and up to date.
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate' && event.request.url.includes('/spa'))
    event.respondWith(caches.match('app-shell.html'));
    return;
  }
  // Either do nothing, and your non-/spa URLs will go against the network,
  // or use a runtime caching strategy to handle your non-/spa URLs.
});

Updated on 2018-06-21: For an additional perspective, you can read "Beyond SPAs: alternative architectures for your PWA"

Answer 2

The short answer is PWA need not be SPA.

If we look at the documentation website of Web Firm Framework you can see it is not an SPA but it is a PWA. If we refresh the page while offline it works. We can also do "Add to home screen" in mobile chrome to add it as an app which brings App-like experience.

So to get an App-like experience your home page and some of its links must be able to be cached.