Vue.js PWA Service Worker Example

Created with CodeSandbox

Purpose

This repository is a code demo showcasing how one could use Service Workers in a Vue.js PWA.

Prerequisites

• Chromium-based browser with DevTools open, where you can inspect the whole Service Worker lifecycle.

How to use this repo?

• Launch on CodeSandbox and deploy the basic version to Netlify or Zeit;
• Launch the app in another browser window with DevTools open to inspect the PWA capabilities;
• Modify the code to display a different message and save/deploy it to the same endpoint;
• Wait until the previously-launched PWA will display a new message on screen after fetching the update from the remote;

You should be able to inspect the whole lifecycle of this simple PWA, as it delivers Over-The-Air (OTA) update to the client without reloading the page.

Contributing

You're welcome to suggest enhancements and improvements, as well as extending this simple documentation, but the point of this repo is to keep it simple and pure, as it's just a tech/code demo for education purposes.