diff --git a/app/assets/images/keyboard-left-arrow-button.svg b/app/assets/images/keyboard-left-arrow-button.svg
new file mode 100644
index 000000000..fe1f33ddd
--- /dev/null
+++ b/app/assets/images/keyboard-left-arrow-button.svg
@@ -0,0 +1,41 @@
+
+
+
+
diff --git a/app/assets/images/keyboard-right-arrow-button.svg b/app/assets/images/keyboard-right-arrow-button.svg
new file mode 100644
index 000000000..686111b93
--- /dev/null
+++ b/app/assets/images/keyboard-right-arrow-button.svg
@@ -0,0 +1,41 @@
+
+
+
+
diff --git a/app/assets/images/refresh-button.svg b/app/assets/images/refresh-button.svg
new file mode 100644
index 000000000..6484c7ba2
--- /dev/null
+++ b/app/assets/images/refresh-button.svg
@@ -0,0 +1,43 @@
+
+
+
+
diff --git a/app/assets/javascripts/initializePage.js.erb b/app/assets/javascripts/initializePage.js.erb
index 26e18c9f7..510baa6cd 100644
--- a/app/assets/javascripts/initializePage.js.erb
+++ b/app/assets/javascripts/initializePage.js.erb
@@ -41,6 +41,7 @@ function callInitalizers(){
initializeAdditionalContentBoxes();
initializeTimeFixer();
initializeDashboardSort();
+ initializePWAFunctionality();
if (!initializeLiveArticle.called){
initializeLiveArticle();
diff --git a/app/assets/javascripts/initializers/initializePWAFunctionality.js b/app/assets/javascripts/initializers/initializePWAFunctionality.js
new file mode 100644
index 000000000..a789d3a3a
--- /dev/null
+++ b/app/assets/javascripts/initializers/initializePWAFunctionality.js
@@ -0,0 +1,19 @@
+function initializePWAFunctionality() {
+ if (window.matchMedia('(display-mode: standalone)').matches) {
+ document
+ .getElementById('pwa-nav-buttons')
+ .classList.add('pwa-nav-buttons--showing');
+ document.getElementById('app-back-button').onclick = function(e) {
+ e.preventDefault();
+ window.history.back();
+ };
+ document.getElementById('app-forward-button').onclick = function(e) {
+ e.preventDefault();
+ window.history.forward();
+ };
+ document.getElementById('app-refresh-button').onclick = function(e) {
+ e.preventDefault();
+ window.location.reload();
+ };
+ }
+}
diff --git a/app/assets/javascripts/manifest.json.erb b/app/assets/javascripts/manifest.json.erb
index 1fbd4ce8b..ba6834e32 100644
--- a/app/assets/javascripts/manifest.json.erb
+++ b/app/assets/javascripts/manifest.json.erb
@@ -6,7 +6,7 @@
"display": "standalone",
"background_color": "#000000",
"theme_color": "#000000",
- "homepage_url": "https://dev.to",
+ "homepage_url": "<%= ApplicationConfig["APP_PROTOCOL"] %><%= ApplicationConfig["APP_DOMAIN"] %>",
"icons": [{
"src": "<%= image_path "devlogo-pwa-192.png" %>",
"sizes": "192x192",
diff --git a/app/assets/stylesheets/top-bar.scss b/app/assets/stylesheets/top-bar.scss
index 564736ff7..ec37c519f 100644
--- a/app/assets/stylesheets/top-bar.scss
+++ b/app/assets/stylesheets/top-bar.scss
@@ -30,6 +30,37 @@
width: 1250px;
margin: auto;
position: relative;
+ .pwa-nav-buttons {
+ position: absolute;
+ top: 17px;
+ left: -200px;
+ display: none;
+ button {
+ background: transparent;
+ border: 0px;
+ width: 28px;
+ text-align: center;
+ opacity: 0.75;
+ filter: invert(0);
+ filter: var(--theme-social-icon-invert, invert(0));
+ img {
+ width: 15px;
+ height: 15px;
+ }
+ &:hover {
+ opacity: 1;
+ }
+ }
+ @media screen and (min-width: 950px) {
+ left: 88px;
+ &.pwa-nav-buttons--showing {
+ display: block;
+ }
+ }
+ @media screen and (min-width: 1439px) {
+ left: -88px;
+ }
+ }
a {
&:active {
opacity: 0.8;
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
index b310971b0..91eb0f612 100644
--- a/app/views/layouts/_footer.html.erb
+++ b/app/views/layouts/_footer.html.erb
@@ -2,9 +2,9 @@
-<%= javascript_include_tag 'hello-dev.js' , async: true %>
+<%= javascript_include_tag "hello-dev.js", defer: true %>
diff --git a/app/views/layouts/_top_bar.html.erb b/app/views/layouts/_top_bar.html.erb
index 00b3bef2c..797b6371c 100644
--- a/app/views/layouts/_top_bar.html.erb
+++ b/app/views/layouts/_top_bar.html.erb
@@ -2,6 +2,11 @@