PWA with multiple pages

Question

I'm creating a PWA for my website.

It was a multiple page website built using jquery. Now I have created an app shell which consists of a common header for the site. My site has good SEO ranking and ranks in top 3 links usually.

Now when I want to go from page A to page B and I want the header to be preloaded and a loader gets displayed until the data for page B is received from the server. I am still using jquery as most of the modules are already built in that and I don't want to rebuild them.

Now the only solutions I can think of to achieve this is either using an ajax call or using routes on the frontend. I have few queries and perceptions about these solutions and want to know if I am right.

1) Using Ajax - When calling page B the HTML in response will have only the header and the loader and a js file in which will have the ajax code to load the data on the page. Once cached the HTML containing header and loader will be fetched from cache and ajax call will be made to call data.

Please correct me if I am wrong.

Now, the problem I see with this is that consider I have page 3 and want the same functionality in it then, I'll be storing the same header again in the cache for this purpose.

2) I have heard that routes on frontend are not SEO friendly or require extra effort to make them SEO friendly. So I don't want my ranking to be affected due to this. Moreover, I don't have any idea about good routing library which handles everything for me in Jquery or Core Javascript.

Any help will be highly appreciated. I am highly confused at this moment so any guidance or reference in the correct direction will be of help.

Answer 1

There's some guidance about possible options in this blog post.

Given your current setup, and your stated desire not to overhaul your architecture too much, I'd recommend trying to add in a service worker implementation that cached your header, footer, and dynamic content separately. The service worker could then concatenate the header (from the cache) + content body (retrieved via fetch() or potentially from the cache) + footer, and return the complete HTML document as the response.

You would need to start exposing your partial HTML header + footer as resources with unique URLs that could be precached, which you're probably not doing right now, and you'd also have to expose just the content body for a given page via a unique URL, and ensure that they're all in a format that could just be concatenated without requiring any complex templating logic.

So it is some extra work, but it does not involve rewriting anything for clients that don't support service workers, and your site would continue to look and behave the same for those clients.