issue#10#7#6 - PWA, SEO e forçar atualização cache

package.json

 {
   "name": "janereka-ryru",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Plataforma de Salvaguarda e Acervo Multimídia do Patrimônio Awaete",
   "productName": "Plataforma Janereka Ryru",
   "authors": [

quasar.conf.js

@@ -31,10 +31,10 @@ module.exports = function (/* ctx */) {
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
       // 'ionicons-v4',
-      // 'mdi-v5',
       // 'themify',
       // 'line-awesome',
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+      'mdi-v5',
       'eva-icons',
       'fontawesome-v5',
       'material-icons' // optional, you are not bound to it
@@ -68,13 +68,16 @@ module.exports = function (/* ctx */) {
           loader: 'eslint-loader',
           exclude: /node_modules/
         })
+      },
+      env: {
+        VERSION_PLATFORM: require('./package.json').version
       }
     },
 
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
     devServer: {
-      https: true,
-      port: 8080,
+      https: false,
+      port: 8081,
       open: true // opens browser window automatically
     },
 
@@ -134,9 +137,8 @@ module.exports = function (/* ctx */) {
 
     // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
     pwa: {
-      workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
+      // workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
       workboxOptions: {
-        cleanupOutdatedCaches: true,
         skipWaiting: true,
         clientsClaim: true
       }, // only for GenerateSW
@@ -147,7 +149,7 @@ module.exports = function (/* ctx */) {
         display: 'standalone',
         orientation: 'portrait',
         background_color: '#ffffff',
-        theme_color: '#027be3',
+        theme_color: '#a40000',
         icons: [
           {
             src: 'icons/icon-128x128.png',
@@ -208,7 +210,7 @@ module.exports = function (/* ctx */) {
       builder: {
         // https://www.electron.build/configuration/configuration
 
-        appId: 'quasar-acervo'
+        appId: 'janereka-ryru'
       },
 
       // More info: https://quasar.dev/quasar-cli/developing-electron-apps/node-integration

src-pwa/register-service-worker.js

@@ -31,15 +31,14 @@ register(process.env.SERVICE_WORKER_FILE, {
   updated (/* registration */) {
     console.log('Updated is avaible.')
     Notify.create({
+      textColor: 'white',
       message: 'Nova Atualização Disponível!',
       icon: 'mdi-cellphone-arrow-down',
-      closeBtn: 'Atualizar',
       timeout: 10000,
       type: 'positive',
-      classes: 'glossy text-white',
-      onDismiss () {
-        window.location.reload(true)
-      }
+      actions: [
+        { label: 'Atualizar', color: 'white', handler: () => { location.reload(true) } }
+      ]
     })
   },
 

src/App.vue

@@ -5,6 +5,24 @@
 </template>
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  data () {
+    return {
+      version_platform: process.env.VERSION_PLATFORM
+    }
+  },
+  mounted () {
+    this.verificaVersaoNoCache()
+  },
+  methods: {
+    verificaVersaoNoCache () {
+      if (localStorage.getItem('version_platform') !== this.version_platform) {
+        localStorage.setItem('version_platform', this.version_platform)
+        setTimeout(() => {
+          window.location.reload(true)
+        }, 200)
+      }
+    }
+  }
 }
 </script>

src/index.template.html

@@ -5,6 +5,13 @@
 
     <meta charset="utf-8">
     <meta name="description" content="<%= productDescription %>">
+
+    <meta property="og:image" content="icons/apple-icon-180x180.png">
+    <meta property="og:image:width" content="120">
+    <meta property="og:image:height" content="120">
+    <meta property="og:title" content="<%= productName %>" />
+    <meta property="og:description" content="<%= productDescription %>"">
+
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
@@ -15,6 +22,27 @@
     <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
     <link rel="icon" type="image/ico" href="favicon.ico">
 
+    <!-- iPhone XR -->
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" href="icons/apple-launch-828x1792.png">
+    <!-- iPhone X, XS -->
+    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="icons/apple-launch-1125x2436.png">
+    <!-- iPhone XS Max -->
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" href="icons/apple-launch-1242x2688.png">
+    <!-- iPhone 8, 7, 6s, 6 -->
+    <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="icons/apple-launch-750x1334.png">
+    <!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus -->
+    <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="icons/apple-launch-1242x2208.png">
+    <!-- iPhone 5 -->
+    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="icons/apple-launch-640x1136.png">
+    <!-- iPad Mini, Air, 9.7" -->
+    <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="icons/apple-launch-1536x2048.png">
+    <!-- iPad Pro 10.5" -->
+    <link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="icons/apple-launch-1668x2224.png">
+    <!-- iPad Pro 11" -->
+    <link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" href="icons/apple-launch-1668x2388.png">
+    <!-- iPad Pro 12.9" -->
+    <link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="icons/apple-launch-2048x2732.png">
+
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>