mirrors/lnbits-legend
1
0
Fork 0
mirror of https://github.com/lnbits/lnbits-legend.git synced 2024-11-20 02:28:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improved support for Progressive Web Apps (PWA)

Browse Source 
- modify webmanifest to use LNBITS_SITE_TITLE and LNBITS_CUSTOM_LOGO env vars
- modify webmanifest to have a more accurate description, start_url and set theme_color to match default lnbits theme
- add service worker to cache requests (chrome requires a registered service worker to activate some pwa functionality)
- move webmanifest to <head> (chrome acts weird with it in the body)
This commit is contained in:
Lee Salminen 2022-07-04 11:01:08 -06:00
parent e4f16f172c
commit d0ba5c6f30
4 changed files with 91 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
lnbits/core/static/js/service-worker.js Normal file
View File

@ -0,0 +1,71 @@
// the cache version gets updated every time there is a new deployment
const CACHE_VERSION = 1;
const CURRENT_CACHE = `lnbits-${CACHE_VERSION}`;
// these are the routes we are going to cache for offline support
const cacheFiles = [
'/core/static/js/wallet.js',
'/core/static/js/extensions.js',
];
// 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 => {
if (cacheName !== CURRENT_CACHE) {
return caches.delete(cacheName);
}
})
);
})
)
);
// on install we download the routes we want to cache for offline
self.addEventListener('install', evt =>
evt.waitUntil(
caches.open(CURRENT_CACHE).then(cache => {
return cache.addAll(cacheFiles);
})
)
);
// fetch the resource from the network
const fromNetwork = (request, timeout) =>
new Promise((fulfill, reject) => {
const timeoutId = setTimeout(reject, timeout);
fetch(request).then(response => {
clearTimeout(timeoutId);
fulfill(response);
update(request);
}, reject);
});
// fetch the resource from the browser cache
const fromCache = request =>
caches
.open(CURRENT_CACHE)
.then(cache =>
cache
.match(request)
.then(matching => matching || cache.match('/offline/'))
);
// cache the current page to make it available for offline
const update = request =>
caches
.open(CURRENT_CACHE)
.then(cache =>
fetch(request).then(response => cache.put(request, response))
);
// general strategy when making a request (eg if online try to fetch it
// from the network with a timeout, if something fails serve from cache)
self.addEventListener('fetch', evt => {
evt.respondWith(
fromNetwork(evt.request, 10000).catch(() => fromCache(evt.request))
);
evt.waitUntil(update(evt.request));
});

7
lnbits/core/static/js/wallet.js
View File

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

2
lnbits/core/templates/core/wallet.html
View File

@ -1,10 +1,10 @@
<link rel="manifest" href="/manifest/{{ user.id }}.webmanifest" />
{% extends "base.html" %} {% extends "base.html" %}
<!----> <!---->
{% from "macros.jinja" import window_vars with context %} {% from "macros.jinja" import window_vars with context %}
<!----> <!---->
{% block scripts %} {{ window_vars(user, wallet) }} {% block scripts %} {{ window_vars(user, wallet) }}
<script src="/core/static/js/wallet.js"></script> <script src="/core/static/js/wallet.js"></script>
<link rel="manifest" href="/manifest/{{ user.id }}.webmanifest" />
{% endblock %} {% endblock %}
<!----> <!---->
{% block title %} {{ wallet.name }} - {{ SITE_TITLE }} {% endblock %} {% block title %} {{ wallet.name }} - {{ SITE_TITLE }} {% endblock %}

19
lnbits/core/views/generic.py
View File

@ -17,6 +17,7 @@ from lnbits.helpers import template_renderer, url_for
from lnbits.settings import ( from lnbits.settings import (
LNBITS_ADMIN_USERS, LNBITS_ADMIN_USERS,
LNBITS_ALLOWED_USERS, LNBITS_ALLOWED_USERS,
LNBITS_CUSTOM_LOGO,
LNBITS_SITE_TITLE, LNBITS_SITE_TITLE,
SERVICE_FEE, SERVICE_FEE,
) )
@ -251,6 +252,10 @@ 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") @core_html_routes.get("/manifest/{usr}.webmanifest")
async def manifest(usr: str): async def manifest(usr: str):
user = await get_user(usr) user = await get_user(usr)
@ -258,21 +263,21 @@ async def manifest(usr: str):
raise HTTPException(status_code=HTTPStatus.NOT_FOUND) raise HTTPException(status_code=HTTPStatus.NOT_FOUND)
return { return {
"short_name": "LNbits", "short_name": LNBITS_SITE_TITLE,
"name": "LNbits Wallet", "name": LNBITS_SITE_TITLE + " Wallet",
"icons": [ "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", "type": "image/png",
"sizes": "900x900", "sizes": "900x900",
} }
], ],
"start_url": "/wallet?usr=" + usr, "start_url": "/wallet?usr=" + usr + "&wal=" + user.wallets[0].id,
"background_color": "#3367D6", "background_color": "#1F2234",
"description": "Weather forecast information", "description": "Bitcoin Lightning Wallet",
"display": "standalone", "display": "standalone",
"scope": "/", "scope": "/",
"theme_color": "#3367D6", "theme_color": "#1F2234",
"shortcuts": [ "shortcuts": [
{ {
"name": wallet.name, "name": wallet.name,