From 61d686ca21698b125f1cc1c5ef07f7756ee5bb37 Mon Sep 17 00:00:00 2001
From: Arvind Kumar <thatisarvind@gmail.com>
Date: Fri, 16 Apr 2021 12:33:04 +0530
Subject: [PATCH] 'Automatic Refresh On Update' added in Exanples

---
 docs/content/en/workbox.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/docs/content/en/workbox.md b/docs/content/en/workbox.md
index 73808f9a..a422889e 100644
--- a/docs/content/en/workbox.md
+++ b/docs/content/en/workbox.md
@@ -379,3 +379,36 @@ if (workbox) {
   });
 }
 ```
+
+### Refresh On Update (Automatically)
+
+Refresh the page on every update so that user sees new content automatically. Create a file `pwa-update.js` in `plugins` folder and paste the following code.
+
+```js{}[plugins/pwa-update.js]
+export default async (context) => {
+  const workbox = await window.$workbox
+
+  if (!workbox) {
+    console.log("Workbox couldn't be loaded.")
+    return
+  }
+
+  workbox.addEventListener('installed', (event) => {
+    if (!event.isUpdate) {
+      console.log('The PWA is on the latest version.')
+      return
+    }
+
+    console.log('There is an update for the PWA, reloading...')
+    window.location.reload()
+  })
+}
+```
+
+Connect this plugin in your `nuxt.config.js` file.
+
+```js{}[nuxt.config.js]
+plugins: [
+    { src: '~/plugins/pwa-update.js', mode: 'client' },
+  ],
+```