Implement PWA for mobile experience (#282)

AllYourBot · Apr 25, 2024 · 4a7aad9 · 4a7aad9
1 parent 2b5f6f8
commit 4a7aad9
Show file tree

Hide file tree

Showing 26 changed files with 78 additions and 12 deletions.
diff --git a/.ruby-version b/.ruby-version
@@ -0,0 +1 @@
+3.2.3
diff --git a/app/assets/images/apple_touch_icons/logo_apple-touch-icon-120x120.png b/app/assets/images/apple_touch_icons/logo_apple-touch-icon-120x120.png
diff --git a/app/assets/images/apple_touch_icons/logo_apple-touch-icon-152x152.png b/app/assets/images/apple_touch_icons/logo_apple-touch-icon-152x152.png
diff --git a/app/assets/images/apple_touch_icons/logo_apple-touch-icon-167x167.png b/app/assets/images/apple_touch_icons/logo_apple-touch-icon-167x167.png
diff --git a/app/assets/images/apple_touch_icons/logo_apple-touch-icon-180x180.png b/app/assets/images/apple_touch_icons/logo_apple-touch-icon-180x180.png
diff --git a/app/assets/images/apple_touch_icons/logo_apple-touch-icon-76x76.png b/app/assets/images/apple_touch_icons/logo_apple-touch-icon-76x76.png
diff --git a/app/assets/images/favicon.png b/app/assets/images/favicon.png
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -80,4 +80,17 @@ def div_tag(content_or_options_with_block = nil, options = nil, &block)
       content_tag(:div, content_or_options_with_block, options)
     end
   end
+
+  def meta_tag(name, content)
+    tag.meta(name: name, content: content)
+  end
+
+  def charset_tag(charset)
+    tag.meta(charset: charset)
+  end
+
+  def viewport_tag(content)
+    tag.meta(name: 'viewport', content: content)
+  end
+
 end
diff --git a/app/views/application/_head.html.erb b/app/views/application/_head.html.erb
@@ -1,6 +1,9 @@
 <head>
-  <title>HostedGPT</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <%= charset_tag('utf-8') %>
+  <%= viewport_tag('width=device-width,initial-scale=1') %>
+
+  <title><%= yield(:title) %></title>
+
   <%= capybara_lockstep if defined?(Capybara::Lockstep) %>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
@@ -11,9 +14,18 @@
   <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
   <%= javascript_importmap_tags %>
   <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
-  <%= favicon_link_tag asset_path("favicon.png") %>
-  <% %w(76 120 152 167 180).each do |size| %>
-    <%= favicon_link_tag asset_path("apple_touch_icons/logo_apple-touch-icon-#{size}x#{size}.png"), rel: 'apple-touch-icon', type: 'image/png', sizes: "#{size}x#{size}" %>
+
+  <!-- PWA -->
+  <link rel="manifest" href="/manifest.json">
+  <!-- ios-pwa-splash screen: from https://github.com/avadhesh18/iosPWASplash -->
+  <%= javascript_include_tag "https://unpkg.com/[email protected]/cdn.min.js" %>
+  <%= javascript_tag do %>
+    iosPWASplash('/apple-touch-icon.png', '#ffffff')
   <% end %>
+  <!-- /ios-pwa-splash screen-->
+  <!-- /PWA -->
+
+  <%= render 'application/head/favicons' %>
+  <%= render 'application/head/meta_tags' %>
   <%= content_for :head %>
-</head>
+</head>
diff --git a/app/views/application/head/_favicons.html.erb b/app/views/application/head/_favicons.html.erb
@@ -0,0 +1,3 @@
+<%= favicon_link_tag "/favicon.svg", rel: 'icon', type: 'image/svg+xml' %>
+<%= favicon_link_tag "/favicon.png", rel: 'icon', type: 'image/png' %>
+<%= favicon_link_tag "/apple-touch-icon.png", rel: 'apple-touch-icon' %>
diff --git a/app/views/application/head/_meta_tags.html.erb b/app/views/application/head/_meta_tags.html.erb
@@ -0,0 +1,8 @@
+<% content_for :meta_tags do %>
+  <%= charset_tag('utf-8') %>
+  <%= meta_tag('mobile-web-app-capable','yes') %>
+  <%= meta_tag('apple-mobile-web-app-capable','yes') %>
+  <%= meta_tag('apple-mobile-web-app-status-bar-style','default') %>
+  <%= meta_tag('apple-touch-fullscreen','yes') %>
+<% end %>
+<%= yield :meta_tags %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,4 +1,4 @@
-<% mobile = false %>
+<% content_for :title, "HostedGPT" %>
 <!DOCTYPE html>
 <html>
   <%= render "head" %>

diff --git a/app/views/layouts/settings.html.erb b/app/views/layouts/settings.html.erb
@@ -1,3 +1,4 @@
+<% content_for :title, "Settings — HostedGPT" %>
 <% content_for :nav_column do %>
   <header class="pl-2 py-7 text-3xl relative">
     <%= link_to root_path, class: "inline-block cursor-pointer py-1 pt-0 align-middle" do %>

diff --git a/app/views/settings/assistants/edit.html.erb b/app/views/settings/assistants/edit.html.erb
@@ -19,5 +19,5 @@
           font-medium
         |
   %>
-  <%= link_to "Cancel", root_path, class: "float-right inline-block ml-5 mt-2 py-3" %>
+  <%= link_to "Cancel", root_path, class: "float-right inline-block ml-5 py-3" %>
 </div>
diff --git a/app/views/settings/people/_form.html.erb b/app/views/settings/people/_form.html.erb
@@ -50,7 +50,7 @@
           data-transition-target="transitionable"
           class="
             list-decimal
-            my-3 p-2 pl-7
+            my-3 p-2 pl-8
             border border-gray-200
             bg-gray-50 dark:bg-transparent
             hidden
@@ -97,7 +97,7 @@
           data-transition-target="transitionable"
           class="
             list-decimal
-            my-3 p-2 pl-7
+            my-3 p-2 pl-8
             border border-gray-200
             bg-gray-50 dark:bg-transparent
             hidden

diff --git a/config/environments/development.rb b/config/environments/development.rb
@@ -75,4 +75,6 @@
 
   # Raise error when a before_action's only/except options reference missing actions
   config.action_controller.raise_on_missing_callback_actions = true
+
+  config.hosts << /[a-z0-9\-]+\.ngrok-free\.app/
 end
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon-precomposed.png b/public/apple-touch-icon-precomposed.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/google.svg b/public/google.svg
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "name": "HostedGPT",
+  "short_name": "HostedGPT",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "icons": [
+    {
+      "src": "/apple-touch-icon.png",
+      "type": "image/png",
+      "sizes": "180x180"
+    },
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/public/microsoft.svg b/public/microsoft.svg