[#259] Proper support for the progressive webapp (#262)

Closes: 259
Reviewed-on: platypush/platypush#262
This commit is contained in:
Fabio Manganiello 2023-05-20 02:42:33 +02:00
parent 27d4a20418
commit 013274bcbc
63 changed files with 3327 additions and 154 deletions

View file

@ -0,0 +1,185 @@
from dataclasses import dataclass
import math
from typing import Tuple
from flask import Blueprint, make_response, request
logo = Blueprint('logo', __name__)
# Declare routes list
__routes__ = [
logo,
]
@dataclass
class Gear:
"""
A utility class used to model the gears in the application's logo.
"""
center: Tuple[float, float]
outer_radius: float
inner_radius: float
color: str = "currentColor"
background: str = ""
num_spikes: int = 0
spike_max_base: float = 0
spike_min_base: float = 0
spike_height: float = 0
alpha_offset: float = 0
def to_svg(self) -> str:
"""
Returns the SVG representation of a gear.
"""
# Generate the basic circle
svg = f"""
<circle
cx="{self.center[0]}" cy="{self.center[1]}"
r="{self.outer_radius - (self.inner_radius / math.pi)}"
stroke-width="{self.inner_radius}"
stroke="{self.color}"
fill="none" />
"""
# Generate the spikes
for i in range(self.num_spikes):
# Iterate for alpha -> [0, 2*pi]
alpha = (2 * math.pi * i) / self.num_spikes
# Calculate the base angle for the major base of the gear polygon
maj_delta_alpha = math.asin(self.spike_max_base / (2 * self.outer_radius))
# Calculate the points of the gear polygon's major base
maj_base = (
(
self.center[0]
+ self.outer_radius
* math.cos(alpha + maj_delta_alpha + self.alpha_offset),
self.center[1]
+ self.outer_radius
* math.sin(alpha + maj_delta_alpha + self.alpha_offset),
),
(
self.center[0]
+ self.outer_radius
* math.cos(alpha - maj_delta_alpha + self.alpha_offset),
self.center[1]
+ self.outer_radius
* math.sin(alpha - maj_delta_alpha + self.alpha_offset),
),
)
# Height of the gear relative to the circle's center
h = self.outer_radius * math.cos(maj_delta_alpha) + self.spike_height
# Calculate the base angle for the minor base of the gear polygon
min_delta_alpha = math.asin(self.spike_min_base / (2 * h))
# Calculate the points of the gear polygon's minor base
min_base = (
(
self.center[0]
+ h * math.cos(alpha - min_delta_alpha + self.alpha_offset),
self.center[1]
+ h * math.sin(alpha - min_delta_alpha + self.alpha_offset),
),
(
self.center[0]
+ h * math.cos(alpha + min_delta_alpha + self.alpha_offset),
self.center[1]
+ h * math.sin(alpha + min_delta_alpha + self.alpha_offset),
),
)
# Flatten the polygon's points
svg_points = " ".join(
[f"{point[0]},{point[1]}" for point in [*maj_base, *min_base]]
)
# Serialize the gear polygon to SVG
svg += f"""
<polygon points="{svg_points}" stroke="{self.color}" fill="{self.color}" />"""
return svg
# Properties of the two gears on the logo
gears = [
Gear(
center=(32.9, 34.5),
outer_radius=22.6,
inner_radius=12.4,
num_spikes=12,
spike_max_base=9,
spike_min_base=4.3,
spike_height=10.16,
),
Gear(
center=(65.5, 70.5),
outer_radius=14.4,
inner_radius=8.5,
num_spikes=7,
spike_max_base=9,
spike_min_base=4.3,
spike_height=7.5,
alpha_offset=math.pi / 6.6,
),
]
template_start = """
<svg version="1.1"
width="{width}" height="{height}"
viewBox="0 0 100 100"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="triangleGradient">
<stop offset="0%" stop-color="#8acb45" />
<stop offset="50%" stop-color="#6bbb4c" />
<stop offset="100%" stop-color="#5cb450" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="{bg_color}" />
"""
template_end = "\n</svg>"
@logo.route('/logo.svg', methods=['GET'])
def logo_path():
"""
This path dynamically generates the logo image as a parametrizable vector SVG.
Parameters:
- ``size``: Size of the image in pixels (default: 256)
- ``bg``: Background color (default: "none")
- ``fg``: Foreground color (default: "currentColor")
"""
size = request.args.get("size", 256)
bg = request.args.get("bg", "none")
fg = request.args.get("fg", "currentColor")
svg = template_start.format(
width=size,
height=size,
bg_color=bg,
)
for gear in gears:
gear.color = fg
gear.background = bg
svg += gear.to_svg()
# "Play" triangle on the logo
svg += """\n\t\t<polygon points="67,47 67,3 99,25.3" fill="url(#triangleGradient)" />"""
svg += template_end
rs = make_response(svg)
rs.headers.update({"Content-Type": "image/svg+xml"})
return rs
# vim:sw=4:ts=4:et:

View file

@ -0,0 +1,113 @@
from flask import Blueprint, jsonify, send_from_directory
from platypush.config import Config
from platypush.backend.http.app import template_folder
pwa = Blueprint('pwa', __name__, template_folder=template_folder)
# Declare routes list
__routes__ = [
pwa,
]
@pwa.route('/manifest.json', methods=['GET'])
def manifest_json():
"""Generated manifest file for the PWA"""
return jsonify(
{
"name": f'Platypush @ {Config.get("device_id")}',
"short_name": Config.get('device_id'),
"icons": [
{
"src": "/img/icons/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png",
},
{
"src": "/img/icons/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png",
},
{
"src": "/img/icons/apple-touch-icon-60x60.png",
"sizes": "60x60",
"type": "image/png",
},
{
"src": "/img/icons/apple-touch-icon-76x76.png",
"sizes": "76x76",
"type": "image/png",
},
{
"src": "/img/icons/apple-touch-icon-120x120.png",
"sizes": "120x120",
"type": "image/png",
},
{
"src": "/img/icons/msapplication-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
},
{
"src": "/img/icons/mstile-150x150.png",
"sizes": "150x150",
"type": "image/png",
},
{
"src": "/img/icons/apple-touch-icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
},
{
"src": "/img/icons/apple-touch-icon-180x180.png",
"sizes": "180x180",
"type": "image/png",
},
{
"src": "/img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png",
},
{
"src": "/img/icons/android-chrome-maskable-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable",
},
{
"src": "/img/icons/logo-256x256.png",
"sizes": "256x256",
"type": "image/png",
},
{
"src": "/img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
},
{
"src": "/img/icons/android-chrome-maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable",
},
],
"gcm_sender_id": "",
"gcm_user_visible_only": True,
"start_url": "/",
"permissions": ["gcm"],
"orientation": "portrait",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff",
}
)
@pwa.route('/service-worker.js', methods=['GET'])
def service_worker_js():
"""URL that serves the service worker for the PWA"""
return send_from_directory(template_folder, 'service-worker.js')
# vim:sw=4:ts=4:et:

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 971 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,39 @@
<svg version="1.1"
width="256" height="256"
viewBox="0 0 100 100"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="triangleGradient">
<stop offset="0%" stop-color="#8acb45" />
<stop offset="50%" stop-color="#6bbb4c" />
<stop offset="100%" stop-color="#5cb450" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="none" />
<circle cx="32.9" cy="34.5" r="18.652957411320997" stroke-width="12.4" stroke="currentColor" fill="none" />
<polygon points="55.047460351019936,39.0 55.047460351019936,30.0 65.13584176553678,32.35 65.13584176553678,36.65" stroke="currentColor" fill="currentColor" />
<polygon points="49.830263293291885,49.47084449253994 54.330263293291885,41.67661585847999 61.89205788133026,48.755966264631844 59.742057881330254,52.479875500904924" stroke="currentColor" fill="currentColor" />
<polygon points="40.07661585848,55.93026329329189 47.870844492539945,51.43026329329188 50.87987550090493,61.342057881330255 47.15596626463184,63.492057881330254" stroke="currentColor" fill="currentColor" />
<polygon points="28.4,56.64746035101994 37.4,56.64746035101993 35.050000000000004,66.73584176553678 30.75,66.73584176553678" stroke="currentColor" fill="currentColor" />
<polygon points="17.92915550746006,51.43026329329189 25.72338414152001,55.93026329329189 18.644033735368154,63.492057881330254 14.920124499095078,61.34205788133026" stroke="currentColor" fill="currentColor" />
<polygon points="11.469736706708115,41.67661585847999 15.969736706708115,49.47084449253994 6.0579421186697395,52.479875500904924 3.9079421186697445,48.75596626463185" stroke="currentColor" fill="currentColor" />
<polygon points="10.752539648980061,30.000000000000004 10.752539648980065,39.0 0.6641582344632226,36.65 0.6641582344632226,32.35000000000001" stroke="currentColor" fill="currentColor" />
<polygon points="15.969736706708108,19.52915550746006 11.469736706708112,27.323384141520012 3.907942118669741,20.24403373536816 6.057942118669736,16.520124499095083" stroke="currentColor" fill="currentColor" />
<polygon points="25.723384141519993,13.06973670670812 17.92915550746005,17.569736706708124 14.92012449909506,7.657942118669752 18.644033735368136,5.507942118669753" stroke="currentColor" fill="currentColor" />
<polygon points="37.39999999999999,12.352539648980063 28.399999999999995,12.352539648980066 30.749999999999996,2.264158234463224 35.04999999999999,2.264158234463224" stroke="currentColor" fill="currentColor" />
<polygon points="47.870844492539945,17.569736706708117 40.07661585848,13.069736706708117 47.15596626463185,5.507942118669746 50.87987550090493,7.6579421186697445" stroke="currentColor" fill="currentColor" />
<polygon points="54.33026329329188,27.323384141519995 49.83026329329188,19.52915550746005 59.74205788133025,16.52012449909506 61.892057881330246,20.244033735368134" stroke="currentColor" fill="currentColor" />
<circle cx="65.5" cy="70.5" r="11.69436596743778" stroke-width="8.5" stroke="currentColor" fill="none" />
<polygon points="75.59619697596976,80.76775567601894 79.72023567151646,72.76823663812462 85.21241914871936,78.24356296406287 83.2420451052915,82.06555539327904" stroke="currentColor" fill="currentColor" />
<polygon points="63.76722121027272,84.79536560098661 72.59279310784501,83.03205034817951 71.73633099741353,90.73982242421863 67.51966886857343,91.58229526722646" stroke="currentColor" fill="currentColor" />
<polygon points="53.24306321548609,78.05827365609566 60.1243326673541,83.85897453881562 53.56415840708632,87.99508278180117 50.276440780082716,85.22363680450164" stroke="currentColor" fill="currentColor" />
<polygon points="51.94862861538407,65.62964748747973 51.70385937197527,74.62631842830451 44.379917983020505,72.07618897003609 44.49686328820471,67.7777795205309" stroke="currentColor" fill="currentColor" />
<polygon points="60.85865306549732,56.86849609787744 53.67216135948117,62.28646037972363 51.09953008890019,54.970392715438265 54.53307612621901,52.381809780778426" stroke="currentColor" fill="currentColor" />
<polygon points="73.2637064235145,58.37214517857838 64.54706708723641,56.131565190885546 68.66298975389094,49.55870749237323 72.82760632566824,50.62920681982647" stroke="currentColor" fill="currentColor" />
<polygon points="79.82253049387555,69.00831630296325 76.13955073459155,60.796394475966565 83.84465362096915,59.916242652069755 85.60429950596037,63.83971641385705" stroke="currentColor" fill="currentColor" />
<polygon points="67,47 67,3 99,25.3" fill="url(#triangleGradient)" />
</svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

View file

@ -0,0 +1,39 @@
<svg version="1.1"
width="16" height="16"
viewBox="0 0 100 100"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="triangleGradient">
<stop offset="0%" stop-color="#8acb45" />
<stop offset="50%" stop-color="#6bbb4c" />
<stop offset="100%" stop-color="#5cb450" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="none" />
<circle cx="32.9" cy="34.5" r="18.652957411320997" stroke-width="12.4" stroke="currentColor" fill="none" />
<polygon points="55.047460351019936,39.0 55.047460351019936,30.0 65.13584176553678,32.35 65.13584176553678,36.65" stroke="currentColor" fill="currentColor" />
<polygon points="49.830263293291885,49.47084449253994 54.330263293291885,41.67661585847999 61.89205788133026,48.755966264631844 59.742057881330254,52.479875500904924" stroke="currentColor" fill="currentColor" />
<polygon points="40.07661585848,55.93026329329189 47.870844492539945,51.43026329329188 50.87987550090493,61.342057881330255 47.15596626463184,63.492057881330254" stroke="currentColor" fill="currentColor" />
<polygon points="28.4,56.64746035101994 37.4,56.64746035101993 35.050000000000004,66.73584176553678 30.75,66.73584176553678" stroke="currentColor" fill="currentColor" />
<polygon points="17.92915550746006,51.43026329329189 25.72338414152001,55.93026329329189 18.644033735368154,63.492057881330254 14.920124499095078,61.34205788133026" stroke="currentColor" fill="currentColor" />
<polygon points="11.469736706708115,41.67661585847999 15.969736706708115,49.47084449253994 6.0579421186697395,52.479875500904924 3.9079421186697445,48.75596626463185" stroke="currentColor" fill="currentColor" />
<polygon points="10.752539648980061,30.000000000000004 10.752539648980065,39.0 0.6641582344632226,36.65 0.6641582344632226,32.35000000000001" stroke="currentColor" fill="currentColor" />
<polygon points="15.969736706708108,19.52915550746006 11.469736706708112,27.323384141520012 3.907942118669741,20.24403373536816 6.057942118669736,16.520124499095083" stroke="currentColor" fill="currentColor" />
<polygon points="25.723384141519993,13.06973670670812 17.92915550746005,17.569736706708124 14.92012449909506,7.657942118669752 18.644033735368136,5.507942118669753" stroke="currentColor" fill="currentColor" />
<polygon points="37.39999999999999,12.352539648980063 28.399999999999995,12.352539648980066 30.749999999999996,2.264158234463224 35.04999999999999,2.264158234463224" stroke="currentColor" fill="currentColor" />
<polygon points="47.870844492539945,17.569736706708117 40.07661585848,13.069736706708117 47.15596626463185,5.507942118669746 50.87987550090493,7.6579421186697445" stroke="currentColor" fill="currentColor" />
<polygon points="54.33026329329188,27.323384141519995 49.83026329329188,19.52915550746005 59.74205788133025,16.52012449909506 61.892057881330246,20.244033735368134" stroke="currentColor" fill="currentColor" />
<circle cx="65.5" cy="70.5" r="11.69436596743778" stroke-width="8.5" stroke="currentColor" fill="none" />
<polygon points="75.59619697596976,80.76775567601894 79.72023567151646,72.76823663812462 85.21241914871936,78.24356296406287 83.2420451052915,82.06555539327904" stroke="currentColor" fill="currentColor" />
<polygon points="63.76722121027272,84.79536560098661 72.59279310784501,83.03205034817951 71.73633099741353,90.73982242421863 67.51966886857343,91.58229526722646" stroke="currentColor" fill="currentColor" />
<polygon points="53.24306321548609,78.05827365609566 60.1243326673541,83.85897453881562 53.56415840708632,87.99508278180117 50.276440780082716,85.22363680450164" stroke="currentColor" fill="currentColor" />
<polygon points="51.94862861538407,65.62964748747973 51.70385937197527,74.62631842830451 44.379917983020505,72.07618897003609 44.49686328820471,67.7777795205309" stroke="currentColor" fill="currentColor" />
<polygon points="60.85865306549732,56.86849609787744 53.67216135948117,62.28646037972363 51.09953008890019,54.970392715438265 54.53307612621901,52.381809780778426" stroke="currentColor" fill="currentColor" />
<polygon points="73.2637064235145,58.37214517857838 64.54706708723641,56.131565190885546 68.66298975389094,49.55870749237323 72.82760632566824,50.62920681982647" stroke="currentColor" fill="currentColor" />
<polygon points="79.82253049387555,69.00831630296325 76.13955073459155,60.796394475966565 83.84465362096915,59.916242652069755 85.60429950596037,63.83971641385705" stroke="currentColor" fill="currentColor" />
<polygon points="67,47 67,3 99,25.3" fill="url(#triangleGradient)" />
</svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

View file

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><link rel="stylesheet" href="/fonts/poppins.css"><title>platypush</title><script defer="defer" type="module" src="/static/js/chunk-vendors.95bedba1.js"></script><script defer="defer" type="module" src="/static/js/app.8fd4b02d.js"></script><link href="/static/css/chunk-vendors.0fcd36f0.css" rel="stylesheet"><link href="/static/css/app.7cb6eac2.css" rel="stylesheet"><script defer="defer" src="/static/js/chunk-vendors-legacy.79dede0c.js" nomodule></script><script defer="defer" src="/static/js/app-legacy.2bd8b862.js" nomodule></script></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><link rel="stylesheet" href="/fonts/poppins.css"><title>platypush</title><script defer="defer" type="module" src="/static/js/chunk-vendors.0f6060b6.js"></script><script defer="defer" type="module" src="/static/js/app.0b22e1b7.js"></script><link href="/static/css/chunk-vendors.0fcd36f0.css" rel="stylesheet"><link href="/static/css/app.36a25406.css" rel="stylesheet"><link rel="icon" type="image/svg+xml" href="/img/icons/favicon.svg"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#ffffff"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="Platypush"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#ffffff"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"><script defer="defer" src="/static/js/chunk-vendors-legacy.037e71b7.js" nomodule></script><script defer="defer" src="/static/js/app-legacy.1178b8ae.js" nomodule></script></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

View file

@ -0,0 +1 @@
{"name":"Platypush","short_name":"Platypush","theme_color":"#ffffff","icons":[{"src":"./img/icons/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"./img/icons/android-chrome-512x512.png","sizes":"512x512","type":"image/png"},{"src":"./img/icons/android-chrome-maskable-192x192.png","sizes":"192x192","type":"image/png","purpose":"maskable"},{"src":"./img/icons/android-chrome-maskable-512x512.png","sizes":"512x512","type":"image/png","purpose":"maskable"}],"start_url":".","display":"standalone","background_color":"#000000"}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

View file

@ -13,6 +13,7 @@
"core-js": "^3.23.4", "core-js": "^3.23.4",
"lato-font": "^3.0.0", "lato-font": "^3.0.0",
"mitt": "^2.1.0", "mitt": "^2.1.0",
"register-service-worker": "^1.7.2",
"sass": "^1.53.0", "sass": "^1.53.0",
"sass-loader": "^10.3.1", "sass-loader": "^10.3.1",
"vue": "^3.2.13", "vue": "^3.2.13",
@ -25,6 +26,7 @@
"@babel/eslint-parser": "^7.12.16", "@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-pwa": "~5.0.0",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3" "eslint-plugin-vue": "^8.0.3"

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

View file

@ -0,0 +1 @@
android-chrome-192x192.png

View file

@ -0,0 +1 @@
android-chrome-512x512.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View file

@ -0,0 +1 @@
apple-touch-icon-180x180.png

View file

@ -0,0 +1,39 @@
<svg version="1.1"
width="16" height="16"
viewBox="0 0 100 100"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="triangleGradient">
<stop offset="0%" stop-color="#8acb45" />
<stop offset="50%" stop-color="#6bbb4c" />
<stop offset="100%" stop-color="#5cb450" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="none" />
<circle cx="32.9" cy="34.5" r="18.652957411320997" stroke-width="12.4" stroke="currentColor" fill="none" />
<polygon points="55.047460351019936,39.0 55.047460351019936,30.0 65.13584176553678,32.35 65.13584176553678,36.65" stroke="currentColor" fill="currentColor" />
<polygon points="49.830263293291885,49.47084449253994 54.330263293291885,41.67661585847999 61.89205788133026,48.755966264631844 59.742057881330254,52.479875500904924" stroke="currentColor" fill="currentColor" />
<polygon points="40.07661585848,55.93026329329189 47.870844492539945,51.43026329329188 50.87987550090493,61.342057881330255 47.15596626463184,63.492057881330254" stroke="currentColor" fill="currentColor" />
<polygon points="28.4,56.64746035101994 37.4,56.64746035101993 35.050000000000004,66.73584176553678 30.75,66.73584176553678" stroke="currentColor" fill="currentColor" />
<polygon points="17.92915550746006,51.43026329329189 25.72338414152001,55.93026329329189 18.644033735368154,63.492057881330254 14.920124499095078,61.34205788133026" stroke="currentColor" fill="currentColor" />
<polygon points="11.469736706708115,41.67661585847999 15.969736706708115,49.47084449253994 6.0579421186697395,52.479875500904924 3.9079421186697445,48.75596626463185" stroke="currentColor" fill="currentColor" />
<polygon points="10.752539648980061,30.000000000000004 10.752539648980065,39.0 0.6641582344632226,36.65 0.6641582344632226,32.35000000000001" stroke="currentColor" fill="currentColor" />
<polygon points="15.969736706708108,19.52915550746006 11.469736706708112,27.323384141520012 3.907942118669741,20.24403373536816 6.057942118669736,16.520124499095083" stroke="currentColor" fill="currentColor" />
<polygon points="25.723384141519993,13.06973670670812 17.92915550746005,17.569736706708124 14.92012449909506,7.657942118669752 18.644033735368136,5.507942118669753" stroke="currentColor" fill="currentColor" />
<polygon points="37.39999999999999,12.352539648980063 28.399999999999995,12.352539648980066 30.749999999999996,2.264158234463224 35.04999999999999,2.264158234463224" stroke="currentColor" fill="currentColor" />
<polygon points="47.870844492539945,17.569736706708117 40.07661585848,13.069736706708117 47.15596626463185,5.507942118669746 50.87987550090493,7.6579421186697445" stroke="currentColor" fill="currentColor" />
<polygon points="54.33026329329188,27.323384141519995 49.83026329329188,19.52915550746005 59.74205788133025,16.52012449909506 61.892057881330246,20.244033735368134" stroke="currentColor" fill="currentColor" />
<circle cx="65.5" cy="70.5" r="11.69436596743778" stroke-width="8.5" stroke="currentColor" fill="none" />
<polygon points="75.59619697596976,80.76775567601894 79.72023567151646,72.76823663812462 85.21241914871936,78.24356296406287 83.2420451052915,82.06555539327904" stroke="currentColor" fill="currentColor" />
<polygon points="63.76722121027272,84.79536560098661 72.59279310784501,83.03205034817951 71.73633099741353,90.73982242421863 67.51966886857343,91.58229526722646" stroke="currentColor" fill="currentColor" />
<polygon points="53.24306321548609,78.05827365609566 60.1243326673541,83.85897453881562 53.56415840708632,87.99508278180117 50.276440780082716,85.22363680450164" stroke="currentColor" fill="currentColor" />
<polygon points="51.94862861538407,65.62964748747973 51.70385937197527,74.62631842830451 44.379917983020505,72.07618897003609 44.49686328820471,67.7777795205309" stroke="currentColor" fill="currentColor" />
<polygon points="60.85865306549732,56.86849609787744 53.67216135948117,62.28646037972363 51.09953008890019,54.970392715438265 54.53307612621901,52.381809780778426" stroke="currentColor" fill="currentColor" />
<polygon points="73.2637064235145,58.37214517857838 64.54706708723641,56.131565190885546 68.66298975389094,49.55870749237323 72.82760632566824,50.62920681982647" stroke="currentColor" fill="currentColor" />
<polygon points="79.82253049387555,69.00831630296325 76.13955073459155,60.796394475966565 83.84465362096915,59.916242652069755 85.60429950596037,63.83971641385705" stroke="currentColor" fill="currentColor" />
<polygon points="67,47 67,3 99,25.3" fill="url(#triangleGradient)" />
</svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -0,0 +1,39 @@
<svg version="1.1"
width="256" height="256"
viewBox="0 0 100 100"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="triangleGradient">
<stop offset="0%" stop-color="#8acb45" />
<stop offset="50%" stop-color="#6bbb4c" />
<stop offset="100%" stop-color="#5cb450" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="none" />
<circle cx="32.9" cy="34.5" r="18.652957411320997" stroke-width="12.4" stroke="currentColor" fill="none" />
<polygon points="55.047460351019936,39.0 55.047460351019936,30.0 65.13584176553678,32.35 65.13584176553678,36.65" stroke="currentColor" fill="currentColor" />
<polygon points="49.830263293291885,49.47084449253994 54.330263293291885,41.67661585847999 61.89205788133026,48.755966264631844 59.742057881330254,52.479875500904924" stroke="currentColor" fill="currentColor" />
<polygon points="40.07661585848,55.93026329329189 47.870844492539945,51.43026329329188 50.87987550090493,61.342057881330255 47.15596626463184,63.492057881330254" stroke="currentColor" fill="currentColor" />
<polygon points="28.4,56.64746035101994 37.4,56.64746035101993 35.050000000000004,66.73584176553678 30.75,66.73584176553678" stroke="currentColor" fill="currentColor" />
<polygon points="17.92915550746006,51.43026329329189 25.72338414152001,55.93026329329189 18.644033735368154,63.492057881330254 14.920124499095078,61.34205788133026" stroke="currentColor" fill="currentColor" />
<polygon points="11.469736706708115,41.67661585847999 15.969736706708115,49.47084449253994 6.0579421186697395,52.479875500904924 3.9079421186697445,48.75596626463185" stroke="currentColor" fill="currentColor" />
<polygon points="10.752539648980061,30.000000000000004 10.752539648980065,39.0 0.6641582344632226,36.65 0.6641582344632226,32.35000000000001" stroke="currentColor" fill="currentColor" />
<polygon points="15.969736706708108,19.52915550746006 11.469736706708112,27.323384141520012 3.907942118669741,20.24403373536816 6.057942118669736,16.520124499095083" stroke="currentColor" fill="currentColor" />
<polygon points="25.723384141519993,13.06973670670812 17.92915550746005,17.569736706708124 14.92012449909506,7.657942118669752 18.644033735368136,5.507942118669753" stroke="currentColor" fill="currentColor" />
<polygon points="37.39999999999999,12.352539648980063 28.399999999999995,12.352539648980066 30.749999999999996,2.264158234463224 35.04999999999999,2.264158234463224" stroke="currentColor" fill="currentColor" />
<polygon points="47.870844492539945,17.569736706708117 40.07661585848,13.069736706708117 47.15596626463185,5.507942118669746 50.87987550090493,7.6579421186697445" stroke="currentColor" fill="currentColor" />
<polygon points="54.33026329329188,27.323384141519995 49.83026329329188,19.52915550746005 59.74205788133025,16.52012449909506 61.892057881330246,20.244033735368134" stroke="currentColor" fill="currentColor" />
<circle cx="65.5" cy="70.5" r="11.69436596743778" stroke-width="8.5" stroke="currentColor" fill="none" />
<polygon points="75.59619697596976,80.76775567601894 79.72023567151646,72.76823663812462 85.21241914871936,78.24356296406287 83.2420451052915,82.06555539327904" stroke="currentColor" fill="currentColor" />
<polygon points="63.76722121027272,84.79536560098661 72.59279310784501,83.03205034817951 71.73633099741353,90.73982242421863 67.51966886857343,91.58229526722646" stroke="currentColor" fill="currentColor" />
<polygon points="53.24306321548609,78.05827365609566 60.1243326673541,83.85897453881562 53.56415840708632,87.99508278180117 50.276440780082716,85.22363680450164" stroke="currentColor" fill="currentColor" />
<polygon points="51.94862861538407,65.62964748747973 51.70385937197527,74.62631842830451 44.379917983020505,72.07618897003609 44.49686328820471,67.7777795205309" stroke="currentColor" fill="currentColor" />
<polygon points="60.85865306549732,56.86849609787744 53.67216135948117,62.28646037972363 51.09953008890019,54.970392715438265 54.53307612621901,52.381809780778426" stroke="currentColor" fill="currentColor" />
<polygon points="73.2637064235145,58.37214517857838 64.54706708723641,56.131565190885546 68.66298975389094,49.55870749237323 72.82760632566824,50.62920681982647" stroke="currentColor" fill="currentColor" />
<polygon points="79.82253049387555,69.00831630296325 76.13955073459155,60.796394475966565 83.84465362096915,59.916242652069755 85.60429950596037,63.83971641385705" stroke="currentColor" fill="currentColor" />
<polygon points="67,47 67,3 99,25.3" fill="url(#triangleGradient)" />
</svg>

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

View file

@ -0,0 +1 @@
favicon-16x16.png

View file

@ -68,6 +68,14 @@ export default {
this.initConfig() this.initConfig()
}, },
beforeMount() {
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault()
if (confirm('Would you like to install the application for more features?'))
e.prompt()
})
},
mounted() { mounted() {
bus.onNotification(this.onNotification) bus.onNotification(this.onNotification)
}, },

View file

@ -1,6 +1,7 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from '@/App.vue' import App from '@/App.vue'
import router from '@/router' import router from '@/router'
import './registerServiceWorker'
const app = createApp(App) const app = createApp(App)
app.config.globalProperties._config = window.config app.config.globalProperties._config = window.config

View file

@ -0,0 +1,32 @@
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB'
)
},
registered () {
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated () {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}

View file

@ -2,7 +2,9 @@
<div class="login-container"> <div class="login-container">
<form class="login" method="POST"> <form class="login" method="POST">
<div class="header"> <div class="header">
<span class="logo" /> <span class="logo">
<img src="/logo.svg" alt="logo" />
</span>
<span class="text">Platypush</span> <span class="text">Platypush</span>
</div> </div>
@ -87,7 +89,6 @@ body {
width: 3em; width: 3em;
height: 3em; height: 3em;
display: inline-flex; display: inline-flex;
background-image: url('@/assets/img/logo.png');
background-size: cover; background-size: cover;
} }

View file

@ -27,6 +27,11 @@ module.exports = {
} }
}, },
pwa: {
name: 'Platypush',
themeColor: '#ffffff',
},
devServer: { devServer: {
proxy: { proxy: {
'^/ws/events': wsProxy, '^/ws/events': wsProxy,
@ -35,6 +40,7 @@ module.exports = {
'^/auth': httpProxy, '^/auth': httpProxy,
'^/camera/': httpProxy, '^/camera/': httpProxy,
'^/sound/': httpProxy, '^/sound/': httpProxy,
'^/logo.svg': httpProxy,
} }
} }
}; };