[Feature] Add PWA support (chatwoot#157)

* Add icons, manifest * Add workbox config
Alarees · Oct 18, 2019 · af20e61 · af20e61
1 parent 7017229
commit af20e61
Show file tree

Hide file tree

Showing 33 changed files with 222 additions and 1 deletion.
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
@@ -58,3 +58,16 @@ window.onload = () => {
   }).$mount('#app');
   window.pusher = vuePusher.init();
 };
+
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker
+      .register('/sw.js')
+      .then(registration => {
+        console.log('SW registered: ', registration);
+      })
+      .catch(registrationError => {
+        console.log('SW registration failed: ', registrationError);
+      });
+  });
+}
diff --git a/app/views/layouts/vueapp.html.erb b/app/views/layouts/vueapp.html.erb
@@ -2,12 +2,32 @@
 <html>
   <head>
     <title>Chatwoot</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
+    <meta name="msapplication-TileColor" content="#1f93ff">
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+    <meta name="theme-color" content="#1f93ff">
+    <meta name="description" content="Chatwoot is a customer support solution that helps companies engage customers over Messenger, Twitter, Telegram, WeChat, Whatsapp. Simply connect your channels and converse with your customers from a single place. Easily add new agents to your system and have them own and resolve conversations with customers.Chatwoot also gives you real-time reports to measure your team's performance, canned responses to easily respond to frequently asked questions and private notes for agents to collaborate among themselves.">
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/manifest.json">
     <%= csrf_meta_tags %>
     <%= javascript_pack_tag 'application' %>
     <%= stylesheet_pack_tag 'application' %>
   </head>
   <body>
     <div id="app"></div>
+    <noscript id="noscript">This app works best with JavaScript enabled.</noscript>
     <%= yield %>
   </body>
 </html>
diff --git a/config/application.rb b/config/application.rb
@@ -12,7 +12,7 @@ module Chatwoot
   class Application < Rails::Application
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 5.0
- 
+
     config.autoload_paths << Rails.root.join('lib')
     config.eager_load_paths << Rails.root.join('lib')
 

diff --git a/public/android-icon-144x144.png b/public/android-icon-144x144.png
diff --git a/public/android-icon-192x192.png b/public/android-icon-192x192.png
diff --git a/public/android-icon-36x36.png b/public/android-icon-36x36.png
diff --git a/public/android-icon-48x48.png b/public/android-icon-48x48.png
diff --git a/public/android-icon-72x72.png b/public/android-icon-72x72.png
diff --git a/public/android-icon-96x96.png b/public/android-icon-96x96.png
diff --git a/public/apple-icon-114x114.png b/public/apple-icon-114x114.png
diff --git a/public/apple-icon-120x120.png b/public/apple-icon-120x120.png
diff --git a/public/apple-icon-144x144.png b/public/apple-icon-144x144.png
diff --git a/public/apple-icon-152x152.png b/public/apple-icon-152x152.png
diff --git a/public/apple-icon-180x180.png b/public/apple-icon-180x180.png
diff --git a/public/apple-icon-57x57.png b/public/apple-icon-57x57.png
diff --git a/public/apple-icon-60x60.png b/public/apple-icon-60x60.png
diff --git a/public/apple-icon-72x72.png b/public/apple-icon-72x72.png
diff --git a/public/apple-icon-76x76.png b/public/apple-icon-76x76.png
diff --git a/public/apple-icon-precomposed.png b/public/apple-icon-precomposed.png
diff --git a/public/apple-icon.png b/public/apple-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon-512x512.png b/public/favicon-512x512.png
diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,44 @@
+{
+  "name": "Chatwoot",
+  "short_name": "Chatwoot",
+  "icons": [{
+    "src": "\/android-icon-36x36.png",
+    "sizes": "36x36",
+    "type": "image\/png",
+    "density": "0.75"
+   },
+   {
+    "src": "\/android-icon-48x48.png",
+    "sizes": "48x48",
+    "type": "image\/png",
+    "density": "1.0"
+   },
+   {
+    "src": "\/android-icon-72x72.png",
+    "sizes": "72x72",
+    "type": "image\/png",
+    "density": "1.5"
+   },
+   {
+    "src": "\/android-icon-96x96.png",
+    "sizes": "96x96",
+    "type": "image\/png",
+    "density": "2.0"
+   },
+   {
+    "src": "\/android-icon-144x144.png",
+    "sizes": "144x144",
+    "type": "image\/png",
+    "density": "3.0"
+   },
+   {
+    "src": "\/android-icon-192x192.png",
+    "sizes": "192x192",
+    "type": "image\/png",
+    "density": "4.0"
+   }],
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#1f93ff",
+  "theme_color": "#1f93ff"
+}
diff --git a/public/ms-icon-144x144.png b/public/ms-icon-144x144.png
diff --git a/public/ms-icon-150x150.png b/public/ms-icon-150x150.png
diff --git a/public/ms-icon-310x310.png b/public/ms-icon-310x310.png
diff --git a/public/ms-icon-70x70.png b/public/ms-icon-70x70.png
diff --git a/public/sw.js b/public/sw.js
@@ -0,0 +1,137 @@
+/* eslint-disable */
+/** *
+ *
+ * The rest of the code is auto-generated. Please don't update this file
+ * directly; instead, make changes to your Workbox build configuration
+ * and re-run your build process.
+ * See https://goo.gl/2aRDsh
+ */
+
+ importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
+
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [
+  {
+    "url": "android-icon-144x144.png",
+    "revision": "d9e3ad004635d6d3154da20ef6e53077"
+  },
+  {
+    "url": "android-icon-192x192.png",
+    "revision": "8f2f76058ff81bb03e390ed941f68a70"
+  },
+  {
+    "url": "android-icon-36x36.png",
+    "revision": "70b2fa97615a1ccf8fa373674928d0e3"
+  },
+  {
+    "url": "android-icon-48x48.png",
+    "revision": "c0e8a16e2ea4430deddac82979f97c60"
+  },
+  {
+    "url": "android-icon-72x72.png",
+    "revision": "98f4881cce0daf4b89f0b30825b16d80"
+  },
+  {
+    "url": "android-icon-96x96.png",
+    "revision": "02cf787c7a88eb898976d79ad0b4e041"
+  },
+  {
+    "url": "apple-icon-114x114.png",
+    "revision": "544c150aa39d3ecfd6071e3c54d1503e"
+  },
+  {
+    "url": "apple-icon-120x120.png",
+    "revision": "3b10208d8f4b09c5c3631eb5e4e67d9a"
+  },
+  {
+    "url": "apple-icon-144x144.png",
+    "revision": "d9e3ad004635d6d3154da20ef6e53077"
+  },
+  {
+    "url": "apple-icon-152x152.png",
+    "revision": "a866770945a41e5bcf29706f37e5beba"
+  },
+  {
+    "url": "apple-icon-180x180.png",
+    "revision": "327e9272f10374d2859d2a26c86698ec"
+  },
+  {
+    "url": "apple-icon-57x57.png",
+    "revision": "ee6e09647e6a26e29655ed4091a6d577"
+  },
+  {
+    "url": "apple-icon-60x60.png",
+    "revision": "136acdd5567a57f0b30c4704c93ce412"
+  },
+  {
+    "url": "apple-icon-72x72.png",
+    "revision": "98f4881cce0daf4b89f0b30825b16d80"
+  },
+  {
+    "url": "apple-icon-76x76.png",
+    "revision": "5de2acd8f66a8fa583830286231abe88"
+  },
+  {
+    "url": "apple-icon-precomposed.png",
+    "revision": "03175edf677b78aae0c7ce1c90996bcc"
+  },
+  {
+    "url": "apple-icon.png",
+    "revision": "03175edf677b78aae0c7ce1c90996bcc"
+  },
+  {
+    "url": "apple-touch-icon-precomposed.png",
+    "revision": "d41d8cd98f00b204e9800998ecf8427e"
+  },
+  {
+    "url": "apple-touch-icon.png",
+    "revision": "d41d8cd98f00b204e9800998ecf8427e"
+  },
+  {
+    "url": "favicon-16x16.png",
+    "revision": "df49c81fbfd18e43ea9199153f1d5e1f"
+  },
+  {
+    "url": "favicon-32x32.png",
+    "revision": "e781cbd8ca95543e247fa913eef30f9c"
+  },
+  {
+    "url": "favicon-512x512.png",
+    "revision": "48e48806ef9cbe9edcbe81a08713dc7f"
+  },
+  {
+    "url": "favicon-96x96.png",
+    "revision": "02cf787c7a88eb898976d79ad0b4e041"
+  },
+  {
+    "url": "favicon.ico",
+    "revision": "788f4b1590d83444281e0c96792fd42b"
+  },
+  {
+    "url": "ms-icon-144x144.png",
+    "revision": "d9e3ad004635d6d3154da20ef6e53077"
+  },
+  {
+    "url": "ms-icon-150x150.png",
+    "revision": "0770f6909fd7676a02922cd34d23ff15"
+  },
+  {
+    "url": "ms-icon-310x310.png",
+    "revision": "492181f5f2a4c199936f7f03c70e4914"
+  },
+  {
+    "url": "ms-icon-70x70.png",
+    "revision": "c1b4c1be97c6768c0e5547c2b07bf2a2"
+  }
+].concat(self.__precacheManifest || []);
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
diff --git a/workbox-config.js b/workbox-config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  globDirectory: 'public/',
+  globPatterns: ['**/*.{png,ico}'],
+  swDest: 'public/sw.js',
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<?xml version="1.0" encoding="utf-8"?>
		<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>