fix(QrcodeStream): iOS PWA background stream kill

Apparently, when QrcodeStream is used in an iOS PWA and goes into
the background, the stream on the video element is stopped. When
the user returns, the stream is not restarted automatically. To fix
this we try keep track whether the page/app is in the foreground
and stop/start the stream when this state changes.

Incidentally, this commit makes the demo page is now PWA installable
to make this testable.

Closes #298

.gitignore

@@ -142,6 +142,7 @@ out
 # Nuxt.js build / generate output
 .nuxt
 dist
+dev-dist
 
 # Gatsby files
 .cache/

docs/.vitepress/components/demos/SwitchCamera.vue

@@ -69,7 +69,7 @@ button {
   top: 10px;
 }
 button img {
-  with: 50px;
+  width: 50px;
   height: 50px;
 }
 .error {

docs/.vitepress/components/demos/Torch.vue

@@ -52,7 +52,7 @@ button {
   top: 10px;
 }
 button img {
-  with: 50px;
+  width: 50px;
   height: 50px;
 }
 .error {

docs/.vitepress/config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vitepress'
+import { withPwa } from '@vite-pwa/vitepress'
 
-export default defineConfig({
-  // base: '/vue-qrcode-reader/',
+export default withPwa(defineConfig({
   description: 'A set of Vue.js components for detecting and decoding QR codes.',
   lang: 'en-US',
   lastUpdated: true,
@@ -105,5 +105,38 @@ export default defineConfig({
         '@': __dirname
       }
     }
-  }
-})
+  },
+  pwa: {
+    mode: 'development',
+    base: '/',
+    scope: '/',
+    registerType: 'autoUpdate',
+    // injectRegister: 'inline',
+    includeAssets: ['favicon.svg'],
+    manifest: {
+      name: 'Vue Qrcode Reader',
+      short_name: 'Vue QR',
+      theme_color: '#10b981',
+      icons: [
+        {
+          src: 'pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
+        },
+        {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+        }
+      ],
+    },
+    workbox: {
+      globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
+    },
+    devOptions: {
+      enabled: true,
+      suppressWarnings: true,
+      navigateFallback: '/',
+    },
+  },
+}))

package.json

@@ -42,6 +42,7 @@
   "devDependencies": {
     "@tsconfig/node20": "1.0.1",
     "@types/node": "20.3.1",
+    "@vite-pwa/vitepress": "^0.2.0",
     "@vitejs/plugin-vue": "4.2.3",
     "@vue/compiler-sfc": "3.3.4",
     "@vue/eslint-config-prettier": "7.1.0",
@@ -60,7 +61,8 @@
     "vite-plugin-dts": "2.3.0",
     "vitepress": "1.0.0-beta.2",
     "vue": "3.3.4",
-    "vue-tsc": "1.6.5"
+    "vue-tsc": "1.6.5",
+    "workbox-window": "^7.0.0"
   },
   "bugs": "https://github.com/gruhn/vue-qrcode-reader/issues",
   "homepage": "https://vue-qrcode-reader.netlify.app",