Quicklink vs Workbox

Hey guys. I am a developer working on the pwa-studio open-source project from Adobe. Let me begin by telling you how good the quicklink package is, it is simply amazing. So little work for the developer but so much in return. Amazing work. Well done.

Let me give you a small background of what pwa-studio is. It is a progressive web app toolkit for building E-Commerce applications. Like all PWAs, our app relies on Service Workers to help provide a good experience in mobile environments.

Our Service Worker is based on the Workbox toolkit from Google. We have implemented pre-fetching into the Service Worker using the workbox webpack plugin. At build time, the webpack plugin modifies the SW code to inject a list of pre-fetch assets that the build process has emitted. So when the SW loads, it downloads all possible build assets needed for the app to render. Also, we have implemented a custom API over MessageChannel to let the SW know if the App needs anything pre-cached like an image or document that might not have an HTML tag since they can be dynamic links.

If I read and understand correctly, quicklink is a library that aims to make page transitions faster by pre-fetching required assets ahead of time. Do you think, one can find quicklink useful when they already have workbox prefetching installed? What advantages can quicklink offer in such situations?

Thank you.

[revanth0212]

Hello @gilbertococchi and @demianrenzulli. Thanks, guys for replying on the thread. I appreciate your help. Sorry for the late response guys.

Apps built using the PWA Studio are most likely going to be single-page applications. Right out of the box, all the pages/routes render the same HTML file. So we added logic into the SW that returns the same HTML file from the cache even if the HTML file is not cached on the same route.

For instance, the route aurora-sleeveless-blouse.html was never cached but the file was fetched in 4ms.

Coming to GQL caching, we tried it using Apollo and realized it is good to have feature but increases the network usage which our end-users might not wish to have.

We have deferred having this conversation about pre-fetching HTML and GQL when we have a full-fledged SSR and I am going to push quicklinks because it can solve such features with less work and more clarity.

Thanks for the replies guys, I will keep you posted with any developments in this topic.

You have got a wonderful package here, nice work, and thank you.

[demianrenzulli]

Hi @revanth0212!

First of all, thanks a lot for your interest in quicklink!

I have the feeling that you were referring to “precaching” with Workbox, not “prefetching with Workbox” (please, correct me if I’m wrong).

If that’s the case, the short answer to your question would be: “prefetching” techniques (e.g. using a library like quicklink, or inserting<link rel="prefetch"> tags directly in pages) are, in most cases, complementary to “precaching” techniques in the service worker (caching static assets at the service worker “install” event, with or without using Workbox).

So, why are they complementary?

By default, quicklink will prefetch documents (.html pages) for every link that comes into the view. Imagine a product listing page. As you scroll, the documents (.html) pages for those pages are prefetched by quicklink and added to the browser cache for a short period of time.

In this case, we are talking only about the html page. If you had already cached the static assets that the page will request (CSS, JS, etc), via Workbox precaching, then, by the time the user clicks on the link both the page (thanks to quicklink) and the assets (thanks to Workbox) will be in the cache, making that navigation load much faster.

Of course, if you use one of both, it will likely give you you a considerable performance boost, but using them together can make things much faster.

We’ve recently released a blog post covering this in detail with @jeffposnick and @gilbertococchi: https://web.dev/instant-navigation-experiences/.

Please, let me know if I understood your question well, or I’m missing any important details (also, folks tagged in this thread, feel free to chime in).

Note: I’m not very familiar with the architecture approach of PWA Studio. I’m assuming the sites built with the tool are multi-page-apps. If the sites are single-page-apps, my answer will be a little bit different, but I don’t want to make this thread longer, so let me know if you want to know more.

It would be great to talk about ways in which PWA studio can take advantage of quicklink, so, please feel free to reach out to us if you want to know more.

cc // @addyosmani