Initial PWA work because i'm insane

app.py

@@ -1,13 +1,15 @@
 from utils import clean_articles
 import ldap as l
 from ldap3 import Server, Connection, ALL, MODIFY_REPLACE
-from flask import Flask, g, request, session, redirect, url_for, render_template
+from flask import Flask, g, request, session, redirect, url_for, render_template, send_from_directory
 from flask_simpleldap import LDAP
 from flask_bootstrap import Bootstrap
 import os
 import sqlite3
 import requests
 from utils import clean_articles, get_article
+from flask_cache_buster import CacheBuster
+
 
 app = Flask(__name__)
 Bootstrap(app)
@@ -30,6 +32,14 @@ short_domain = os.environ.get('SHORT_DOMAIN')
 
 ldap = LDAP(app)
 
+config = {
+     'extensions': ['.js', '.css', '.csv'],
+     'hash_size': 10
+}
+
+cache_buster = CacheBuster(config=config)
+cache_buster.register_cache_buster(app)
+
 server = Server(app.config['LDAP_HOST'])
 conn = Connection(server, app.config['LDAP_USERNAME'], app.config['LDAP_PASSWORD'], auto_bind=True)
 
@@ -41,6 +51,11 @@ def before_request():
         g.user = {}
 
 
+@app.route("/manifest.json")
+def manifest():
+    return send_from_directory('./', 'manifest.json')
+
+
 @app.route('/')
 @ldap.login_required
 def index():

manifest.json

@@ -0,0 +1,20 @@
+{
+    "short_name": "Read TI Later",
+    "name": "Read TI Later",
+    "description": "Instapaper outdated. Pocket overrated. Long have we waited. Read TI Later ACTIVATED.",
+    "icons": [
+      {
+        "src": "/images/icons-192.png",
+        "type": "image/png",
+        "sizes": "192x192"
+      },
+      {
+        "src": "/images/icons-512.png",
+        "type": "image/png",
+        "sizes": "512x512"
+      }
+    ],
+    "start_url": "/",
+    "display": "standalone",
+    "scope": "/"
+  }

static/add_modal.js

@@ -2,6 +2,10 @@ function openLinkModal() {
     $('#addLinkModal').modal('show');
 }
 
+function refreshPage() {
+    window.location.reload();
+}
+
 function addUrl() {
     $("#link-btn").prop("disabled", true);
 

static/style.css

@@ -1,5 +1,21 @@
+html {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: fixed;
+}
+
+.navbar {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
 .wrapper {
-  display: flex;
+  height: calc(100% - 56px);
+  overflow: auto;
+  position: fixed;
+  top: 56px;
   width: 100%;
   align-items: stretch;
 }
@@ -206,6 +222,57 @@
   }
 }
 
+@media all and (display-mode: standalone) {
+  .navbar {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    padding-top: 44px !important;
+  }
+
+  #refreshButton {
+    display: block !important;
+  }
+
+  .wrapper {
+    height: calc(100% - 92px);
+    overflow: auto;
+    position: fixed;
+    top: 92px;
+    width: 100%;
+    align-items: stretch;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: env(safe-area-insert-bottom);
+  }
+
+  @media (min-width: 577px) {
+    .navbar {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      padding-top: 24px !important;
+    }
+
+    #navbarNavDropdown {
+      padding-left: env(safe-area-inset-left);
+      padding-right: env(safe-area-inset-right);
+    }
+  
+    .wrapper {
+      height: calc(100% - 72px);
+      overflow: auto;
+      position: fixed;
+      top: 72px;
+      width: 100%;
+      align-items: stretch;
+      padding-left: env(safe-area-inset-left);
+      padding-right: env(safe-area-inset-right);
+      padding-bottom: env(safe-area-insert-bottom);
+    }
+  }
+}
+
 @media (max-width: 991.98px) {
   #sidebar {
     display: none !important;

templates/article.j2

@@ -1,6 +1,15 @@
 {% extends "bootstrap/base.html" %}
 {% block title %}Read TI Later{% endblock %}
 
+{% block metas %}
+{{super()}}
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+<link rel="manifest" crossorigin="use-credentials" href="./manifest.json">
+<link rel="apple-touch-icon" href="{{url_for('.static', filename='read-it-later.png')}}">
+{% endblock %}
+
 {% block styles %}
 {{super()}}
 <link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
@@ -63,7 +72,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="container" style="margin-top: 15px">
+<div class="container wrapper" style="padding-left: 15px !important; padding-right: 15px !important; margin-right: auto !important; margin-left: auto !important; left: 0; right: 0;">
     <div id="error-alert" class="alert alert-danger" role="alert" style="display: none;">
         This is a danger alert—check it out!
     </div>

templates/bookmarklet.j2

@@ -1,6 +1,15 @@
 {% extends "bootstrap/base.html" %}
 {% block title %}Read TI Later{% endblock %}
 
+{% block metas %}
+{{super()}}
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+<link rel="manifest" crossorigin="use-credentials" href="./manifest.json">
+<link rel="apple-touch-icon" href="{{url_for('.static', filename='read-it-later.png')}}">
+{% endblock %}
+
 {% block styles %}
 {{super()}}
 <link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">

templates/fragments/navbar.j2

@@ -29,7 +29,10 @@
             </li>
         </ul>
         <form class="form-inline ml-auto">
+            {% if request.path != url_for('bookmarklet') %}
+            <a class="btn btn-success" id="refreshButton" href="#refresh" onclick="refreshPage();" role="button" style="margin-right: 20px; display: none;">Refresh</a>
             <a class="btn btn-info" href="#addLink" onclick="openLinkModal();" role="button" style="margin-right: 20px;">Add Link</a>
+            {% endif %}
             <a class="btn btn-primary" href="/logout" role="button">Logout</a>
         </form>
     </div>        

templates/list.j2

@@ -1,6 +1,15 @@
 {% extends "bootstrap/base.html" %}
 {% block title %}Read TI Later{% endblock %}
 
+{% block metas %}
+{{super()}}
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+<link rel="manifest" crossorigin="use-credentials" href="./manifest.json">
+<link rel="apple-touch-icon" href="{{url_for('.static', filename='read-it-later.png')}}">
+{% endblock %}
+
 {% block styles %}
 {{super()}}
 <link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
@@ -45,5 +54,6 @@
 
 {% block scripts %}
 {{ super() }}
+{# <script src="{{url_for('.static', filename='inobounce.js')}}"></script> #}
 <script type="text/javascript" src="{{url_for('.static', filename='add_modal.js')}}"></script>
 {% endblock %}

templates/login.j2

@@ -1,5 +1,14 @@
 {% extends "bootstrap/base.html" %}
-{% block title %}Technical Incompetence Link Shortener{% endblock %}
+{% block title %}Read TI Later{% endblock %}
+
+{% block metas %}
+{{super()}}
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+<link rel="manifest" crossorigin="use-credentials" href="./manifest.json">
+<link rel="apple-touch-icon" href="{{url_for('.static', filename='read-it-later.png')}}">
+{% endblock %}
 
 {% block styles %}
 {{super()}}
@@ -13,6 +22,7 @@
 {% endblock %}
 
 {% block content %}
+<div class="wrapper">
     <div class="container" style="margin-top: 15px">
         <div class="jumbotron">
             <h1>Sign in for our awesome service</h1>
@@ -34,4 +44,5 @@
             <button type="submit" class="btn btn-primary">Log In</button>
         </form>
     </div>
+</div>
 {% endblock %}