Add prefetch and deepfetching to PDP

README.md

@@ -1,3 +1,21 @@
+Assignment:
+First, I implemented steps 1-11.
+
+Then, I understand how the code works.
+
+Then, I added a prefetch route to '/p/:path*' (routes.ts).
+
+To improve performance, I decided to implement Deepfetching to PDP. So, I added to service-workers.ts the CSS image selectors of PDP page (.primary-image, .productthumbnail, .lazyloaded).
+
+I could verify how in the collection pages, the prefetch and deepfetching started working as expected.
+
+
+Next steps:
+I would like to implement deepfetching for PDP styling sheets.
+I would like to do more tests to could optimize the configuration.
+
+
++++++++++++++++++
 # Layer0 Traditional Template
 
 The repository for the layer0 Traditional template.

src/routes.ts

@@ -6,6 +6,7 @@ export default new Router()
   .match('/', shoppingFlowRouteHandler)
   .match('/home', shoppingFlowRouteHandler)
   .match('/c/:path*', shoppingFlowRouteHandler)
+  .match('/p/:path*', shoppingFlowRouteHandler)
   .match('/service-worker.js', ({ serviceWorker }) => serviceWorker('dist/service-worker.js'))
   .match('/main.js', ({ serveStatic, cache }) => {
     cache(CACHE_ASSETS)

src/service-worker.ts

@@ -20,6 +20,27 @@ new Prefetcher({
         as: 'image',
         callback: deepFetchPLPHero
       },
+      { /* PDP image */
+        selector: '.primary-image',
+        maxMatches: 1,
+        attribute: 'src',
+        as: 'image',
+        callback: deepFetchPDPImages
+      },
+      { /* PDP image */
+        selector: '.productthumbnail',
+        maxMatches: 1,
+        attribute: 'src',
+        as: 'image',
+        callback: deepFetchPDPImages
+      },
+      { /* PDP image */
+        selector: '.lazyloaded',
+        maxMatches: 1,
+        attribute: 'src',
+        as: 'image',
+        callback: deepFetchPDPImages
+      }
     ]),
   ],
 })
@@ -29,6 +50,7 @@ new Prefetcher({
 
 function deepFetchPDPImages({ $el, el, $ }: DeepFetchCallbackParam) {
   const url = $el.attr('src')
+  prefetch(url, 'image')
 }
 
 function deepFetchPLPHero({ $el, el, $ }: DeepFetchCallbackParam) {