diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_02.png b/Examples/demo_02.png new file mode 100755 index 0000000..77d5345 --- /dev/null +++ b/Examples/demo_02.png Binary files differ diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_02.png b/Examples/demo_02.png new file mode 100755 index 0000000..77d5345 --- /dev/null +++ b/Examples/demo_02.png Binary files differ diff --git a/Examples/demo_03.png b/Examples/demo_03.png new file mode 100755 index 0000000..8e89210 --- /dev/null +++ b/Examples/demo_03.png Binary files differ diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_02.png b/Examples/demo_02.png new file mode 100755 index 0000000..77d5345 --- /dev/null +++ b/Examples/demo_02.png Binary files differ diff --git a/Examples/demo_03.png b/Examples/demo_03.png new file mode 100755 index 0000000..8e89210 --- /dev/null +++ b/Examples/demo_03.png Binary files differ diff --git a/README.md b/README.md index de42321..061506c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,18 @@ WebShareDemo =============== -A small demo showing how to use the "web share target API" to upload an image \ No newline at end of file +A small demo showing how to use the "web share target API" to upload an image. + +1) Create a folder "ws3" in your webroot and add these files in it. + +2) Replace demo.com with your URL in all the nessessecary files. + +3) On your device go to https://[yourURL.com]/ws3/install.html and click "install" + +4) now in your share menu's you should have this as an option (see below) + + + + + + \ No newline at end of file diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_02.png b/Examples/demo_02.png new file mode 100755 index 0000000..77d5345 --- /dev/null +++ b/Examples/demo_02.png Binary files differ diff --git a/Examples/demo_03.png b/Examples/demo_03.png new file mode 100755 index 0000000..8e89210 --- /dev/null +++ b/Examples/demo_03.png Binary files differ diff --git a/README.md b/README.md index de42321..061506c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,18 @@ WebShareDemo =============== -A small demo showing how to use the "web share target API" to upload an image \ No newline at end of file +A small demo showing how to use the "web share target API" to upload an image. + +1) Create a folder "ws3" in your webroot and add these files in it. + +2) Replace demo.com with your URL in all the nessessecary files. + +3) On your device go to https://[yourURL.com]/ws3/install.html and click "install" + +4) now in your share menu's you should have this as an option (see below) + + + + + + \ No newline at end of file diff --git a/face_share-192.png b/face_share-192.png new file mode 100755 index 0000000..0a32adb --- /dev/null +++ b/face_share-192.png Binary files differ diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_02.png b/Examples/demo_02.png new file mode 100755 index 0000000..77d5345 --- /dev/null +++ b/Examples/demo_02.png Binary files differ diff --git a/Examples/demo_03.png b/Examples/demo_03.png new file mode 100755 index 0000000..8e89210 --- /dev/null +++ b/Examples/demo_03.png Binary files differ diff --git a/README.md b/README.md index de42321..061506c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,18 @@ WebShareDemo =============== -A small demo showing how to use the "web share target API" to upload an image \ No newline at end of file +A small demo showing how to use the "web share target API" to upload an image. + +1) Create a folder "ws3" in your webroot and add these files in it. + +2) Replace demo.com with your URL in all the nessessecary files. + +3) On your device go to https://[yourURL.com]/ws3/install.html and click "install" + +4) now in your share menu's you should have this as an option (see below) + + + + + + \ No newline at end of file diff --git a/face_share-192.png b/face_share-192.png new file mode 100755 index 0000000..0a32adb --- /dev/null +++ b/face_share-192.png Binary files differ diff --git a/face_share-512.png b/face_share-512.png new file mode 100755 index 0000000..db314f2 --- /dev/null +++ b/face_share-512.png Binary files differ diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_02.png b/Examples/demo_02.png new file mode 100755 index 0000000..77d5345 --- /dev/null +++ b/Examples/demo_02.png Binary files differ diff --git a/Examples/demo_03.png b/Examples/demo_03.png new file mode 100755 index 0000000..8e89210 --- /dev/null +++ b/Examples/demo_03.png Binary files differ diff --git a/README.md b/README.md index de42321..061506c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,18 @@ WebShareDemo =============== -A small demo showing how to use the "web share target API" to upload an image \ No newline at end of file +A small demo showing how to use the "web share target API" to upload an image. + +1) Create a folder "ws3" in your webroot and add these files in it. + +2) Replace demo.com with your URL in all the nessessecary files. + +3) On your device go to https://[yourURL.com]/ws3/install.html and click "install" + +4) now in your share menu's you should have this as an option (see below) + + + + + + \ No newline at end of file diff --git a/face_share-192.png b/face_share-192.png new file mode 100755 index 0000000..0a32adb --- /dev/null +++ b/face_share-192.png Binary files differ diff --git a/face_share-512.png b/face_share-512.png new file mode 100755 index 0000000..db314f2 --- /dev/null +++ b/face_share-512.png Binary files differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a476f4d --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Img Upload Demo + </h1> + <p> + <b>Latest pic:</b> + </p> + <p> + <img src="//demo.com/ws3/pic.jpg" width="100%" /> + </body> +</html> diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_02.png b/Examples/demo_02.png new file mode 100755 index 0000000..77d5345 --- /dev/null +++ b/Examples/demo_02.png Binary files differ diff --git a/Examples/demo_03.png b/Examples/demo_03.png new file mode 100755 index 0000000..8e89210 --- /dev/null +++ b/Examples/demo_03.png Binary files differ diff --git a/README.md b/README.md index de42321..061506c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,18 @@ WebShareDemo =============== -A small demo showing how to use the "web share target API" to upload an image \ No newline at end of file +A small demo showing how to use the "web share target API" to upload an image. + +1) Create a folder "ws3" in your webroot and add these files in it. + +2) Replace demo.com with your URL in all the nessessecary files. + +3) On your device go to https://[yourURL.com]/ws3/install.html and click "install" + +4) now in your share menu's you should have this as an option (see below) + + + + + + \ No newline at end of file diff --git a/face_share-192.png b/face_share-192.png new file mode 100755 index 0000000..0a32adb --- /dev/null +++ b/face_share-192.png Binary files differ diff --git a/face_share-512.png b/face_share-512.png new file mode 100755 index 0000000..db314f2 --- /dev/null +++ b/face_share-512.png Binary files differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a476f4d --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Img Upload Demo + </h1> + <p> + <b>Latest pic:</b> + </p> + <p> + <img src="//demo.com/ws3/pic.jpg" width="100%" /> + </body> +</html> diff --git a/install.html b/install.html new file mode 100644 index 0000000..c3d8ccc --- /dev/null +++ b/install.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Web Share Target Demo + </h1> + + <p id="requireHTTPS" class="hidden"> + <b>STOP!</b> This page <b>must</b> be served over HTTPS. + Please <a>reload this page via HTTPS</a>. + </p> + + <p> + The Web Share Target API allows installed web apps to register + with the underlying OS as a share target to receive shared content + from either the Web Share API or system events, like the + OS-level share button. + </p> + + <p id="shareNotSupported" class="hidden"> + <code>navigator.share</code> is not supported in this + browser, try sharing from another app instead. + </p> + + <p id="instructions"> + <b>Try it out:</b> + Install me, then try sharing an image from another app. + </p> + + <pre id="result"> + </pre> + + <!-- Install/Share buttons, disabled by default --> + <div id="installContainer"> + <button id="butInstall" type="button" disabled> + Install + </button> + </div> + + <!-- import the webpage's javascript file --> + <script src="./script.js"></script> + </body> +</html> diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_02.png b/Examples/demo_02.png new file mode 100755 index 0000000..77d5345 --- /dev/null +++ b/Examples/demo_02.png Binary files differ diff --git a/Examples/demo_03.png b/Examples/demo_03.png new file mode 100755 index 0000000..8e89210 --- /dev/null +++ b/Examples/demo_03.png Binary files differ diff --git a/README.md b/README.md index de42321..061506c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,18 @@ WebShareDemo =============== -A small demo showing how to use the "web share target API" to upload an image \ No newline at end of file +A small demo showing how to use the "web share target API" to upload an image. + +1) Create a folder "ws3" in your webroot and add these files in it. + +2) Replace demo.com with your URL in all the nessessecary files. + +3) On your device go to https://[yourURL.com]/ws3/install.html and click "install" + +4) now in your share menu's you should have this as an option (see below) + + + + + + \ No newline at end of file diff --git a/face_share-192.png b/face_share-192.png new file mode 100755 index 0000000..0a32adb --- /dev/null +++ b/face_share-192.png Binary files differ diff --git a/face_share-512.png b/face_share-512.png new file mode 100755 index 0000000..db314f2 --- /dev/null +++ b/face_share-512.png Binary files differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a476f4d --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Img Upload Demo + </h1> + <p> + <b>Latest pic:</b> + </p> + <p> + <img src="//demo.com/ws3/pic.jpg" width="100%" /> + </body> +</html> diff --git a/install.html b/install.html new file mode 100644 index 0000000..c3d8ccc --- /dev/null +++ b/install.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Web Share Target Demo + </h1> + + <p id="requireHTTPS" class="hidden"> + <b>STOP!</b> This page <b>must</b> be served over HTTPS. + Please <a>reload this page via HTTPS</a>. + </p> + + <p> + The Web Share Target API allows installed web apps to register + with the underlying OS as a share target to receive shared content + from either the Web Share API or system events, like the + OS-level share button. + </p> + + <p id="shareNotSupported" class="hidden"> + <code>navigator.share</code> is not supported in this + browser, try sharing from another app instead. + </p> + + <p id="instructions"> + <b>Try it out:</b> + Install me, then try sharing an image from another app. + </p> + + <pre id="result"> + </pre> + + <!-- Install/Share buttons, disabled by default --> + <div id="installContainer"> + <button id="butInstall" type="button" disabled> + Install + </button> + </div> + + <!-- import the webpage's javascript file --> + <script src="./script.js"></script> + </body> +</html> diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..2f40bc3 --- /dev/null +++ b/manifest.json @@ -0,0 +1,39 @@ +{ + "short_name": "Share Image", + "name": "Upload Image", + "share_target": { + "action": "share.php", + "method":"POST", + "enctype": "multipart/form-data", + "params": { + "title": "title", + "text": "text", + "url": "url", + "files": [ + { + "name": "image", + "accept": "image/*" + } + ] + + } + }, + "description": "Upload Image", + "icons": [ + { + "src": "https://demo.com/ws3/face_share-192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "https://demo.com/ws3/face_share-512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "start_url": "index.html", + "background_color": "#c6f2f7", + "display": "standalone", + "scope": "/ws3/", + "theme_color": "#14168c" +} \ No newline at end of file diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_02.png b/Examples/demo_02.png new file mode 100755 index 0000000..77d5345 --- /dev/null +++ b/Examples/demo_02.png Binary files differ diff --git a/Examples/demo_03.png b/Examples/demo_03.png new file mode 100755 index 0000000..8e89210 --- /dev/null +++ b/Examples/demo_03.png Binary files differ diff --git a/README.md b/README.md index de42321..061506c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,18 @@ WebShareDemo =============== -A small demo showing how to use the "web share target API" to upload an image \ No newline at end of file +A small demo showing how to use the "web share target API" to upload an image. + +1) Create a folder "ws3" in your webroot and add these files in it. + +2) Replace demo.com with your URL in all the nessessecary files. + +3) On your device go to https://[yourURL.com]/ws3/install.html and click "install" + +4) now in your share menu's you should have this as an option (see below) + + + + + + \ No newline at end of file diff --git a/face_share-192.png b/face_share-192.png new file mode 100755 index 0000000..0a32adb --- /dev/null +++ b/face_share-192.png Binary files differ diff --git a/face_share-512.png b/face_share-512.png new file mode 100755 index 0000000..db314f2 --- /dev/null +++ b/face_share-512.png Binary files differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a476f4d --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Img Upload Demo + </h1> + <p> + <b>Latest pic:</b> + </p> + <p> + <img src="//demo.com/ws3/pic.jpg" width="100%" /> + </body> +</html> diff --git a/install.html b/install.html new file mode 100644 index 0000000..c3d8ccc --- /dev/null +++ b/install.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Web Share Target Demo + </h1> + + <p id="requireHTTPS" class="hidden"> + <b>STOP!</b> This page <b>must</b> be served over HTTPS. + Please <a>reload this page via HTTPS</a>. + </p> + + <p> + The Web Share Target API allows installed web apps to register + with the underlying OS as a share target to receive shared content + from either the Web Share API or system events, like the + OS-level share button. + </p> + + <p id="shareNotSupported" class="hidden"> + <code>navigator.share</code> is not supported in this + browser, try sharing from another app instead. + </p> + + <p id="instructions"> + <b>Try it out:</b> + Install me, then try sharing an image from another app. + </p> + + <pre id="result"> + </pre> + + <!-- Install/Share buttons, disabled by default --> + <div id="installContainer"> + <button id="butInstall" type="button" disabled> + Install + </button> + </div> + + <!-- import the webpage's javascript file --> + <script src="./script.js"></script> + </body> +</html> diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..2f40bc3 --- /dev/null +++ b/manifest.json @@ -0,0 +1,39 @@ +{ + "short_name": "Share Image", + "name": "Upload Image", + "share_target": { + "action": "share.php", + "method":"POST", + "enctype": "multipart/form-data", + "params": { + "title": "title", + "text": "text", + "url": "url", + "files": [ + { + "name": "image", + "accept": "image/*" + } + ] + + } + }, + "description": "Upload Image", + "icons": [ + { + "src": "https://demo.com/ws3/face_share-192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "https://demo.com/ws3/face_share-512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "start_url": "index.html", + "background_color": "#c6f2f7", + "display": "standalone", + "scope": "/ws3/", + "theme_color": "#14168c" +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..895b662 --- /dev/null +++ b/script.js @@ -0,0 +1,54 @@ +const divResult = document.getElementById('result'); +const divInstall = document.getElementById('installContainer'); +const butInstall = document.getElementById('butInstall'); + +window.addEventListener('beforeinstallprompt', (event) => { + console.log('👍', 'beforeinstallprompt', event); + // Stash the event so it can be triggered later. + window.deferredPrompt = event; + // Remove the 'hidden' class from the install button container + butInstall.removeAttribute('disabled'); +}); + +butInstall.addEventListener('click', () => { + console.log('👍', 'butInstall-clicked'); + const promptEvent = window.deferredPrompt + if (!promptEvent) { + // The deferred prompt isn't available. + return; + } + // Show the install prompt. + promptEvent.prompt(); + // Log the result + promptEvent.userChoice.then((result) => { + console.log('👍', 'userChoice', result); + // Reset the deferred prompt variable, since + // prompt() can only be called once. + window.deferredPrompt = null; + // Hide the install button. + butInstall.setAttribute('disabled', true); + }); +}); + +window.addEventListener('appinstalled', (event) => { + console.log('👍', 'appinstalled', event); +}); + +/* Only register a service worker if it's supported */ +if ('serviceWorker' in navigator) { + console.log('👍', 'navigator.serviceWorker is supported'); + navigator.serviceWorker.register('https://demo.com/ws3/service-worker.js'); +} + +/** + * Warn the page must be served over HTTPS + * The `beforeinstallprompt` event won't fire if the page is served over HTTP. + * Installability requires a service worker with a fetch event handler, and + * if the page isn't served over HTTPS, the service worker won't load. + */ +if (window.location.protocol === 'http:') { + const requireHTTPS = document.getElementById('requireHTTPS'); + const link = requireHTTPS.querySelector('a'); + link.href = window.location.href.replace('http://', 'https://'); + requireHTTPS.classList.remove('hidden'); +} \ No newline at end of file diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_02.png b/Examples/demo_02.png new file mode 100755 index 0000000..77d5345 --- /dev/null +++ b/Examples/demo_02.png Binary files differ diff --git a/Examples/demo_03.png b/Examples/demo_03.png new file mode 100755 index 0000000..8e89210 --- /dev/null +++ b/Examples/demo_03.png Binary files differ diff --git a/README.md b/README.md index de42321..061506c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,18 @@ WebShareDemo =============== -A small demo showing how to use the "web share target API" to upload an image \ No newline at end of file +A small demo showing how to use the "web share target API" to upload an image. + +1) Create a folder "ws3" in your webroot and add these files in it. + +2) Replace demo.com with your URL in all the nessessecary files. + +3) On your device go to https://[yourURL.com]/ws3/install.html and click "install" + +4) now in your share menu's you should have this as an option (see below) + + + + + + \ No newline at end of file diff --git a/face_share-192.png b/face_share-192.png new file mode 100755 index 0000000..0a32adb --- /dev/null +++ b/face_share-192.png Binary files differ diff --git a/face_share-512.png b/face_share-512.png new file mode 100755 index 0000000..db314f2 --- /dev/null +++ b/face_share-512.png Binary files differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a476f4d --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Img Upload Demo + </h1> + <p> + <b>Latest pic:</b> + </p> + <p> + <img src="//demo.com/ws3/pic.jpg" width="100%" /> + </body> +</html> diff --git a/install.html b/install.html new file mode 100644 index 0000000..c3d8ccc --- /dev/null +++ b/install.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Web Share Target Demo + </h1> + + <p id="requireHTTPS" class="hidden"> + <b>STOP!</b> This page <b>must</b> be served over HTTPS. + Please <a>reload this page via HTTPS</a>. + </p> + + <p> + The Web Share Target API allows installed web apps to register + with the underlying OS as a share target to receive shared content + from either the Web Share API or system events, like the + OS-level share button. + </p> + + <p id="shareNotSupported" class="hidden"> + <code>navigator.share</code> is not supported in this + browser, try sharing from another app instead. + </p> + + <p id="instructions"> + <b>Try it out:</b> + Install me, then try sharing an image from another app. + </p> + + <pre id="result"> + </pre> + + <!-- Install/Share buttons, disabled by default --> + <div id="installContainer"> + <button id="butInstall" type="button" disabled> + Install + </button> + </div> + + <!-- import the webpage's javascript file --> + <script src="./script.js"></script> + </body> +</html> diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..2f40bc3 --- /dev/null +++ b/manifest.json @@ -0,0 +1,39 @@ +{ + "short_name": "Share Image", + "name": "Upload Image", + "share_target": { + "action": "share.php", + "method":"POST", + "enctype": "multipart/form-data", + "params": { + "title": "title", + "text": "text", + "url": "url", + "files": [ + { + "name": "image", + "accept": "image/*" + } + ] + + } + }, + "description": "Upload Image", + "icons": [ + { + "src": "https://demo.com/ws3/face_share-192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "https://demo.com/ws3/face_share-512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "start_url": "index.html", + "background_color": "#c6f2f7", + "display": "standalone", + "scope": "/ws3/", + "theme_color": "#14168c" +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..895b662 --- /dev/null +++ b/script.js @@ -0,0 +1,54 @@ +const divResult = document.getElementById('result'); +const divInstall = document.getElementById('installContainer'); +const butInstall = document.getElementById('butInstall'); + +window.addEventListener('beforeinstallprompt', (event) => { + console.log('👍', 'beforeinstallprompt', event); + // Stash the event so it can be triggered later. + window.deferredPrompt = event; + // Remove the 'hidden' class from the install button container + butInstall.removeAttribute('disabled'); +}); + +butInstall.addEventListener('click', () => { + console.log('👍', 'butInstall-clicked'); + const promptEvent = window.deferredPrompt + if (!promptEvent) { + // The deferred prompt isn't available. + return; + } + // Show the install prompt. + promptEvent.prompt(); + // Log the result + promptEvent.userChoice.then((result) => { + console.log('👍', 'userChoice', result); + // Reset the deferred prompt variable, since + // prompt() can only be called once. + window.deferredPrompt = null; + // Hide the install button. + butInstall.setAttribute('disabled', true); + }); +}); + +window.addEventListener('appinstalled', (event) => { + console.log('👍', 'appinstalled', event); +}); + +/* Only register a service worker if it's supported */ +if ('serviceWorker' in navigator) { + console.log('👍', 'navigator.serviceWorker is supported'); + navigator.serviceWorker.register('https://demo.com/ws3/service-worker.js'); +} + +/** + * Warn the page must be served over HTTPS + * The `beforeinstallprompt` event won't fire if the page is served over HTTP. + * Installability requires a service worker with a fetch event handler, and + * if the page isn't served over HTTPS, the service worker won't load. + */ +if (window.location.protocol === 'http:') { + const requireHTTPS = document.getElementById('requireHTTPS'); + const link = requireHTTPS.querySelector('a'); + link.href = window.location.href.replace('http://', 'https://'); + requireHTTPS.classList.remove('hidden'); +} \ No newline at end of file diff --git a/service-worker.js b/service-worker.js new file mode 100644 index 0000000..49162ef --- /dev/null +++ b/service-worker.js @@ -0,0 +1,33 @@ +self.addEventListener('install', (event) => { + console.log('👷', 'install', event); + self.skipWaiting(); +}); + +self.addEventListener('activate', (event) => { + console.log('👷', 'activate', event); + return self.clients.claim(); +}); + +/* +self.addEventListener('fetch', function(event) { + // console.log('👷', 'fetch', event); + event.respondWith(fetch(event.request)); +}); +*/ + +self.addEventListener('fetch', event => { + console.log('👷', 'fetch', event); + const url = new URL(event.request.url); + // If this is an incoming POST request for the + // registered "action" URL, respond to it. + if (event.request.method === 'POST' && + url.pathname === 'share.php') { + + event.respondWith((async () => { + const formData = await event.request.formData(); + const link = formData.get('link') || ''; + const responseUrl = await saveBookmark(link); + return Response.redirect(responseUrl, 303); + })()); + } +}); diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_02.png b/Examples/demo_02.png new file mode 100755 index 0000000..77d5345 --- /dev/null +++ b/Examples/demo_02.png Binary files differ diff --git a/Examples/demo_03.png b/Examples/demo_03.png new file mode 100755 index 0000000..8e89210 --- /dev/null +++ b/Examples/demo_03.png Binary files differ diff --git a/README.md b/README.md index de42321..061506c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,18 @@ WebShareDemo =============== -A small demo showing how to use the "web share target API" to upload an image \ No newline at end of file +A small demo showing how to use the "web share target API" to upload an image. + +1) Create a folder "ws3" in your webroot and add these files in it. + +2) Replace demo.com with your URL in all the nessessecary files. + +3) On your device go to https://[yourURL.com]/ws3/install.html and click "install" + +4) now in your share menu's you should have this as an option (see below) + + + + + + \ No newline at end of file diff --git a/face_share-192.png b/face_share-192.png new file mode 100755 index 0000000..0a32adb --- /dev/null +++ b/face_share-192.png Binary files differ diff --git a/face_share-512.png b/face_share-512.png new file mode 100755 index 0000000..db314f2 --- /dev/null +++ b/face_share-512.png Binary files differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a476f4d --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Img Upload Demo + </h1> + <p> + <b>Latest pic:</b> + </p> + <p> + <img src="//demo.com/ws3/pic.jpg" width="100%" /> + </body> +</html> diff --git a/install.html b/install.html new file mode 100644 index 0000000..c3d8ccc --- /dev/null +++ b/install.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Web Share Target Demo + </h1> + + <p id="requireHTTPS" class="hidden"> + <b>STOP!</b> This page <b>must</b> be served over HTTPS. + Please <a>reload this page via HTTPS</a>. + </p> + + <p> + The Web Share Target API allows installed web apps to register + with the underlying OS as a share target to receive shared content + from either the Web Share API or system events, like the + OS-level share button. + </p> + + <p id="shareNotSupported" class="hidden"> + <code>navigator.share</code> is not supported in this + browser, try sharing from another app instead. + </p> + + <p id="instructions"> + <b>Try it out:</b> + Install me, then try sharing an image from another app. + </p> + + <pre id="result"> + </pre> + + <!-- Install/Share buttons, disabled by default --> + <div id="installContainer"> + <button id="butInstall" type="button" disabled> + Install + </button> + </div> + + <!-- import the webpage's javascript file --> + <script src="./script.js"></script> + </body> +</html> diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..2f40bc3 --- /dev/null +++ b/manifest.json @@ -0,0 +1,39 @@ +{ + "short_name": "Share Image", + "name": "Upload Image", + "share_target": { + "action": "share.php", + "method":"POST", + "enctype": "multipart/form-data", + "params": { + "title": "title", + "text": "text", + "url": "url", + "files": [ + { + "name": "image", + "accept": "image/*" + } + ] + + } + }, + "description": "Upload Image", + "icons": [ + { + "src": "https://demo.com/ws3/face_share-192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "https://demo.com/ws3/face_share-512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "start_url": "index.html", + "background_color": "#c6f2f7", + "display": "standalone", + "scope": "/ws3/", + "theme_color": "#14168c" +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..895b662 --- /dev/null +++ b/script.js @@ -0,0 +1,54 @@ +const divResult = document.getElementById('result'); +const divInstall = document.getElementById('installContainer'); +const butInstall = document.getElementById('butInstall'); + +window.addEventListener('beforeinstallprompt', (event) => { + console.log('👍', 'beforeinstallprompt', event); + // Stash the event so it can be triggered later. + window.deferredPrompt = event; + // Remove the 'hidden' class from the install button container + butInstall.removeAttribute('disabled'); +}); + +butInstall.addEventListener('click', () => { + console.log('👍', 'butInstall-clicked'); + const promptEvent = window.deferredPrompt + if (!promptEvent) { + // The deferred prompt isn't available. + return; + } + // Show the install prompt. + promptEvent.prompt(); + // Log the result + promptEvent.userChoice.then((result) => { + console.log('👍', 'userChoice', result); + // Reset the deferred prompt variable, since + // prompt() can only be called once. + window.deferredPrompt = null; + // Hide the install button. + butInstall.setAttribute('disabled', true); + }); +}); + +window.addEventListener('appinstalled', (event) => { + console.log('👍', 'appinstalled', event); +}); + +/* Only register a service worker if it's supported */ +if ('serviceWorker' in navigator) { + console.log('👍', 'navigator.serviceWorker is supported'); + navigator.serviceWorker.register('https://demo.com/ws3/service-worker.js'); +} + +/** + * Warn the page must be served over HTTPS + * The `beforeinstallprompt` event won't fire if the page is served over HTTP. + * Installability requires a service worker with a fetch event handler, and + * if the page isn't served over HTTPS, the service worker won't load. + */ +if (window.location.protocol === 'http:') { + const requireHTTPS = document.getElementById('requireHTTPS'); + const link = requireHTTPS.querySelector('a'); + link.href = window.location.href.replace('http://', 'https://'); + requireHTTPS.classList.remove('hidden'); +} \ No newline at end of file diff --git a/service-worker.js b/service-worker.js new file mode 100644 index 0000000..49162ef --- /dev/null +++ b/service-worker.js @@ -0,0 +1,33 @@ +self.addEventListener('install', (event) => { + console.log('👷', 'install', event); + self.skipWaiting(); +}); + +self.addEventListener('activate', (event) => { + console.log('👷', 'activate', event); + return self.clients.claim(); +}); + +/* +self.addEventListener('fetch', function(event) { + // console.log('👷', 'fetch', event); + event.respondWith(fetch(event.request)); +}); +*/ + +self.addEventListener('fetch', event => { + console.log('👷', 'fetch', event); + const url = new URL(event.request.url); + // If this is an incoming POST request for the + // registered "action" URL, respond to it. + if (event.request.method === 'POST' && + url.pathname === 'share.php') { + + event.respondWith((async () => { + const formData = await event.request.formData(); + const link = formData.get('link') || ''; + const responseUrl = await saveBookmark(link); + return Response.redirect(responseUrl, 303); + })()); + } +}); diff --git a/share.php b/share.php new file mode 100644 index 0000000..91f75e5 --- /dev/null +++ b/share.php @@ -0,0 +1,42 @@ +<?php +$picfile = "/var/www/public_html/ws3/pic.jpg"; + +if(strlen(basename($_FILES["image"]["name"])) > 0){ + $stripped = trim(str_replace(" ","", $_FILES["image"]["name"])); + + if(move_uploaded_file($_FILES["image"]["tmp_name"], $picfile)){ + @chmod($picfile,0755); + echo "Ok!"; + }else{ + echo "Error copying! ".$_FILES["image"]["tmp_name"]." to ".$picfile." reason:". $_FILES["image"]["error"] ; + } +}else{ + echo "Error uploading!"; +} + +?> + +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Deom</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Img Upload Deom + </h1> + <p> + <b>href:</b> <code><span id="href"></span></code> + </p> + <p> + <img src="//demo.com/ws3/pic.jpg<?php echo "?".time(); ?>" width="100%" /> + </p> + </body> +</html> diff --git a/Examples/demo_01.png b/Examples/demo_01.png new file mode 100755 index 0000000..fc27cef --- /dev/null +++ b/Examples/demo_01.png Binary files differ diff --git a/Examples/demo_02.png b/Examples/demo_02.png new file mode 100755 index 0000000..77d5345 --- /dev/null +++ b/Examples/demo_02.png Binary files differ diff --git a/Examples/demo_03.png b/Examples/demo_03.png new file mode 100755 index 0000000..8e89210 --- /dev/null +++ b/Examples/demo_03.png Binary files differ diff --git a/README.md b/README.md index de42321..061506c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,18 @@ WebShareDemo =============== -A small demo showing how to use the "web share target API" to upload an image \ No newline at end of file +A small demo showing how to use the "web share target API" to upload an image. + +1) Create a folder "ws3" in your webroot and add these files in it. + +2) Replace demo.com with your URL in all the nessessecary files. + +3) On your device go to https://[yourURL.com]/ws3/install.html and click "install" + +4) now in your share menu's you should have this as an option (see below) + + + + + + \ No newline at end of file diff --git a/face_share-192.png b/face_share-192.png new file mode 100755 index 0000000..0a32adb --- /dev/null +++ b/face_share-192.png Binary files differ diff --git a/face_share-512.png b/face_share-512.png new file mode 100755 index 0000000..db314f2 --- /dev/null +++ b/face_share-512.png Binary files differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a476f4d --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Img Upload Demo + </h1> + <p> + <b>Latest pic:</b> + </p> + <p> + <img src="//demo.com/ws3/pic.jpg" width="100%" /> + </body> +</html> diff --git a/install.html b/install.html new file mode 100644 index 0000000..c3d8ccc --- /dev/null +++ b/install.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Demo</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Web Share Target Demo + </h1> + + <p id="requireHTTPS" class="hidden"> + <b>STOP!</b> This page <b>must</b> be served over HTTPS. + Please <a>reload this page via HTTPS</a>. + </p> + + <p> + The Web Share Target API allows installed web apps to register + with the underlying OS as a share target to receive shared content + from either the Web Share API or system events, like the + OS-level share button. + </p> + + <p id="shareNotSupported" class="hidden"> + <code>navigator.share</code> is not supported in this + browser, try sharing from another app instead. + </p> + + <p id="instructions"> + <b>Try it out:</b> + Install me, then try sharing an image from another app. + </p> + + <pre id="result"> + </pre> + + <!-- Install/Share buttons, disabled by default --> + <div id="installContainer"> + <button id="butInstall" type="button" disabled> + Install + </button> + </div> + + <!-- import the webpage's javascript file --> + <script src="./script.js"></script> + </body> +</html> diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..2f40bc3 --- /dev/null +++ b/manifest.json @@ -0,0 +1,39 @@ +{ + "short_name": "Share Image", + "name": "Upload Image", + "share_target": { + "action": "share.php", + "method":"POST", + "enctype": "multipart/form-data", + "params": { + "title": "title", + "text": "text", + "url": "url", + "files": [ + { + "name": "image", + "accept": "image/*" + } + ] + + } + }, + "description": "Upload Image", + "icons": [ + { + "src": "https://demo.com/ws3/face_share-192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "https://demo.com/ws3/face_share-512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "start_url": "index.html", + "background_color": "#c6f2f7", + "display": "standalone", + "scope": "/ws3/", + "theme_color": "#14168c" +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..895b662 --- /dev/null +++ b/script.js @@ -0,0 +1,54 @@ +const divResult = document.getElementById('result'); +const divInstall = document.getElementById('installContainer'); +const butInstall = document.getElementById('butInstall'); + +window.addEventListener('beforeinstallprompt', (event) => { + console.log('👍', 'beforeinstallprompt', event); + // Stash the event so it can be triggered later. + window.deferredPrompt = event; + // Remove the 'hidden' class from the install button container + butInstall.removeAttribute('disabled'); +}); + +butInstall.addEventListener('click', () => { + console.log('👍', 'butInstall-clicked'); + const promptEvent = window.deferredPrompt + if (!promptEvent) { + // The deferred prompt isn't available. + return; + } + // Show the install prompt. + promptEvent.prompt(); + // Log the result + promptEvent.userChoice.then((result) => { + console.log('👍', 'userChoice', result); + // Reset the deferred prompt variable, since + // prompt() can only be called once. + window.deferredPrompt = null; + // Hide the install button. + butInstall.setAttribute('disabled', true); + }); +}); + +window.addEventListener('appinstalled', (event) => { + console.log('👍', 'appinstalled', event); +}); + +/* Only register a service worker if it's supported */ +if ('serviceWorker' in navigator) { + console.log('👍', 'navigator.serviceWorker is supported'); + navigator.serviceWorker.register('https://demo.com/ws3/service-worker.js'); +} + +/** + * Warn the page must be served over HTTPS + * The `beforeinstallprompt` event won't fire if the page is served over HTTP. + * Installability requires a service worker with a fetch event handler, and + * if the page isn't served over HTTPS, the service worker won't load. + */ +if (window.location.protocol === 'http:') { + const requireHTTPS = document.getElementById('requireHTTPS'); + const link = requireHTTPS.querySelector('a'); + link.href = window.location.href.replace('http://', 'https://'); + requireHTTPS.classList.remove('hidden'); +} \ No newline at end of file diff --git a/service-worker.js b/service-worker.js new file mode 100644 index 0000000..49162ef --- /dev/null +++ b/service-worker.js @@ -0,0 +1,33 @@ +self.addEventListener('install', (event) => { + console.log('👷', 'install', event); + self.skipWaiting(); +}); + +self.addEventListener('activate', (event) => { + console.log('👷', 'activate', event); + return self.clients.claim(); +}); + +/* +self.addEventListener('fetch', function(event) { + // console.log('👷', 'fetch', event); + event.respondWith(fetch(event.request)); +}); +*/ + +self.addEventListener('fetch', event => { + console.log('👷', 'fetch', event); + const url = new URL(event.request.url); + // If this is an incoming POST request for the + // registered "action" URL, respond to it. + if (event.request.method === 'POST' && + url.pathname === 'share.php') { + + event.respondWith((async () => { + const formData = await event.request.formData(); + const link = formData.get('link') || ''; + const responseUrl = await saveBookmark(link); + return Response.redirect(responseUrl, 303); + })()); + } +}); diff --git a/share.php b/share.php new file mode 100644 index 0000000..91f75e5 --- /dev/null +++ b/share.php @@ -0,0 +1,42 @@ +<?php +$picfile = "/var/www/public_html/ws3/pic.jpg"; + +if(strlen(basename($_FILES["image"]["name"])) > 0){ + $stripped = trim(str_replace(" ","", $_FILES["image"]["name"])); + + if(move_uploaded_file($_FILES["image"]["tmp_name"], $picfile)){ + @chmod($picfile,0755); + echo "Ok!"; + }else{ + echo "Error copying! ".$_FILES["image"]["tmp_name"]." to ".$picfile." reason:". $_FILES["image"]["error"] ; + } +}else{ + echo "Error uploading!"; +} + +?> + +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Web Share Target Deom</title> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- import the webpage's stylesheet --> + <link rel="stylesheet" href="./style.css"> + <!-- Manifest --> + <link rel="manifest" href="./manifest.json"> + </head> + <body> + <h1> + Img Upload Deom + </h1> + <p> + <b>href:</b> <code><span id="href"></span></code> + </p> + <p> + <img src="//demo.com/ws3/pic.jpg<?php echo "?".time(); ?>" width="100%" /> + </p> + </body> +</html> diff --git a/style.css b/style.css new file mode 100644 index 0000000..56e0ff6 --- /dev/null +++ b/style.css @@ -0,0 +1,36 @@ +body { + background-color: #c6f2f7; + font-family: Helvetica, Arial, sans-serif; +} + +h1 { + text-align: center; +} + +.hidden { + display: none !important; +} + +button[disabled] { + opacity: 0.5; + border: 1px solid rgba(20, 22, 140, 0.5) !important; +} + +#installContainer { + position: absolute; + bottom: 1em; + display: flex; + justify-content: center; + width: 100%; +} + +#installContainer button { + background-color: inherit; + border: 1px solid #14168c; + font-size: 1em; + padding: 0.75em; +} + +#butInstall { + margin-left: 1em; +} \ No newline at end of file