Make it a PWA (#5)

* prepare for PWA

* fixed Icons and screenshots

* remove unused files

* prepare for ver 1.1.0

* fix wrong service-worker location

* fix HTML typo

* changed start_url to .

* Local fonts and cache

* remove unused stuff

* prepare for ver 1.1.0

* ready for ver1.1.0 - PWA

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 1.1.0 (2024-01-30)
+ - Progressive Web App (PWA) version. The editor can now run completly offline and can be installed on your device from the browser address bar.
+
 # 1.0.2 (2024-01-10)
 - better documentation
 

README.md

@@ -3,4 +3,4 @@ A web-based editor to configure [Push Push](https://github.com/garubi/push-push)
 
 Use it at (https://garubi.github.io/push-push-editor/)
 
-![A screenshot of the editor](/docs/images/animated-preview.gif)
+![An animated preview of the editor](/docs/images/animated-preview.gif)

docs/css/custom.css

@@ -1,3 +1,78 @@
+/* Web fonts downloaded from https://gwfh.mranftl.com/fonts/raleway?subsets=latin */
+
+/* raleway-300 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../fonts/raleway-v29-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* raleway-300italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 300;
+  src: url('../fonts/raleway-v29-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* raleway-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/raleway-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* raleway-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/raleway-v29-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* raleway-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 400;
+  src: url('../fonts/raleway-v29-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* raleway-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../fonts/raleway-v29-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* raleway-500italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 500;
+  src: url('../fonts/raleway-v29-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* raleway-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 600;
+  src: url('../fonts/raleway-v29-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* raleway-600italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Raleway';
+  font-style: italic;
+  font-weight: 600;
+  src: url('../fonts/raleway-v29-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
 .container {
   max-width: 800px; }
 
@@ -15,4 +90,4 @@ button[disabled]{
 /* for Alpine.js */
 [x-cloak] {
   display: none !important;
-}
+}

docs/index.html

@@ -3,15 +3,21 @@
     <head>
         <meta charset="utf-8">
         <title>Push Push Editor</title>
+        <meta name="description" content="An editor for the Push Push device">
+        <meta name="author" content="Stefano Garuti - https://github.com/garubi/push-push-editor">
+        <meta name="copyright" content="Stefano Garuti - https://github.com/garubi/push-push-editor">
+
+        <link rel="manifest" href="manifest.json">
+
         <!-- http://getskeleton.com/ -->
         <!-- Mobile Specific Metas
           –––––––––––––––––––––––––––––––––––––––––––––––––– -->
           <meta name="viewport" content="width=device-width, initial-scale=1">
 
           <!-- FONT
           –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-          <link rel="preconnect" href="https://fonts.gstatic.com">
-          <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap" rel="stylesheet">
+          <!-- <link rel="preconnect" href="https://fonts.gstatic.com">
+          <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap" rel="stylesheet"> -->
           <!-- <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css"> -->
 
           <!-- CSS
@@ -22,32 +28,28 @@
 
           <!-- Favicon
           –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-          <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
-          <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-          <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
-          <link rel="shortcut icon" href="images/favicon.ico">
-          <!-- <link rel="manifest" href="images/site.webmanifest"> -->
-          <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#5bbad5">
-          <meta name="msapplication-config" content="images/browserconfig.xml">
-          <meta name="msapplication-TileColor" content="#ffc40d">
-          <meta name="theme-color" content="#ffffff">
+          <!-- <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
+          <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png"> -->
+          <link rel="icon" type="image/png" sizes="192x192" href="images/192x192.png">
 
-          <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
-          <script type="text/javascript" src="js/webmidi.iife.min.js"></script>
 
+          <script type="text/javascript" defer src="js/alpine.min.js"></script>
+          <script type="text/javascript" src="js/webmidi.iife.min.js"></script>
           <script type="text/javascript" src="js/app.js"></script>
 
+          <script>navigator.serviceWorker.register("service-worker.js")</script> 
+
     </head>
     <body>
         <div class="container text-center" x-data="appData()" x-init="appInit()">
 
             <div class="">
-                <img src="images/android-chrome-192x192.png" alt="Push Push icon" height="80px" width="80px" />
+                <img src="images/192x192.png" alt="Push Push icon" height="80px" width="80px" />
 
                 <h1>
                     Push Push Editor
                 </h1>
-                Editor version: <span x-text="$store.pp.editor_version"></span>
+
                 <div x-show="$store.pp.pp_got_config" x-transition>
                     Push Push connected: version <span x-text="$store.pp.pp_ver_major"></span>.<span x-text="$store.pp.pp_ver_minor"></span>.<span x-text="$store.pp.pp_ver_patch"></span>; model: <span x-text="$store.pp.pp_model_id"></span>; device: <span x-text="$store.pp.device"></span>. 
                     [<a href="" x-data @click="$store.pp.pp_got_config = false ">Disconnect</a>]
@@ -310,7 +312,7 @@ <h2>Communication error</h2>
             </div>
 
             <div class="row">
-                Push Push Editor. (c) 2023 Stefano Garuti - [<a href="https://github.com/garubi/push-push-editor">GitHub</a>]
+                Push Push Editor version: <span x-text="$store.pp.editor_version"></span>. (c) 2024 Stefano Garuti - [<a href="https://github.com/garubi/push-push-editor">GitHub</a>]
             </div>
         </div>
 

docs/js/app.js

@@ -1,4 +1,4 @@
-var editor_version = '1.0.2';
+var editor_version = '1.1.0';
 
 var PP_MIDI_MANUF_ID_1			=	0x37;
 var PP_MIDI_MANUF_ID_2			=	0x72;
@@ -32,25 +32,28 @@ document.addEventListener('alpine:init', () => {
         pp_loading:             false,
         pp_stored:              false,
         pp_errors:              false,
-    })
-})
+    });
+
+
+
 
+    // https://webmidijs.org/docs/getting-started/basics
+    // Enable WebMidi.js and trigger the onEnabled() function when ready.
+    WebMidi
+    .enable({sysex: true})
+    .then(onEnabled)
+    .catch(err => alert(err));
 
+
+
+})
 function appInit(){
-  }
+}
 
 function appData(){
-    return { };
+return { };
 }
 
-
-// https://webmidijs.org/docs/getting-started/basics
-// Enable WebMidi.js and trigger the onEnabled() function when ready.
-WebMidi
-.enable({sysex: true})
-.then(onEnabled)
-.catch(err => alert(err));
-
 function onEnabled() {
 
     if (WebMidi.inputs.length < 1) {
@@ -103,14 +106,14 @@ function store(){
 function parseSysEx( sysex ){
     console.log('sysex: ', sysex );
     if ( sysex.data[1] != PP_MIDI_MANUF_ID_1 || sysex.data[2] != PP_MIDI_MANUF_ID_2 || sysex.data[3] != PP_MIDI_PRODUCT_ID ) return null; // Discard all SysEx that's not for this device
-	if ( sysex.data[4] != X_REP ) return null; // Discard all messages that are not a reply
+    if ( sysex.data[4] != X_REP ) return null; // Discard all messages that are not a reply
 
     Alpine.store('pp').pp_loading = false;
-	
+    
     var action = sysex.data[5];
 
-	switch ( action ) {
-		case X_GET:
+    switch ( action ) {
+        case X_GET:
             console.info("GET");
             Alpine.store('pp').pp_got_config            = true;
             Alpine.store('pp').pp_ver_major             = sysex.data[6];
@@ -144,9 +147,9 @@ function parseSysEx( sysex ){
             }
             console.log('parameters', parameters);
             Alpine.store('pp').pp_parameters = parameters;
-		break;
+        break;
 
-		case X_SET:
+        case X_SET:
             console.info("SET");
             var pp_set_response     = sysex.data[6];
 

docs/manifest.json

@@ -0,0 +1,43 @@
+{
+  "name": "Push Push Editor",
+  "short_name": "Push Push Editor",
+  "id": "./",
+  "start_url": "./",
+  "display": "standalone",
+  "description": "An editor for the Push Push device",
+  "lang": " en",
+  "dir": "auto",
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "images/192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "images/512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "images/animated-preview.gif",
+      "sizes": "720x450",
+      "type": "image/gif",
+      "description": "An animated preview of the editor",
+      "form_factor": "wide"
+    },
+    {
+      "src": "images/animated-preview.gif",
+      "sizes": "720x450",
+      "type": "image/gif",
+      "description": "An animated preview of the editor",
+      "form_factor": "narrow"
+    }
+  ]
+}