initial pwa support

This commit is contained in:
Jonas Weinz 2022-10-16 10:23:01 +02:00
parent b3d1804a2e
commit 3dc051aba1
27 changed files with 297 additions and 14 deletions

1
MANIFEST.IN Normal file
View File

@ -0,0 +1 @@
include pyscript_bootstrap_templates/data/*.png

View File

@ -9,5 +9,5 @@ wheel_files=( dist/*whl )
cd ./examples/ cd ./examples/
for example in *; for example in *;
do pyscript_bootstrap_app update $example $example --pyscript_bootstrap_templates_wheel_url ../${wheel_files[0]} do pyscript_bootstrap_app update $example $example --pyscript-bootstrap-templates-wheel-url ../${wheel_files[0]}
done done

View File

@ -8,5 +8,7 @@
"pyscript_py_url": "https://pyscript.net/alpha/pyscript.py", "pyscript_py_url": "https://pyscript.net/alpha/pyscript.py",
"bootstrap_css_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css", "bootstrap_css_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
"bootstrap_js_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js", "bootstrap_js_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js",
"pyscript_bootstrap_templates_wheel_url": "../dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl" "pyscript_bootstrap_templates_wheel_url": "../dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
"pwa_bg_color": "#000000",
"pwa_theme_color": "#ffffff"
} }

View File

@ -5,6 +5,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="./resources/pyscript.css" /> <link rel="stylesheet" href="./resources/pyscript.css" />
<script defer src="./resources/pyscript.js"></script> <script defer src="./resources/pyscript.js"></script>
@ -24,6 +26,7 @@
<py-script src="./main.py"></py-script> <py-script src="./main.py"></py-script>
<script src="./resources/bootstrap.js"></script> <script src="./resources/bootstrap.js"></script>
<script src="./resources/pwa.js"></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1 @@
{"name": "01_hello_world", "short_name": "01_hello_world", "start_url": "./index.html", "scope": ".", "display": "standalone", "background_color": "#000000", "theme_color": "#ffffff", "icons": [{"src": "resources/icon-512x512.png", "type": "image/png", "sizes": "512x512"}]}

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -0,0 +1,10 @@
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker
.register("./serviceWorker.js")
.then(res => console.log("service worker registered", res))
.catch(err => console.log("service worker not registered", err))
})
}

View File

@ -0,0 +1,32 @@
const pwa_version = "202210160801"
const assets = ["/index.html",
"/main.py",
"/resources/bootstrap.css",
"/resources/bootstrap.js",
"/resources/pyscript.css",
"/resources/pyscript.js",
"/resources/pyscript.py",
"/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
"/resources/pwa.js",
"/resourced/site.js",
]
self.addEventListener("install", installEvent => {
installEvent.waitUntil(
caches.open(pwa_version).then(cache => {
cache.addAll(assets).then(r => {
console.log("Cache assets downloaded");
}).catch(err => console.log("Error caching item", err))
console.log(`Cache ${pwa_version} opened.`);
}).catch(err => console.log("Error opening cache", err))
)
})
self.addEventListener("fetch", fetchEvent => {
fetchEvent.respondWith(
caches.match(fetchEvent.request).then(res => {
return res || fetch(fetchEvent.request)
}).catch(err => console.log("Cache fetch error: ", err))
)
})

View File

@ -0,0 +1,2 @@

View File

@ -0,0 +1,32 @@
const pwa_version = "202210160804"
const assets = ["./index.html",
"./main.py",
"./resources/bootstrap.css",
"./resources/bootstrap.js",
"./resources/pyscript.css",
"./resources/pyscript.js",
"./resources/pyscript.py",
"./resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
"./resources/pwa.js",
"./site.js",
]
self.addEventListener("install", installEvent => {
installEvent.waitUntil(
caches.open(pwa_version).then(cache => {
cache.addAll(assets).then(r => {
console.log("Cache assets downloaded");
}).catch(err => console.log("Error caching item", err))
console.log(`Cache ${pwa_version} opened.`);
}).catch(err => console.log("Error opening cache", err))
)
})
self.addEventListener("fetch", fetchEvent => {
fetchEvent.respondWith(
caches.match(fetchEvent.request).then(res => {
return res || fetch(fetchEvent.request)
}).catch(err => console.log("Cache fetch error: ", err))
)
})

View File

@ -0,0 +1,2 @@

View File

@ -11,5 +11,7 @@
"pyscript_py_url": "https://pyscript.net/alpha/pyscript.py", "pyscript_py_url": "https://pyscript.net/alpha/pyscript.py",
"bootstrap_css_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css", "bootstrap_css_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
"bootstrap_js_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js", "bootstrap_js_url": "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js",
"pyscript_bootstrap_templates_wheel_url": "../dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl" "pyscript_bootstrap_templates_wheel_url": "../dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
"pwa_bg_color": "#000000",
"pwa_theme_color": "#ffffff"
} }

View File

@ -5,6 +5,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="./resources/pyscript.css" /> <link rel="stylesheet" href="./resources/pyscript.css" />
<script defer src="./resources/pyscript.js"></script> <script defer src="./resources/pyscript.js"></script>
@ -25,6 +27,7 @@
<py-script src="./main.py"></py-script> <py-script src="./main.py"></py-script>
<script src="./resources/bootstrap.js"></script> <script src="./resources/bootstrap.js"></script>
<script src="./resources/pwa.js"></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1 @@
{"name": "02_image_filter", "short_name": "02_image_filter", "start_url": "./index.html", "scope": ".", "display": "standalone", "background_color": "#000000", "theme_color": "#ffffff", "icons": [{"src": "resources/icon-512x512.png", "type": "image/png", "sizes": "512x512"}]}

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -0,0 +1,10 @@
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker
.register("./serviceWorker.js")
.then(res => console.log("service worker registered", res))
.catch(err => console.log("service worker not registered", err))
})
}

View File

@ -0,0 +1,32 @@
const pwa_version = "202210160801"
const assets = ["/index.html",
"/main.py",
"/resources/bootstrap.css",
"/resources/bootstrap.js",
"/resources/pyscript.css",
"/resources/pyscript.js",
"/resources/pyscript.py",
"/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
"/resources/pwa.js",
"/resourced/site.js",
]
self.addEventListener("install", installEvent => {
installEvent.waitUntil(
caches.open(pwa_version).then(cache => {
cache.addAll(assets).then(r => {
console.log("Cache assets downloaded");
}).catch(err => console.log("Error caching item", err))
console.log(`Cache ${pwa_version} opened.`);
}).catch(err => console.log("Error opening cache", err))
)
})
self.addEventListener("fetch", fetchEvent => {
fetchEvent.respondWith(
caches.match(fetchEvent.request).then(res => {
return res || fetch(fetchEvent.request)
}).catch(err => console.log("Cache fetch error: ", err))
)
})

View File

@ -0,0 +1,2 @@

View File

@ -0,0 +1,32 @@
const pwa_version = "202210160804"
const assets = ["./index.html",
"./main.py",
"./resources/bootstrap.css",
"./resources/bootstrap.js",
"./resources/pyscript.css",
"./resources/pyscript.js",
"./resources/pyscript.py",
"./resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
"./resources/pwa.js",
"./site.js",
]
self.addEventListener("install", installEvent => {
installEvent.waitUntil(
caches.open(pwa_version).then(cache => {
cache.addAll(assets).then(r => {
console.log("Cache assets downloaded");
}).catch(err => console.log("Error caching item", err))
console.log(`Cache ${pwa_version} opened.`);
}).catch(err => console.log("Error opening cache", err))
)
})
self.addEventListener("fetch", fetchEvent => {
fetchEvent.respondWith(
caches.match(fetchEvent.request).then(res => {
return res || fetch(fetchEvent.request)
}).catch(err => console.log("Cache fetch error: ", err))
)
})

View File

@ -0,0 +1,2 @@

View File

@ -8,7 +8,8 @@ from numpy import isin
import requests import requests
import json import json
import shutil import shutil
import datetime as dt
import pkg_resources
def download_file(url: str, path: pathlib.Path): def download_file(url: str, path: pathlib.Path):
if pathlib.Path(url).exists(): if pathlib.Path(url).exists():
@ -18,6 +19,100 @@ def download_file(url: str, path: pathlib.Path):
path.write_bytes(response.content) path.write_bytes(response.content)
def create_pwa_manifest(root_folder: pathlib.Path, **kwargs):
"""
creating the PWA's manifest file
"""
#TODO: make icon configurable
manifest_dict = {
"name": kwargs['title'],
"short_name": kwargs['title'],
"start_url": "./index.html",
"scope": ".",
"display": "standalone",
"background_color": kwargs['pwa_bg_color'],
"theme_color": kwargs['pwa_theme_color'],
"icons": [
{
"src": "resources/icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}
with open(root_folder / "manifest.json", "w") as f:
json.dump(manifest_dict, f)
# create dummy icon TODO: making this configurable
default_icon_path = pkg_resources.resource_filename('pyscript_bootstrap_templates', 'data/icon.png')
download_file(str(default_icon_path), root_folder / "resources" / "icon-512x512.png")
def create_pwa_service_worker(root_folder: pathlib.Path, **kwargs):
version = dt.datetime.utcnow().strftime("%Y%m%d%H%M")
assets = [
*[f'"./{p}",' for p in kwargs['paths']],
'"./index.html",',
'"./main.py",',
'"./resources/bootstrap.css",',
'"./resources/bootstrap.js",',
'"./resources/pyscript.css",',
'"./resources/pyscript.js",',
'"./resources/pyscript.py",',
f'"./resources/{kwargs["pyscript_bootstrap_templates_wheel_url"].split("/")[-1]}",', # FIXME: not completely os independent
'"./resources/pwa.js",',
'"./site.js",'
]
assets_str = "[" + "\n ".join(assets) + "\n]"
service_worker_js = f"""
const pwa_version = "{version}"
const assets = {assets_str}
self.addEventListener("install", installEvent => {{
installEvent.waitUntil(
caches.open(pwa_version).then(cache => {{
cache.addAll(assets).then(r => {{
console.log("Cache assets downloaded");
}}).catch(err => console.log("Error caching item", err))
console.log(`Cache ${{pwa_version}} opened.`);
}}).catch(err => console.log("Error opening cache", err))
)
}})
self.addEventListener("fetch", fetchEvent => {{
fetchEvent.respondWith(
caches.match(fetchEvent.request).then(res => {{
return res || fetch(fetchEvent.request)
}}).catch(err => console.log("Cache fetch error: ", err))
)
}})
"""
pwa_js = """
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker
.register("./serviceWorker.js")
.then(res => console.log("service worker registered", res))
.catch(err => console.log("service worker not registered", err))
})
}
"""
site_js = """
"""
# write js files:
(root_folder / "serviceWorker.js").write_text(service_worker_js, encoding="utf-8")
(root_folder / "resources" / "pwa.js").write_text(pwa_js, encoding="utf-8")
(root_folder / "site.js").write_text(site_js, encoding="utf-8")
def generate_project_files(root_folder: pathlib.Path, def generate_project_files(root_folder: pathlib.Path,
title: str, title: str,
packages: List[str], packages: List[str],
@ -27,7 +122,8 @@ def generate_project_files(root_folder: pathlib.Path,
pyscript_py_url: str = "https://pyscript.net/alpha/pyscript.py", pyscript_py_url: str = "https://pyscript.net/alpha/pyscript.py",
bootstrap_css_url: str = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css", bootstrap_css_url: str = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
bootstrap_js_url: str = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js", bootstrap_js_url: str = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js",
pyscript_bootstrap_templates_wheel_url: str = "https://the-cake-is-a-lie.net/gogs/jonas/pyscript-bootstrap-templates/raw/branch/main/dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl"): pyscript_bootstrap_templates_wheel_url: str = "https://the-cake-is-a-lie.net/gogs/jonas/pyscript-bootstrap-templates/raw/branch/main/dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl",
**_):
pyenv = f"- ./resources/{pyscript_bootstrap_templates_wheel_url.split('/')[-1]}" pyenv = f"- ./resources/{pyscript_bootstrap_templates_wheel_url.split('/')[-1]}"
for package in packages: for package in packages:
@ -47,6 +143,8 @@ def generate_project_files(root_folder: pathlib.Path,
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="./resources/pyscript.css" /> <link rel="stylesheet" href="./resources/pyscript.css" />
<script defer src="./resources/pyscript.js"></script> <script defer src="./resources/pyscript.js"></script>
@ -64,6 +162,7 @@ def generate_project_files(root_folder: pathlib.Path,
<py-script src="./main.py"></py-script> <py-script src="./main.py"></py-script>
<script src="./resources/bootstrap.js"></script> <script src="./resources/bootstrap.js"></script>
<script src="./resources/pwa.js"></script>
</body> </body>
</html> </html>
""" """
@ -107,6 +206,8 @@ btn.onclick = lambda _: bHTML.AlertSuccess(
# only create if not existing: # only create if not existing:
if not main_py.exists(): if not main_py.exists():
main_py.write_text(py, encoding="utf-8") main_py.write_text(py, encoding="utf-8")
def create_project(**kwargs): def create_project(**kwargs):
@ -118,13 +219,16 @@ def create_project(**kwargs):
root_folder.mkdir(parents=True, exist_ok=True) root_folder.mkdir(parents=True, exist_ok=True)
# create initial config.json # create initial config.json
generate_project_files(**kwargs)
create_pwa_manifest(**kwargs)
create_pwa_service_worker(**kwargs)
kwargs['root_folder'] = str(root_folder) kwargs['root_folder'] = str(root_folder)
with open(root_folder / "config.json", 'w') as f: with open(root_folder / "config.json", 'w') as f:
json.dump(kwargs, f, indent=4) json.dump(kwargs, f, indent=4)
generate_project_files(**kwargs)
def update_project(**kwargs): def update_project(**kwargs):
@ -147,6 +251,8 @@ def update_project(**kwargs):
config[arg] = val config[arg] = val
generate_project_files(**config) generate_project_files(**config)
create_pwa_manifest(**kwargs)
create_pwa_service_worker(**kwargs)
config['root_folder'] = str(root_folder) config['root_folder'] = str(root_folder)
@ -168,18 +274,22 @@ def main():
"--packages", type=str, nargs="+", help="the packages to include in the new project") "--packages", type=str, nargs="+", help="the packages to include in the new project")
argument_parser.add_argument("--paths", type=str, nargs="+", argument_parser.add_argument("--paths", type=str, nargs="+",
help="additional local python files to include in the new project") help="additional local python files to include in the new project")
argument_parser.add_argument("--pyscript_css_url", type=str, argument_parser.add_argument("--pyscript-css-url", type=str,
help="the url of the pyscript css file", default="https://pyscript.net/alpha/pyscript.css") help="the url of the pyscript css file", default="https://pyscript.net/alpha/pyscript.css")
argument_parser.add_argument("--pyscript_js_url", type=str, argument_parser.add_argument("--pyscript-js-url", type=str,
help="the url of the pyscript js file", default="https://pyscript.net/alpha/pyscript.min.js") help="the url of the pyscript js file", default="https://pyscript.net/alpha/pyscript.min.js")
argument_parser.add_argument("--pyscript_py_url", type=str, argument_parser.add_argument("--pyscript-py-url", type=str,
help="the url of the pyscript py file", default="https://pyscript.net/alpha/pyscript.py") help="the url of the pyscript py file", default="https://pyscript.net/alpha/pyscript.py")
argument_parser.add_argument("--bootstrap_css_url", type=str, argument_parser.add_argument("--bootstrap-css-url", type=str,
help="the url of the bootstrap css file", default="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css") help="the url of the bootstrap css file", default="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css")
argument_parser.add_argument("--bootstrap_js_url", type=str, argument_parser.add_argument("--bootstrap-js-url", type=str,
help="the url of the bootstrap js file", default="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js") help="the url of the bootstrap js file", default="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js")
argument_parser.add_argument("--pyscript_bootstrap_templates_wheel_url", type=str, argument_parser.add_argument("--pyscript-bootstrap-templates-wheel-url", type=str,
help="the url of the pyscript bootstrap templates wheel file", default="https://the-cake-is-a-lie.net/gogs/jonas/pyscript-bootstrap-templates/raw/branch/main/dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl") help="the url of the pyscript bootstrap templates wheel file", default="https://the-cake-is-a-lie.net/gogs/jonas/pyscript-bootstrap-templates/raw/branch/main/dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl")
argument_parser.add_argument("--pwa-bg-color", type=str, help="background color for pwa configuration", default="#000000")
argument_parser.add_argument("--pwa-theme-color", type=str, help="theme color for pwa configuration", default="#ffffff")
args = argument_parser.parse_args() args = argument_parser.parse_args()
@ -193,10 +303,14 @@ def main():
'pyscript_py_url': args.pyscript_py_url, 'pyscript_py_url': args.pyscript_py_url,
'bootstrap_css_url': args.bootstrap_css_url, 'bootstrap_css_url': args.bootstrap_css_url,
'bootstrap_js_url': args.bootstrap_js_url, 'bootstrap_js_url': args.bootstrap_js_url,
'pyscript_bootstrap_templates_wheel_url': args.pyscript_bootstrap_templates_wheel_url 'pyscript_bootstrap_templates_wheel_url': args.pyscript_bootstrap_templates_wheel_url,
'pwa_bg_color': args.pwa_bg_color,
'pwa_theme_color': args.pwa_theme_color
} }
if args.command == "create": if args.command == "create":
create_project(**config) create_project(**config)
elif args.command == "update": elif args.command == "update":

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB