Merge pull request #530 from shamshadkhan/master

Fixes to #529 Transforming a Reactive App into an Installable Standalone App- Journey with OutSystems

_posts/2024-08-28-transforming-a-reactive-app-into-an-installable-standalone-app.md

@@ -36,7 +36,7 @@ Below are the steps to Transform a Reactive App into a Standalone App:
 There are two ways to make an app run as a standalone application. The first way is to use a set of meta tags in the head element of your HTML code. The second way is to set the properties of the Web App Manifest file. We will be required to use both options and cannot go with either one because, unlike Android, for which many native-like features are automatically generated by the Web App Manifest, iOS requires some additional HTML and CSS tricks. Throughout this guide, I will demonstrate which settings work for Android, and which do not for iOS, along with the necessary adjustments needed to be done to overcome this. Here’s a step-by-step guide to transforming the reactive app.
 
 ![SEOUtilsonSteroid Library in Service Studio](/img/transforming-a-reactive-app-into-an-installable-standalone-app-with-OutSystems/steroid_utils.png)
->   1. SEOUtilsonSteroid Library in Service Studio
+>   SEOUtilsonSteroid Library in Service Studio - Picture 1
 
 ### Utilize SEO Utils on Steroids Library
 
@@ -48,7 +48,7 @@ To include the meta tag in your application, follow these steps:
 By doing this, you ensure that all the essential elements are included in the head section of the HTML code and are  properly integrated into your application.
 
 ![Deploying Manifest File](/img/transforming-a-reactive-app-into-an-installable-standalone-app-with-OutSystems/configure_manifest.png)
->   2. Deploying Manifest File
+>   Deploying Manifest File - Picture 2
 
 ### Configure Manifest File
 
@@ -64,13 +64,7 @@ By following these steps, you ensure that the manifest file is properly integrat
 
 Here is a simplified table that combines iOS and Android information for each feature:
 
-Feature  | Manifest File Example | HTML/CSS Example | Note
-------------- | ------------- | ------------- | -------------
-Display Mode  | "display": "fullscreen" or "display": "standalone"  | iOS: \<meta name="apple-mobile-web-app-capable" content="yes">  <br> Android: \<meta name="mobile-web-app-capable" content="yes">  | Add appropriate meta tags for iOS and Android. Configure the display property in the manifest file to activate fullscreen mode, eliminating the address bar.
-Status Bar  | "theme_color": "#9f3d8f"  | iOS: \<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">  | For iOS, black-translucent results in white text and symbols, matching the background color of the app.  For Android, the default navigation bar is hidden. The theme_color sets the color of the toolbar.
-Remove Navigation Bar  | "background_color": "#9f3d8f"  | \<meta name="viewport" content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui"> <br> `@media (display-mode: standalone) {body {min-height: 100vh;}}  <br> @media (display-mode: fullscreen) {body {min-height: 100vh;}}` | Use specific CSS for body elements and media queries. Set the "min-height" of the body element to "100vh". Include a viewport meta tag for proper scaling.
-Add launch Icons  | "name": "Standalone App", "short_name": "StandaloneApp", "icons": []  | iOS: \<link rel="apple-touch-icon" href="icon.png">  | For iOS, include the "apple-touch-icon" link tag. Android uses icons, name, and short_name properties from the manifest file.
-Add splash Screen  | "theme_color": "#9f3d8f", "background_color": "#9f3d8f", "icons": []  | iOS: \<link rel="apple-touch-startup-image" href="splash_screen.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">  | For iOS, ensure the splash screen image dimensions match the device. Android uses theme_color, background_color, and icon values to generate the splash screen.
+![Tabular Representation of Features](/img/transforming-a-reactive-app-into-an-installable-standalone-app-with-OutSystems/table.png)
 
 ### Additional Notes
 
@@ -84,19 +78,19 @@ Add splash Screen  | "theme_color": "#9f3d8f", "background_color": "#9f3d8f", "i
    * Currently, the library does not support adding more than 2 properties (rel, href) for the link tag, so we utilize an OutSystems JS widget to achieve this as in picture 5.
 
 ![Fullscreen Meta Tag Integration via SEOUtilsonSteroids Library](/img/transforming-a-reactive-app-into-an-installable-standalone-app-with-OutSystems/meta_tag_SEOLib.png)
->   3. Fullscreen Meta Tag Integration via SEOUtilsonSteroids Library
+>   Fullscreen Meta Tag Integration via SEOUtilsonSteroids Library - Picture 3
 
 ![Setting Display Properties in the Manifest File](/img/transforming-a-reactive-app-into-an-installable-standalone-app-with-OutSystems/manifest_file.png)
->   4. Setting Display Properties in the Manifest File
+>   Setting Display Properties in the Manifest File - Picture 4
 
 ![Splash Screen Link Tag Integration via JavaScript](/img/transforming-a-reactive-app-into-an-installable-standalone-app-with-OutSystems/meta_tag_JS.png)
->   5. Splash Screen Link Tag Integration via JavaScript
+>   Splash Screen Link Tag Integration via JavaScript - Picture 5
 
 ## Updating & Debugging the Manifest File
 
 
 ![Debug Manifest File](/img/transforming-a-reactive-app-into-an-installable-standalone-app-with-OutSystems/manifest_console.png)
->   6. Debug Manifest File
+>   Debug Manifest File - Picture 6
 
 To ensure the manifest is set up correctly, you can use Inspector in Chrome browser, follow these steps:
    1. Open your web app in a Chrome browser and Press F12 or right-click and select "Inspect" to open Developer Tools.
@@ -116,13 +110,9 @@ By following these steps, you ensure that any updates made to the manifest file
 
 To demonstrate the outcome, I developed a demo since the results of the original project cannot be shared publicly due to NDA restrictions.
 
-https://github.com/user-attachments/assets/a26e44ad-434c-4d34-9d2d-70361773ee69
+[Android Standalone App Demo]
 
->   7. Android Standalone App Demo
-
-https://github.com/user-attachments/assets/6dd3a6fb-7b35-486b-bef3-62fda3c4bf84
-
->   8. iPhone Standalone App Demo
+[iPhone Standalone App Demo]
 
 
 ## Final Thoughts
@@ -144,7 +134,7 @@ In the end, hearing the product owner's feedback—
    5. [Launch Icon Generator]
    6. [Splash Screen Generator]
    7. [Viewport Sizes for iPhone]
-   8. [SEO Utils on Steroids - Documentation (ODC) | OutSystems]
+   8. [SEO Utils on Steroids - Documentation (ODC) OutSystems]
 
 [Web app manifest]: https://web.dev/learn/pwa/web-app-manifest
 [Coloring the WebKit Browser Bars]: https://medium.com/@evkirkiles/coloring-the-webkit-browser-bars-28d75cd8cf7f
@@ -153,6 +143,7 @@ In the end, hearing the product owner's feedback—
 [Launch Icon Generator]: https://www.pwabuilder.com/imageGenerator
 [Splash Screen Generator]: https://hotpot.ai/design/splash-screen?id=4KWvesbjLJUt_1170_2532
 [Viewport Sizes for iPhone]: https://yesviz.com/iphones.php
-[SEO Utils on Steroids - Documentation (ODC) | OutSystems]: https://www.outsystems.com/forge/component-documentation/18898/seo-utils-on-steroids-odc
+[SEO Utils on Steroids - Documentation (ODC) OutSystems]: https://www.outsystems.com/forge/component-documentation/18898/seo-utils-on-steroids-odc
 [here]: https://web.dev/learn/pwa/web-app-manifest
-
+[Android Standalone App Demo]: https://github.com/user-attachments/assets/6dd3a6fb-7b35-486b-bef3-62fda3c4bf84
+[iPhone Standalone App Demo]: https://github.com/user-attachments/assets/a26e44ad-434c-4d34-9d2d-70361773ee69