From 82ad9f59aed89db5ffae29817f212f4d29ddfdc0 Mon Sep 17 00:00:00 2001
From: andreinwald <andreinwald@gmail.com>
Date: Tue, 26 Mar 2024 08:45:55 +0100
Subject: [PATCH] Reduced number of files

---
 README.md         |  2 +-
 backend-sender.js |  2 +-
 frontend.js       | 14 +++++++----
 index.html        | 37 +++++++++++++++++++----------
 styles.css        | 60 -----------------------------------------------
 success.html      | 19 ---------------
 6 files changed, 36 insertions(+), 98 deletions(-)
 delete mode 100644 styles.css
 delete mode 100644 success.html

diff --git a/README.md b/README.md
index 5973915..84d43af 100644
--- a/README.md
+++ b/README.md
@@ -191,7 +191,7 @@ const options = {
     icon: "https://andreinwald.github.io/webpush-ios-example/images/favicon.png",
     image: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Orange_tabby_cat_sitting_on_fallen_leaves-Hisashi-01A.jpg/1920px-Orange_tabby_cat_sitting_on_fallen_leaves-Hisashi-01A.jpg",
     data: {
-        "url": "https://andreinwald.github.io/webpush-ios-example/success.html",
+        "url": "https://andreinwald.github.io/webpush-ios-example/?page=success",
         "message_id": "your_internal_unique_message_id_for_tracking"
     },
 };
diff --git a/backend-sender.js b/backend-sender.js
index 470ea23..78d283c 100644
--- a/backend-sender.js
+++ b/backend-sender.js
@@ -32,7 +32,7 @@ let pushData = JSON.stringify({
     "icon": "https://andreinwald.github.io/webpush-ios-example/images/favicon.png",
     "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Orange_tabby_cat_sitting_on_fallen_leaves-Hisashi-01A.jpg/1920px-Orange_tabby_cat_sitting_on_fallen_leaves-Hisashi-01A.jpg",
     "data": {
-        "url": "https://andreinwald.github.io/webpush-ios-example/success.html",
+        "url": "https://andreinwald.github.io/webpush-ios-example/?page=success",
         "message_id": "your_internal_unique_message_id_for_tracking"
     }
 });
diff --git a/frontend.js b/frontend.js
index a7ac7c7..9930346 100644
--- a/frontend.js
+++ b/frontend.js
@@ -1,7 +1,3 @@
-if (navigator.serviceWorker) {
-    initServiceWorker();
-}
-
 async function initServiceWorker() {
     let swRegistration = await navigator.serviceWorker.register('https://andreinwald.github.io/webpush-ios-example/serviceworker.js', {scope: '/webpush-ios-example/'})
     let pushManager = swRegistration.pushManager;
@@ -78,7 +74,7 @@ function testSend() {
         icon: "https://andreinwald.github.io/webpush-ios-example/images/push_icon.jpg",
         image: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Orange_tabby_cat_sitting_on_fallen_leaves-Hisashi-01A.jpg/1920px-Orange_tabby_cat_sitting_on_fallen_leaves-Hisashi-01A.jpg",
         data: {
-            "url": "https://andreinwald.github.io/webpush-ios-example/success.html",
+            "url": "https://andreinwald.github.io/webpush-ios-example/?page=success",
             "message_id": "your_internal_unique_message_id_for_tracking"
         },
     };
@@ -86,3 +82,11 @@ function testSend() {
         await serviceWorker.showNotification(title, options);
     });
 }
+
+if ((new URLSearchParams(window.location.search)).get('page') === 'success') {
+    document.getElementById('content').innerHTML = 'You successfully opened page from WebPush! (this url was that was set in json data param)';
+}
+
+if (navigator.serviceWorker) {
+    initServiceWorker();
+}
diff --git a/index.html b/index.html
index 6426098..7e5d9a8 100644
--- a/index.html
+++ b/index.html
@@ -6,27 +6,40 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <link rel="icon" type="image/png" href="images/favicon.png">
-    <link href="styles.css" rel="stylesheet">
     <link rel="apple-touch-icon" href="images/favicon.png"> <!-- needed for phone PWA app icon -->
+    <style>
+        body {background-color: #cfc7e2;font-family: Arial, sans-serif;font-size: 18px;padding-bottom: 50px;}
+        .wrapper {max-width: 800px;margin: 0 auto;}
+        @supports (-webkit-touch-callout: none) {#scan-qr-code {display: none;}}
+        #add-to-home-screen {display: none;background-color: bisque;padding: 10px;}
+        #add-to-home-screen img {display: block;margin: 0 auto;padding-top: 10px;max-height: 500px;max-width: 100%}
+        #scan-qr-code img {display: block;max-width: 100%}
+        #subscribe_btn, #test_send_btn {display: none;width: 100%;line-height: 2;font-size: 20px;margin-top: 10px;}
+        #active_sub {display: none;background-color: #e7e7ff;padding: 20px;word-wrap: break-word;}
+        #source_link {position: fixed;bottom: 10px;color: #fff;background-color: rgba(0,0,0,0.5);padding: 5px;left: 10px;}
+    </style>
 </head>
 <body>
 <div class="wrapper">
     <h1>WebPush iOS example</h1>
 
-    <div id="add-to-home-screen">
-        For WebPush work you may need to add this website to Home Screen at your iPhone or iPad (window.navigator is not
-        standalone).
-        <img src="images/webpush-add-to-home-screen.jpg" alt="webpush add to some screen">
-    </div>
+    <div id="content">
+        <div id="add-to-home-screen">
+            For WebPush work you may need to add this website to Home Screen at your iPhone or iPad (window.navigator is
+            not
+            standalone).
+            <img src="images/webpush-add-to-home-screen.jpg" alt="webpush add to some screen">
+        </div>
 
-    <div id="scan-qr-code">Open this page at your iPhone/iPad:
-        <img src="images/qrcode.png" alt="qrCode"><br><br>
-    </div>
+        <div id="scan-qr-code">Open this page at your iPhone/iPad:
+            <img src="images/qrcode.png" alt="qrCode"><br><br>
+        </div>
 
-    <button id="subscribe_btn" onclick="subscribeToPush()">Subscribe to notifications</button>
+        <button id="subscribe_btn" onclick="subscribeToPush()">Subscribe to notifications</button>
 
-    <div id="active_sub"></div>
-    <button id="test_send_btn" onclick="testSend()">Send test push</button>
+        <div id="active_sub"></div>
+        <button id="test_send_btn" onclick="testSend()">Send test push</button>
+    </div>
 
     <a id="source_link" href="https://github.com/andreinwald/webpush-ios-example">Code of this page</a>
 </div>
diff --git a/styles.css b/styles.css
deleted file mode 100644
index f20e94a..0000000
--- a/styles.css
+++ /dev/null
@@ -1,60 +0,0 @@
-body {
-    background-color: #cfc7e2;
-    font-family: Arial, sans-serif;
-    font-size: 18px;
-    padding-bottom: 50px;
-}
-
-.wrapper {
-    max-width: 800px;
-    margin: 0 auto;
-}
-
-@supports (-webkit-touch-callout: none) {
-    #scan-qr-code {
-        display: none;
-    }
-}
-
-#add-to-home-screen {
-    display: none;
-    background-color: bisque;
-    padding: 10px;
-}
-
-#add-to-home-screen img {
-    display: block;
-    margin: 0 auto;
-    padding-top: 10px;
-    max-height: 500px;
-    max-width: 100%
-}
-
-#scan-qr-code img {
-    display: block;
-    max-width: 100%
-}
-
-#subscribe_btn, #test_send_btn {
-    display: none;
-    width: 100%;
-    line-height: 2;
-    font-size: 20px;
-    margin-top: 10px;
-}
-
-#active_sub {
-    display: none;
-    background-color: #e7e7ff;
-    padding: 20px;
-    word-wrap: break-word;
-}
-
-#source_link {
-    position: fixed;
-    bottom: 10px;
-    color: #fff;
-    background-color: rgba(0,0,0,0.5);
-    padding: 5px;
-    left: 10px;
-}
diff --git a/success.html b/success.html
deleted file mode 100644
index d58577d..0000000
--- a/success.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<html lang="en">
-<head>
-    <title>WebPush iOS example</title>
-    <base href="https://andreinwald.github.io/webpush-ios-example/">
-    <link rel="manifest" href="manifest.json"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <link href="styles.css" rel="stylesheet">
-</head>
-<body>
-<div class="wrapper">
-    <h1>WebPush iOS example</h1>
-
-    You successfully opened page from WebPush! (this url was that was set in json data param)
-</div>
-
-<a id="source_link" href="https://github.com/andreinwald/webpush-ios-example">Code of this page</a>
-</body>
-</html>
-