Merge pull request #482 from rlaig/contribute/pwa

feat: progressive web app capability
MrAntares · Oct 4, 2024 · 46a95e5 · 46a95e5
2 parents 43d8534 + 40845dc
commit 46a95e5
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 0 deletions.
diff --git a/demo.html b/demo.html
@@ -2,6 +2,7 @@
 <html>
 	<head>
 		<title>roBrowserLegacy Demo</title>
+		<link rel="manifest" href="pwa/robrowser.webmanifest">
 		<meta name="mobile-web-app-capable" content="yes" />
 		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 		<meta name="theme-color" content="#ff8cb5">

diff --git a/pwa/README.md b/pwa/README.md
@@ -0,0 +1,53 @@
+# Progressive Web App
+
+roBrowser can be setup as a [progressive web app](https://web.dev/articles/what-are-pwas).
+
+## Setup Application Files
+
+1. Build roBrowser compiled version `npm run build:all:minify`, wait to complete.
+
+  * must have installed deps first (`npm install`) before running build script.
+
+2. Copy generated files from `dist/Web/` folder to `pwa/application` folder
+
+  * note: only files `Online.js`, `ThreadEventHandler.js`, `index.html` and folder `src` will be used
+
+## Configure Client
+
+1. Open and modify `index.html` to configure your client, can refer to http://www.robrowser.com/getting-started#API
+
+2. Insert this code on your `index.html` anywhere inside the `<head>` tag
+```
+<link rel="manifest" href="robrowser.webmanifest">
+```
+
+example:
+```
+...
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+        <link rel="manifest" href="robrowser.webmanifest">
+...
+```
+
+## Configure PWA App
+
+Open and modify `robrowser.webmanifest` and edit according to your preference:
+
+* `name` : The full name of your web app.
+
+* `short_name`: Short name to be shown on the home screen.
+
+* `description`: A sentence or two explaining what your app does.
+
+* `icons`: Information about the app icons — source URLs, sizes, and types. Be sure to include at least a few, so that one that fits best will be chosen for the user's device.
+
+* `start_url`: The index document to launch when starting the app.
+
+* `display`: How the app is displayed; can be `fullscreen`, `standalone`, `minimal-ui`, or `browser`.
+
+* `theme_color`: A primary color for the UI, used by operating system.
+
+* `background_color`: A color used as the app's default background, used during install and on the splash screen.
diff --git a/pwa/robrowser.webmanifest b/pwa/robrowser.webmanifest
@@ -0,0 +1,23 @@
+{
+  "name": "roBrowser Progressive Web App",
+  "short_name": "roBrowser",
+  "description": "Progressive Web App for roBrowser.",
+  "icons": [
+      {
+          "src": "/application/icon_16.png",
+          "sizes": "16x16",
+          "type": "image/png",
+          "purpose": "any"
+      },
+      {
+          "src": "/application/icon_128.png",
+          "sizes": "128x128",
+          "type": "image/png",
+          "purpose": "any"
+      }
+  ],
+  "start_url": "/demo.html?fullscreen=true",
+  "display": "fullscreen",
+  "theme_color": "#4e84e9",
+  "background_color": "#ffffff"
+}