improved pwa functionality
This commit is contained in:
		
										
											Binary file not shown.
										
									
								
							| @ -3,9 +3,9 @@ | ||||
|     "title": "01_hello_world", | ||||
|     "packages": [], | ||||
|     "paths": [], | ||||
|     "pyscript_css_url": "https://pyscript.net/alpha/pyscript.css", | ||||
|     "pyscript_js_url": "https://pyscript.net/alpha/pyscript.min.js", | ||||
|     "pyscript_py_url": "https://pyscript.net/alpha/pyscript.py", | ||||
|     "pyscript_css_url": "https://pyscript.net/latest/pyscript.css", | ||||
|     "pyscript_js_url": "https://pyscript.net/latest/pyscript.js", | ||||
|     "pyscript_py_url": "https://pyscript.net/latest/pyscript.py", | ||||
|     "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", | ||||
|     "pyscript_bootstrap_templates_wheel_url": "../dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl", | ||||
|  | ||||
| @ -7,26 +7,29 @@ | ||||
|  | ||||
|         <link rel="manifest" href="manifest.json" /> | ||||
|  | ||||
|         <script src="./resources/pwa.js"></script> | ||||
|  | ||||
|         <link rel="stylesheet" href="./resources/pyscript.css" /> | ||||
|         <script defer src="./resources/pyscript.js"></script> | ||||
|  | ||||
|         <!-- Bootstrap CSS --> | ||||
|         <link href="./resources/bootstrap.css" rel="stylesheet"> | ||||
|  | ||||
|         <title>01_hello_world</title> | ||||
|  | ||||
|         <py-env> | ||||
|             - ./resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl | ||||
|             - paths: | ||||
|  | ||||
|         </py-env> | ||||
|     </head> | ||||
|     <body style="width: 100%; height: 100%"> | ||||
|         <py-config type="json"> | ||||
|             { | ||||
|     "autoclose_loader": true, | ||||
|     "packages": [ | ||||
|         "./resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl" | ||||
|     ], | ||||
|     "paths": [] | ||||
| } | ||||
|         </py-config> | ||||
|         <div id="pyscript_app" style="height: 100%; min-height: 100%"></div> | ||||
|         <py-script src="./main.py"></py-script> | ||||
|  | ||||
|         <script src="./resources/bootstrap.js"></script> | ||||
|         <script src="./resources/pwa.js"></script> | ||||
|     </body> | ||||
| </html> | ||||
|      | ||||
										
											Binary file not shown.
										
									
								
							| Before Width: | Height: | Size: 18 KiB | 
										
											
												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.
										
									
								
							| @ -1,32 +0,0 @@ | ||||
|  | ||||
| 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)) | ||||
|     ) | ||||
| }) | ||||
|      | ||||
| @ -1,2 +0,0 @@ | ||||
|  | ||||
|      | ||||
| @ -1,5 +1,5 @@ | ||||
|  | ||||
| const pwa_version = "202210160804" | ||||
| const pwa_version = "01_hello_world_202210161053" | ||||
| const assets = ["./index.html", | ||||
|     "./main.py", | ||||
|     "./resources/bootstrap.css", | ||||
| @ -22,11 +22,30 @@ self.addEventListener("install", installEvent => { | ||||
|     ) | ||||
| }) | ||||
|  | ||||
| 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)) | ||||
|     ) | ||||
| }) | ||||
| self.addEventListener('activate', e => { | ||||
| 	console.log('Service Worker: Activated'); | ||||
| }); | ||||
|   | ||||
| self.addEventListener('fetch', event => { | ||||
|     if (event.request.method != 'GET') | ||||
|         return; | ||||
| 	event.respondWith((async () => { | ||||
|         const cachedResponse = await caches.match(event.request); | ||||
|         if (cachedResponse) { | ||||
|             return cachedResponse; | ||||
|         } | ||||
|  | ||||
|         const response = await fetch(event.request); | ||||
|  | ||||
|         if (!response || response.status !== 200 || response.type !== 'basic') { | ||||
|             return response; | ||||
|         } | ||||
|  | ||||
|         const responseToCache = response.clone(); | ||||
|         const cache = await caches.open(pwa_version) | ||||
|         await cache.put(event.request, response.clone()); | ||||
|  | ||||
|         return response; | ||||
|     })()); | ||||
| }); | ||||
|      | ||||
| @ -6,9 +6,9 @@ | ||||
|         "scikit-image" | ||||
|     ], | ||||
|     "paths": null, | ||||
|     "pyscript_css_url": "https://pyscript.net/alpha/pyscript.css", | ||||
|     "pyscript_js_url": "https://pyscript.net/alpha/pyscript.min.js", | ||||
|     "pyscript_py_url": "https://pyscript.net/alpha/pyscript.py", | ||||
|     "pyscript_css_url": "https://pyscript.net/latest/pyscript.css", | ||||
|     "pyscript_js_url": "https://pyscript.net/latest/pyscript.js", | ||||
|     "pyscript_py_url": "https://pyscript.net/latest/pyscript.py", | ||||
|     "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", | ||||
|     "pyscript_bootstrap_templates_wheel_url": "../dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl", | ||||
|  | ||||
| @ -7,27 +7,31 @@ | ||||
|  | ||||
|         <link rel="manifest" href="manifest.json" /> | ||||
|  | ||||
|         <script src="./resources/pwa.js"></script> | ||||
|  | ||||
|         <link rel="stylesheet" href="./resources/pyscript.css" /> | ||||
|         <script defer src="./resources/pyscript.js"></script> | ||||
|  | ||||
|         <!-- Bootstrap CSS --> | ||||
|         <link href="./resources/bootstrap.css" rel="stylesheet"> | ||||
|  | ||||
|         <title>02_image_filter</title> | ||||
|  | ||||
|         <py-env> | ||||
|             - ./resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl | ||||
|             - numpy | ||||
|             - scikit-image | ||||
|  | ||||
|         </py-env> | ||||
|     </head> | ||||
|     <body style="width: 100%; height: 100%"> | ||||
|         <py-config type="json"> | ||||
|             { | ||||
|     "autoclose_loader": true, | ||||
|     "packages": [ | ||||
|         "./resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl", | ||||
|         "numpy", | ||||
|         "scikit-image" | ||||
|     ], | ||||
|     "paths": [] | ||||
| } | ||||
|         </py-config> | ||||
|         <div id="pyscript_app" style="height: 100%; min-height: 100%"></div> | ||||
|         <py-script src="./main.py"></py-script> | ||||
|  | ||||
|         <script src="./resources/bootstrap.js"></script> | ||||
|         <script src="./resources/pwa.js"></script> | ||||
|     </body> | ||||
| </html> | ||||
|      | ||||
										
											Binary file not shown.
										
									
								
							| Before Width: | Height: | Size: 18 KiB | 
										
											
												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.
										
									
								
							| @ -1,32 +0,0 @@ | ||||
|  | ||||
| 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)) | ||||
|     ) | ||||
| }) | ||||
|      | ||||
| @ -1,2 +0,0 @@ | ||||
|  | ||||
|      | ||||
| @ -1,5 +1,5 @@ | ||||
|  | ||||
| const pwa_version = "202210160804" | ||||
| const pwa_version = "02_image_filter_202210161053" | ||||
| const assets = ["./index.html", | ||||
|     "./main.py", | ||||
|     "./resources/bootstrap.css", | ||||
| @ -22,11 +22,30 @@ self.addEventListener("install", installEvent => { | ||||
|     ) | ||||
| }) | ||||
|  | ||||
| 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)) | ||||
|     ) | ||||
| }) | ||||
| self.addEventListener('activate', e => { | ||||
| 	console.log('Service Worker: Activated'); | ||||
| }); | ||||
|   | ||||
| self.addEventListener('fetch', event => { | ||||
|     if (event.request.method != 'GET') | ||||
|         return; | ||||
| 	event.respondWith((async () => { | ||||
|         const cachedResponse = await caches.match(event.request); | ||||
|         if (cachedResponse) { | ||||
|             return cachedResponse; | ||||
|         } | ||||
|  | ||||
|         const response = await fetch(event.request); | ||||
|  | ||||
|         if (!response || response.status !== 200 || response.type !== 'basic') { | ||||
|             return response; | ||||
|         } | ||||
|  | ||||
|         const responseToCache = response.clone(); | ||||
|         const cache = await caches.open(pwa_version) | ||||
|         await cache.put(event.request, response.clone()); | ||||
|  | ||||
|         return response; | ||||
|     })()); | ||||
| }); | ||||
|      | ||||
| @ -2,7 +2,7 @@ | ||||
| from typing import Callable, Iterable, Union | ||||
| import uuid | ||||
| from js import document, CanvasRenderingContext2D  # type: ignore | ||||
| from pyodide import create_proxy  # type: ignore | ||||
| from pyodide.ffi import create_proxy  # type: ignore | ||||
| from parse import * | ||||
| import base64 | ||||
| from PIL import Image as PILImage | ||||
|  | ||||
| @ -3,7 +3,7 @@ import uuid | ||||
|  | ||||
| from .bootstrap_HTML import * | ||||
| from js import document, FileReader, btoa, Uint8Array   # type: ignore | ||||
| from pyodide import create_proxy  # type: ignore | ||||
| from pyodide.ffi import create_proxy  # type: ignore | ||||
| import io | ||||
| import base64 | ||||
|  | ||||
|  | ||||
| @ -52,7 +52,7 @@ def create_pwa_manifest(root_folder: pathlib.Path, **kwargs): | ||||
|     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") | ||||
|     version = f"{kwargs['title']}_{dt.datetime.utcnow().strftime('%Y%m%d%H%M')}" | ||||
|     assets = [ | ||||
|         *[f'"./{p}",' for p in kwargs['paths']], | ||||
|         '"./index.html",', | ||||
| @ -83,13 +83,32 @@ self.addEventListener("install", installEvent => {{ | ||||
|     ) | ||||
| }}) | ||||
|  | ||||
| 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)) | ||||
|     ) | ||||
| }}) | ||||
| self.addEventListener('activate', e => {{ | ||||
| 	console.log('Service Worker: Activated'); | ||||
| }}); | ||||
|   | ||||
| self.addEventListener('fetch', event => {{ | ||||
|     if (event.request.method != 'GET') | ||||
|         return; | ||||
| 	event.respondWith((async () => {{ | ||||
|         const cachedResponse = await caches.match(event.request); | ||||
|         if (cachedResponse) {{ | ||||
|             return cachedResponse; | ||||
|         }} | ||||
|  | ||||
|         const response = await fetch(event.request); | ||||
|  | ||||
|         if (!response || response.status !== 200 || response.type !== 'basic') {{ | ||||
|             return response; | ||||
|         }} | ||||
|  | ||||
|         const responseToCache = response.clone(); | ||||
|         const cache = await caches.open(pwa_version) | ||||
|         await cache.put(event.request, response.clone()); | ||||
|  | ||||
|         return response; | ||||
|     }})()); | ||||
| }}); | ||||
|     """ | ||||
|  | ||||
|     pwa_js = """ | ||||
| @ -117,24 +136,27 @@ def generate_project_files(root_folder: pathlib.Path, | ||||
|                    title: str, | ||||
|                    packages: List[str], | ||||
|                    paths: List[str] = None, | ||||
|                    pyscript_css_url: str = "https://pyscript.net/alpha/pyscript.css", | ||||
|                    pyscript_js_url: str = "https://pyscript.net/alpha/pyscript.min.js", | ||||
|                    pyscript_py_url: str = "https://pyscript.net/alpha/pyscript.py", | ||||
|                    pyscript_css_url: str = "https://pyscript.net/latest/pyscript.css", | ||||
|                    pyscript_js_url: str = "https://pyscript.net/latest/pyscript.min.js", | ||||
|                    pyscript_py_url: str = "https://pyscript.net/latest/pyscript.py", | ||||
|                    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", | ||||
|                    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]}" | ||||
|     for package in packages: | ||||
|         pyenv += f"\n            - {package}" | ||||
|     if paths is None: | ||||
|         paths = [] | ||||
|  | ||||
|     if paths is not None: | ||||
|         pyenv += "\n            - paths:" | ||||
|         for path in paths: | ||||
|             pyenv += f"\n                - {path}" | ||||
|  | ||||
|     pyenv += "\n" | ||||
|     pyconfig = { | ||||
|         "autoclose_loader": True, | ||||
|         "packages": [ | ||||
|             f"./resources/{pyscript_bootstrap_templates_wheel_url.split('/')[-1]}", | ||||
|             *packages | ||||
|         ], | ||||
|         "paths": [ | ||||
|             *paths | ||||
|         ] | ||||
|     } | ||||
|  | ||||
|     html = f""" | ||||
| <!DOCTYPE html> | ||||
| @ -145,24 +167,23 @@ def generate_project_files(root_folder: pathlib.Path, | ||||
|  | ||||
|         <link rel="manifest" href="manifest.json" /> | ||||
|  | ||||
|         <script src="./resources/pwa.js"></script> | ||||
|  | ||||
|         <link rel="stylesheet" href="./resources/pyscript.css" /> | ||||
|         <script defer src="./resources/pyscript.js"></script> | ||||
|  | ||||
|         <!-- Bootstrap CSS --> | ||||
|         <link href="./resources/bootstrap.css" rel="stylesheet"> | ||||
|  | ||||
|         <title>{title}</title> | ||||
|  | ||||
|         <py-env> | ||||
|             {pyenv} | ||||
|         </py-env> | ||||
|     </head> | ||||
|     <body style="width: 100%; height: 100%"> | ||||
|         <py-config type="json"> | ||||
|             {json.dumps(pyconfig, indent=4)} | ||||
|         </py-config> | ||||
|         <div id="pyscript_app" style="height: 100%; min-height: 100%"></div> | ||||
|         <py-script src="./main.py"></py-script> | ||||
|  | ||||
|         <script src="./resources/bootstrap.js"></script> | ||||
|         <script src="./resources/pwa.js"></script> | ||||
|     </body> | ||||
| </html> | ||||
|     """ | ||||
| @ -275,11 +296,11 @@ def main(): | ||||
|     argument_parser.add_argument("--paths", type=str, nargs="+", | ||||
|                                  help="additional local python files to include in the new project") | ||||
|     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/latest/pyscript.css") | ||||
|     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/latest/pyscript.js") | ||||
|     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/latest/pyscript.py") | ||||
|     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") | ||||
|     argument_parser.add_argument("--bootstrap-js-url", type=str, | ||||
|  | ||||
		Reference in New Issue
	
	Block a user