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.

I hope you enjoyed the post and learned something new. On this blog, I share my development experience and insights, and if it resonates with you, I invite you to subscribe to my updates.