PWA Recipe: Custom Offline Page for Drupal 8 Without a Single Line of Code

Who said that Progressive Web App (PWA) concepts are hard to implement or Drupal 8 is not ready for PWA? Here is a simple recipe to prove them wrong.

  1. Install SSL certificate (or use localhost).
  2. Install Service Worker Registration module.
  3. Copy service-worker.js, offline.html and manifest.json from GoogleChrome/samples to your site root (Apache 2.0 license).
  4. Adapt manifest.json and offline.html to your needs.
  5. Register service-worker.js through Service Worker Registration.
  6. In about 15 seconds, turn off your Internet connection (or your web server in case of localhost) and reload the site page.
  7. You should see your offline.html displayed.
  8. Congrats! Your site is a PWA now.

If you want to dig deeper, run Chrome Dev Tools -> Audits (Lighthouse) and fix the issues.

This recipe has been crafted for my presentation at DrupalCamp Krasnodar 2017.