Reduced number of files

andreinwald · Mar 26, 2024 · 82ad9f5 · 82ad9f5
1 parent c9c1a09
commit 82ad9f5
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 98 deletions.
diff --git 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
@@ -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
@@ -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,11 +74,19 @@ 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"
         },
     };
     navigator.serviceWorker.ready.then(async function (serviceWorker) {
         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
@@ -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
diff --git a/success.html b/success.html