Inroducing service-workers on mobile site

Question

I'm new to service workers. I want to integrate service workers in my site.My motive is to improve the performance of my website not making the website offline.Its a real estate website.

So what i have done till now is create modular templates of my site and store them in the cache. for e.g. template1

<div>
     <p>#data</p>
<div>

whenever a fetch occurs on my page i first call an api through ajax get the data and replace the #data variable in the cache response by actual api response and then i returned the new response to the browser.

Question 1:- So i want to know is that the right approach. for html template caching?

In the above approach i'm getting challenges like loops and conditional statements in my html. Question 2:- Is there any way that i can cache the templates with loops and change them at run time?.

Question 3:- Say if i show the cached app-shell to the user initially, so is that going to effect my site's SEO ranking?.

Question 4:- I have to write new templates of the existing code, which means i have to maintain two codes one for service-workers and other for normal browsers which dont support service workers.Any solution to this?

Regards

Answer 1

That's a lot of questions and I don't think service workers are necessarily your best bet.

Question 1: Personally I recommend using a framework such as KnockoutJS, Angular, Polymer...etc for your HTML templates. These often have template caching built-in.

Question 2: Instead of the approach you are using whereby you are replacing the variables before 'sending them to the browser' most frameworks would use some form of data bindings which would take care of iterations and conditions within the browser.

Question 3: Caching the app-shell would have no effect on SEO and Google has been parsing JavaScript for a while; however personally I would recommend that the website's content loads without JavaScript and then JavaScript is only used to enhance the experience. This would be the same whether using the app-shell model or not.

Question 4: I do not understand your current setup and this would not be an ordinary scenario so you might have something wrong.

Service workers and the Cache API are ordinarily used to cache your static assets, usually fonts, css, JavaScript and HTML templates and should result in improved performance as there are less HTTP requests; but there are other ways to improve performance that will address all of your questions without the use of service workers.