Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 15

Shooing away the offline dinosaur from your legacy site

0

Share

Download to read offline

How to provide an offline experience for a legacy site, such as a Wordpress site with lots of hard-coded templates.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Shooing away the offline dinosaur from your legacy site

  1. 1. Shooing away the offline dinosaur from your legacy site Aapo Kiiso
  2. 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. 3. When you just have to make offline happen for a pre-PWA era website
  4. 4. 3 main ingredients for this hands-off offline strategy 1. Puppeteer 2. Service Worker 3. API for managing cache
  5. 5. Setting up caching Demo
  6. 6. Puppeteer is the new king of web scraping
  7. 7. Logging responses on a page with Puppeteer
  8. 8. Saving a response’s body to disk
  9. 9. Scraping with Puppeteer Demo
  10. 10. Offline pre-cache is network-first Ryan Chenkie / auth0.com
  11. 11. Offline pre-caching is not a page load issue First visit (Desktop) Subsequent visit (Desktop)
  12. 12. Unpacking the archive in the Service Worker Shout-out to
  13. 13. Persisting archived responses on the client
  14. 14. Setting up Service Worker Demo
  15. 15. Thank you!

Editor's Notes

  • 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!
  • ×