VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...
Shooing away the offline dinosaur from your legacy site
1. Shooing away the offline dinosaur
from your legacy site
Aapo Kiiso
2. Lamia is a digital
engineering partner that
specializes in ecommerce
+4 MEUR
Lamia’s
Turnover
2012
Lamia was
established
40
Digital Commerce
Experts
+100%
2017
Growth
3. When you just have to make offline happen
for a pre-PWA era website
4. 3 main ingredients for
this hands-off offline strategy
1. Puppeteer
2. Service Worker
3. API for managing cache
How to provide an offline experience for a legacy site, such as
Wordpress or other CMS with hard-coded templates
Totally custom site with scary codebase
Lamia:
Digital Commerce company located in Kamppi
Around 40 people
Ranking 4th in Deloitte’s Tech Fast 50 listing in 2017
Specialized in open source tech and Google Cloud infrastructure (BigQuery)
Design, integrations and UI implementations for various projects, mainly ecommerce
I myself am working as a full-stack (frontend-focus) dev, currently on a Magento 2 project
Want new web features, legacy codebases hinders
Avoid playing Chrome dinosaur game, provide a real offline fallback (customers using to show catalog products)
Point: New tech rising, old tech dying, we still want nice things on old platforms
Demo: Set up API at aapo.kii.so
Go to https://aapo.kii.so
Open Dev Tools
Show that there are no SWs installed
Show that the site doesn’t have offline support by going offline
Show on site which pages you want to cache
Open Postman
Run “Adding a client resource” for “https://aapo.kii.so/offline.html”, “https://aapo.kii.so/” and “https://aapo.kii.so/retu.html” with the client ID 030118b2-74f0-4b4d-8e2b-9fcc2640e66e
Puppeteer is a browser scripting tool. It’s a JS library wrapping around headless Chrome, can be used in Node.js
Was released last summer, has overtaken Webkit-based PhantomJS, Electron (chromium) based Nightmare as the most popular browser scripting tool
In addition to caching page responses, you can use it to:
Generate PDF screenshots of pages
Automate UI testing (form inputs, UX paths)
Diagnose perf issues (it uses Chromium DevTools protocol to control pages, you can use those tools too)
Demo: Scraping an archive
Login to the server with “ssh aapo.kii.so”
In the pwa-precache dir, run “node scrape”
Run “node scrape” again to demonstrate it won’t mindlessly create new archives
Show index.json contents by running “tar xf archive” and “vim index.json”
Request leaves application
Goes to SW which sits as a sort of proxy between the client and the network
If there is no connectivity, it will try to find a response with a matching resource from the offline pre-cache
Point is: Precache is not used at all if network is available, it is optimized & only intended for offline use.
Graphs:
Not much additional CPU usage from pre-cache download & untar
Very small bump can be seen on the initial page load after the main page load bump
Pre-cache in our demo case fits well into quota, but we don’t have a lot in the cache
2: arrayBuffer native method of fetch response
3: Show untar utility: https://github.com/InvokIT/js-untar
3: Gzip handled by browser
7: “readAsJSON” is a method of untar result object
15: Replace md5’d file name with response URL
Uncomment registration in index.html
Go to https://aapo.kii.so
Check that the SW installed in dev tools
Go offline and demo
We are hiring! See our website for roles including
cloud engineers
devs working on microservices
senior frontend guys!
