How to periodically synchronize data in the background

                                                                                

                                                                                        HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="" /> <link rel="manifest" href="./manifest.json" /> <title>How to periodically synchronize data in the background</title> <link rel="stylesheet" href="/style.css" /> <script src="/script.js" defer></script> </head> <body> <h1>How to periodically synchronize data in the background</h1> <p class="available">Periodic background sync can be used. Install the app first.</p> <p class="not-available">Periodic background sync cannot be used.</p> <h2>Last updated</h2> <p class="last-updated">Never</p> <h2>Registered tags</h2> <ul> <li>None yet.</li> </ul> </body> </html>

                                JASON

{ "name": "How to periodically synchronize data in the background", "short_name": "Periodic Background Sync", "start_url": "./", "id": "./", "icons": [ { "src": "../assets/favicon.png", "type": "image/png", "sizes": "512x512" }, { "src": "../assets/favicon.svg", "type": "image/svg+xml", "sizes": "any" } ], "display": "standalone" }

                            CSS

html { box-sizing: border-box; font-family: system-ui, sans-serif; color-scheme: dark light; } *, *:before, *:after { box-sizing: inherit; } body { margin: 1rem; }