Merge pull request #700 from leesalminen/improved-pwa

Improved support for Progressive Web Apps (PWA)

lnbits/core/static/js/service-worker.js

@@ -0,0 +1,51 @@
+// the cache version gets updated every time there is a new deployment
+const CACHE_VERSION = 1
+const CURRENT_CACHE = `lnbits-${CACHE_VERSION}-`
+
+const getApiKey = request => {
+  return request.headers.get('X-Api-Key') || 'none'
+}
+
+// on activation we clean up the previously registered service workers
+self.addEventListener('activate', evt =>
+  evt.waitUntil(
+    caches.keys().then(cacheNames => {
+      return Promise.all(
+        cacheNames.map(cacheName => {
+          const currentCacheVersion = cacheName.split('-').slice(-2, 2)
+          if (currentCacheVersion !== CACHE_VERSION) {
+            return caches.delete(cacheName)
+          }
+        })
+      )
+    })
+  )
+)
+
+// The fetch handler serves responses for same-origin resources from a cache.
+// If no response is found, it populates the runtime cache with the response
+// from the network before returning it to the page.
+self.addEventListener('fetch', event => {
+  // Skip cross-origin requests, like those for Google Analytics.
+  if (
+    event.request.url.startsWith(self.location.origin) &&
+    event.request.method == 'GET'
+  ) {
+    // Open the cache
+    event.respondWith(
+      caches.open(CURRENT_CACHE + getApiKey(event.request)).then(cache => {
+        // Go to the network first
+        return fetch(event.request)
+          .then(fetchedResponse => {
+            cache.put(event.request, fetchedResponse.clone())
+
+            return fetchedResponse
+          })
+          .catch(() => {
+            // If the network is unavailable, get
+            return cache.match(event.request.url)
+          })
+      })
+    )
+  }
+})

lnbits/core/static/js/wallet.js

@@ -702,3 +702,11 @@ new Vue({
     )
   }
 })
+
+if (navigator.serviceWorker != null) {
+  navigator.serviceWorker
+    .register('/service-worker.js')
+    .then(function (registration) {
+      console.log('Registered events at scope: ', registration.scope)
+    })
+}

lnbits/core/templates/core/wallet.html

@@ -4,7 +4,6 @@
 <!---->
 {% block scripts %} {{ window_vars(user, wallet) }}
 <script src="/core/static/js/wallet.js"></script>
-<link rel="manifest" href="/manifest/{{ user.id }}.webmanifest" />
 {% endblock %}
 <!---->
 {% block title %} {{ wallet.name }} - {{ SITE_TITLE }} {% endblock %}

lnbits/core/views/generic.py

@@ -17,6 +17,7 @@ from lnbits.helpers import template_renderer, url_for
 from lnbits.settings import (
     LNBITS_ADMIN_USERS,
     LNBITS_ALLOWED_USERS,
+    LNBITS_CUSTOM_LOGO,
     LNBITS_SITE_TITLE,
     SERVICE_FEE,
 )
@@ -144,6 +145,7 @@ async def wallet(
             "user": user.dict(),
             "wallet": wallet.dict(),
             "service_fee": service_fee,
+            "web_manifest": f"/manifest/{user.id}.webmanifest",
         },
     )
 
@@ -251,6 +253,11 @@ async def lnurlwallet(request: Request):
     )
 
 
+@core_html_routes.get("/service-worker.js", response_class=FileResponse)
+async def service_worker():
+    return FileResponse("lnbits/core/static/js/service-worker.js")
+
+
 @core_html_routes.get("/manifest/{usr}.webmanifest")
 async def manifest(usr: str):
     user = await get_user(usr)
@@ -258,21 +265,23 @@ async def manifest(usr: str):
         raise HTTPException(status_code=HTTPStatus.NOT_FOUND)
 
     return {
-        "short_name": "LNbits",
-        "name": "LNbits Wallet",
+        "short_name": LNBITS_SITE_TITLE,
+        "name": LNBITS_SITE_TITLE + " Wallet",
         "icons": [
             {
-                "src": "https://cdn.jsdelivr.net/gh/lnbits/lnbits@0.3.0/docs/logos/lnbits.png",
+                "src": LNBITS_CUSTOM_LOGO
+                if LNBITS_CUSTOM_LOGO
+                else "https://cdn.jsdelivr.net/gh/lnbits/lnbits@0.3.0/docs/logos/lnbits.png",
                 "type": "image/png",
                 "sizes": "900x900",
             }
         ],
-        "start_url": "/wallet?usr=" + usr,
-        "background_color": "#3367D6",
-        "description": "Weather forecast information",
+        "start_url": "/wallet?usr=" + usr + "&wal=" + user.wallets[0].id,
+        "background_color": "#1F2234",
+        "description": "Bitcoin Lightning Wallet",
         "display": "standalone",
         "scope": "/",
-        "theme_color": "#3367D6",
+        "theme_color": "#1F2234",
         "shortcuts": [
             {
                 "name": wallet.name,

lnbits/extensions/tpos/templates/tpos/tpos.html

@@ -1,4 +1,3 @@
-<link rel="manifest" href="/tpos/manifest/{{ tpos.id }}.webmanifest" />
 {% extends "public.html" %} {% block toolbar_title %} {{ tpos.name }}
 <q-btn
   flat

lnbits/extensions/tpos/views.py

@@ -35,7 +35,12 @@ async def tpos(request: Request, tpos_id):
         )
 
     return tpos_renderer().TemplateResponse(
-        "tpos/tpos.html", {"request": request, "tpos": tpos}
+        "tpos/tpos.html",
+        {
+            "request": request,
+            "tpos": tpos,
+            "web_manifest": f"/tpos/manifest/{tpos_id}.webmanifest",
+        },
     )
 
 

lnbits/static/js/base.js

@@ -315,6 +315,7 @@ window.windowMixin = {
   data: function () {
     return {
       g: {
+        offline: !navigator.onLine,
         visibleDrawer: false,
         extensions: [],
         user: null,
@@ -355,6 +356,14 @@ window.windowMixin = {
     }
     this.g.allowedThemes = window.allowedThemes ?? ['bitcoin']
 
+    addEventListener('offline', event => {
+      this.g.offline = true
+    })
+
+    addEventListener('online', event => {
+      this.g.offline = false
+    })
+
     // failsafe if admin changes themes halfway
     if (!this.$q.localStorage.getItem('lnbits.theme')) {
       this.changeColor(this.g.allowedThemes[0])

lnbits/templates/base.html

@@ -16,7 +16,9 @@
     />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    {% block head_scripts %}{% endblock %}
+    {% if web_manifest %}
+    <link async="async" rel="manifest" href="{{ web_manifest }}" />
+    {% endif %} {% block head_scripts %}{% endblock %}
   </head>
 
   <body data-theme="bitcoin">
@@ -51,6 +53,14 @@
             >
           </q-badge>
           {% endblock %}
+          <q-badge
+            v-if="g.offline"
+            color="red"
+            text-color="white"
+            class="q-mr-md"
+          >
+            <span> OFFLINE </span>
+          </q-badge>
           <q-btn-dropdown
             v-if="g.allowedThemes && g.allowedThemes.length > 1"
             dense