{"id":7695,"date":"2023-04-27T17:57:20","date_gmt":"2023-04-27T17:57:20","guid":{"rendered":"https:\/\/architsingh.com\/webioticnew\/?p=7695"},"modified":"2023-04-28T17:02:43","modified_gmt":"2023-04-28T17:02:43","slug":"progressive-web-apps-the-future-of-the-mobile-web","status":"publish","type":"post","link":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/","title":{"rendered":"Progressive Web Apps: the Future of the Mobile Web"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row column_structure=&#8221;1_4,3_4&#8243; use_custom_gutter=&#8221;on&#8221; gutter_width=&#8221;2&#8243; disabled_on=&#8221;off|off|off&#8221; module_class=&#8221;post_header&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; width=&#8221;70%&#8221; custom_padding=&#8221;||||false|false&#8221; global_module=&#8221;5435&#8243; saved_tabs=&#8221;all&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text module_id=&#8221;date_text&#8221; _builder_version=&#8221;4.18.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p style=\"text-align: center;\"><strong>Updated<\/strong><\/p>\n<p>[\/et_pb_text][et_pb_post_title title=&#8221;off&#8221; author=&#8221;off&#8221; date_format=&#8221;M j Y&#8221; categories=&#8221;off&#8221; comments=&#8221;off&#8221; featured_image=&#8221;off&#8221; admin_label=&#8221;Post Date&#8221; module_class=&#8221;post-date&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; meta_font=&#8221;Nexa Bold||||||||&#8221; meta_text_align=&#8221;center&#8221; meta_text_color=&#8221;#000000&#8243; meta_font_size=&#8221;48px&#8221; meta_line_height=&#8221;1.2em&#8221; custom_margin=&#8221;||0px||false|false&#8221; custom_padding=&#8221;||0px||false|false&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_post_title][et_pb_text module_class=&#8221;timer_d&#8221; _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Helvetica||||||||&#8221; text_text_color=&#8221;#2ea0d2&#8243; text_orientation=&#8221;center&#8221; custom_margin=&#8221;||0px||false|false&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p class=\"reading-time\"><span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 11<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span><\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;3_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_post_title meta=&#8221;off&#8221; featured_image=&#8221;off&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; title_font=&#8221;Nexa-Bold|800|||||||&#8221; title_text_align=&#8221;left&#8221; title_text_color=&#8221;#000000&#8243; title_font_size=&#8221;48px&#8221; title_line_height=&#8221;1.2em&#8221; meta_font=&#8221;Nexa Regular||||||||&#8221; meta_text_align=&#8221;left&#8221; meta_text_color=&#8221;#2ea0d2&#8243; meta_font_size=&#8221;15px&#8221; meta_line_height=&#8221;1.6em&#8221; title_font_size_tablet=&#8221;42px&#8221; title_font_size_phone=&#8221;36px&#8221; title_font_size_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_post_title][\/et_pb_column][\/et_pb_row][et_pb_row disabled_on=&#8221;off|off|off&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; width=&#8221;100%&#8221; max_width=&#8221;1280px&#8221; module_alignment=&#8221;center&#8221; global_module=&#8221;5436&#8243; saved_tabs=&#8221;all&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_post_title title=&#8221;off&#8221; meta=&#8221;off&#8221; admin_label=&#8221;Feature Image&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; title_font=&#8221;Nexa Bold|700|||||||&#8221; title_text_align=&#8221;left&#8221; title_text_color=&#8221;#000000&#8243; title_font_size=&#8221;48px&#8221; title_line_height=&#8221;1.2em&#8221; meta_font=&#8221;Nexa Regular||||||||&#8221; meta_text_align=&#8221;left&#8221; meta_text_color=&#8221;#2ea0d2&#8243; meta_font_size=&#8221;15px&#8221; meta_line_height=&#8221;1.6em&#8221; title_font_size_tablet=&#8221;42px&#8221; title_font_size_phone=&#8221;36px&#8221; title_font_size_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_post_title][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;2_3,1_3&#8243; module_class=&#8221;blog-cnt-row&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; width=&#8221;90%&#8221; max_width=&#8221;1280px&#8221; module_alignment=&#8221;center&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;2_3&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.21.0&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Helvetica||||||||&#8221; text_text_color=&#8221;#26282d&#8221; text_font_size=&#8221;18px&#8221; text_letter_spacing=&#8221;0.03em&#8221; text_line_height=&#8221;1.8em&#8221; header_2_font=&#8221;Helvetica Bold||||||||&#8221; header_2_text_color=&#8221;#26282d&#8221; header_2_font_size=&#8221;50px&#8221; header_2_line_height=&#8221;54px&#8221; header_3_font=&#8221;Nexa Bold||||||||&#8221; header_3_text_color=&#8221;#26282d&#8221; header_3_font_size=&#8221;24px&#8221; header_4_font=&#8221;Nexa Bold||||||||&#8221; header_4_text_color=&#8221;#26282d&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<p><span style=\"font-weight: 400;\">App development can be a long and winding process that involves a wide spectrum of decisions.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Should you develop an app for <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/building-an-app-for-iphone-and-android-should-you-do-it\/\"><span style=\"font-weight: 400;\">Android, iOS, or both?<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Should you create your app from scratch or use a generic web builder?<\/span><\/p>\n<p><iframe loading=\"lazy\" title=\"How to Build Progressive Web Apps\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/QNEGmivZa68?start=1&#038;feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Fortunately, today\u2019s technology in <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/how-to-create-a-mobile-app-for-your-website\/\"><span style=\"font-weight: 400;\">mobile app development<\/span><\/a><span style=\"font-weight: 400;\"> offers solutions to help navigate and ameliorate this process.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Such as a progressive web app, or PWA, which is a popular way in which you can develop a mobile app that functions on just a web browser and comes with some added features to ease the development process.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this article, we\u2019ll take you through the world of <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/best-mobile-app-development-platform-create-your-own-app-fast\/\"><span style=\"font-weight: 400;\">progressive app development<\/span><\/a><span style=\"font-weight: 400;\">, how it can benefit your project, and how to build your own.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7707 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-iso3-webiotic-800x636.jpg\" alt=\"\" width=\"800\" height=\"636\" \/><\/p>\n<h4><span style=\"font-weight: 400;\">Table of Contents<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#chapter1\"><span style=\"font-weight: 400;\">Progressive Web Apps Defined<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#benefits\"><span style=\"font-weight: 400;\">Benefits of PWAs<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#pwa-vs-native\"><span style=\"font-weight: 400;\">PWA vs Native<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#chapter2\"><span style=\"font-weight: 400;\">How to Create a Progressive Web App<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#ssl\"><span style=\"font-weight: 400;\">Use SSL<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#shell\"><span style=\"font-weight: 400;\">Create an Application Shell<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#service-worker\"><span style=\"font-weight: 400;\">Register a Service Worker<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#manifest\"><span style=\"font-weight: 400;\">Add a Web App Manifest<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#install-prompt\"><span style=\"font-weight: 400;\">Setup the Install Prompt<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#performance\"><span style=\"font-weight: 400;\">Analyze Performance<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#lighthouse\"><span style=\"font-weight: 400;\">Lighthouse for Auditing Your App<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#chapter3\"><span style=\"font-weight: 400;\">Companies Using PWAs<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#starbucks\"><span style=\"font-weight: 400;\">Starbucks<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#uber\"><span style=\"font-weight: 400;\">Uber<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#pinterest\"><span style=\"font-weight: 400;\">Pinterest<\/span><\/a><\/li>\n<\/ol>\n<h2 id=\"chapter1\"><span style=\"font-weight: 400;\">Chapter #1: Progressive Web Apps Defined<\/span><\/h2>\n<p>A Progressive Web App (PWA) is a type of web application that uses modern web technologies to provide a user experience similar to that of a native mobile app.<\/p>\n<p>PWAs can be accessed through a web browser on any device and platform, including desktop, mobile, and tablet.<\/p>\n<p>They&#8217;re designed to be fast, reliable, and engaging, with features like offline mode, push notifications, and installation to the home screen.<\/p>\n<p>They&#8217;re also secure and can be served over HTTPS to prevent data tampering and ensure user privacy.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7722 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-logo-webiotic-800x301.jpg\" alt=\"\" width=\"800\" height=\"301\" \/><\/p>\n<p>In short, a Progressive Web App combines the benefits of both native mobile apps and traditional websites, providing a seamless user experience across all devices and platforms.<\/p>\n<h3 id=\"benefits\"><span style=\"font-weight: 400;\">1.1 Benefits of PWAs<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Let\u2019s take a closer look at a few of the benefits of PWAs so you can start to see how it differs from other types of mobile apps.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7728 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-iso-webiotic-800x529.jpg\" alt=\"\" width=\"800\" height=\"529\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo Credit: <\/span><a href=\"https:\/\/dzone.com\/articles\/how-to-build-a-progressive-web-app-pwa-with-javasc\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">dzone.com<\/span><\/a><\/p>\n<h4><span style=\"font-weight: 400;\">Available offline<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">While websites and apps aren\u2019t typically available offline, PWAs are. Despite PWAs being a <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/best-way-to-develop-hybrid-mobile-apps\/\"><span style=\"font-weight: 400;\">hybrid of web and mobile app technology<\/span><\/a><span style=\"font-weight: 400;\">, a great benefit is that it\u2019s available for offline use.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Mobile-like behavior<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Progressive web apps get the best of both worlds. They receive the benefits of website functionality, like database access and dynamic data, but they also look and feel just like a <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/app-development-costs-breakdown\/\"><span style=\"font-weight: 400;\">native mobile app<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7717 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-old-new-webiotic-800x450.jpg\" alt=\"\" width=\"800\" height=\"450\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Current UX and UI frameworks allow for PWAs to accomplish this, which gives them a much better mobile experience than mobile websites. Additionally, PWAs are still indexed by search engines like Google, which can help boost the app\u2019s exposure.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Easy installation<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">A progressive mobile app can be installed right onto a device from either a website or app store. Just keep in mind that not all app stores allow for <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/list-of-mobile-app-distribution-platforms\/\"><span style=\"font-weight: 400;\">progressive app distribution<\/span><\/a><span style=\"font-weight: 400;\">. Currently, you can download PWAs from Google Play but not Apple\u2019s App Store.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7711 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-install-webiotic-800x239.jpg\" alt=\"\" width=\"800\" height=\"239\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo Credit: <\/span><a href=\"https:\/\/web.dev\/rail\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">web.dev<\/span><\/a><\/p>\n<h4><span style=\"font-weight: 400;\">App Store submission isn\u2019t required<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">While you certainly <\/span><i><span style=\"font-weight: 400;\">can<\/span><\/i><span style=\"font-weight: 400;\"> publish your PWA in certain app stores, it\u2019s not necessary in order to use it, as is the case with native apps.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Businesses can skip the tedious app submission process if they wish and have users download the app directly from their website.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7710 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-engagement-webiotic-800x229.jpg\" alt=\"\" width=\"800\" height=\"229\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Another benefit to this is that updates to the app can be published immediately when users launch the app. When going through the app store, you typically have to wait for approvals on any updates.<\/span><\/p>\n<p class=\"has-background\" style=\"background-color: #d2eeff;\"><strong>PRO TIP:<\/strong><br \/><span style=\"font-weight: 400;\">While everyone loves the idea of seeing their app in the app store, remember that it\u2019s not necessary for every app. For example, <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/strategies-for-successful-b2e-mobile-apps\/\"><span style=\"font-weight: 400;\">B2E apps<\/span><\/a><span style=\"font-weight: 400;\"> can simply have employees access their app from the company website rather than deal with publishing it in an app store.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Access to hardware<\/span><\/h4>\n<p><a href=\"https:\/\/architsingh.com\/webioticnew\/promoting-your-business-with-a-mobile-app\/\"><span style=\"font-weight: 400;\">Just like with regular mobile apps<\/span><\/a><span style=\"font-weight: 400;\">, PWAs can also access device hardware features, such as <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/dual-camera-app-what-is-it-and-how-does-it-work\/\"><span style=\"font-weight: 400;\">camera and GPS<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7727 alignnone size-full\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-benefits-webiotic.jpg\" alt=\"\" width=\"712\" height=\"400\" \/><\/p>\n<h4><span style=\"font-weight: 400;\">Can be installed on desktop\u00a0<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">PWAs aren\u2019t limited to tablet and mobile use. They can also be installed on desktop devices. Unlike native apps, PWAs are smaller in size and they can <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/how-often-should-you-update-your-app\/\"><span style=\"font-weight: 400;\">update automatically<\/span><\/a><span style=\"font-weight: 400;\"> on desktop without requiring users to update the app manually.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7713 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-growth-webiotic-800x254.jpg\" alt=\"\" width=\"800\" height=\"254\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo Credit: <\/span><a href=\"https:\/\/web.dev\/rail\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">web.dev<\/span><\/a><\/p>\n<h3 id=\"pwa-vs-native\"><span style=\"font-weight: 400;\">1.2 PWA vs Native<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">So what\u2019s the difference, exactly, between a progressive app and a native app?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">First and foremost, they\u2019re written differently.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Native apps are written and developed specifically for mobile devices and using platform-specific <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/best-language-for-mobile-app-development-what-you-need-to-know\/\"><span style=\"font-weight: 400;\">programming languages<\/span><\/a><span style=\"font-weight: 400;\"> like Swift for iOS and Java or Kotlin for Android.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7716 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-size-webiotic-800x450.jpg\" alt=\"\" width=\"800\" height=\"450\" \/><\/p>\n<p><span style=\"font-weight: 400;\">PWAs, on the other hand, are written to run in a web browser, and use HTML, CSS, and JavaScript.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is one reason why PWAs are cheaper to develop. Another reason is that progressive web apps are <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/best-software-for-mobile-app-development-a-complete-guide\/\"><span style=\"font-weight: 400;\">faster to develop and update<\/span><\/a><span style=\"font-weight: 400;\">, and they\u2019re cross-platform.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With native apps, <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/how-to-choose-a-mobile-app-development-company\/\"><span style=\"font-weight: 400;\">you\u2019ll need to hire a developer<\/span><\/a><span style=\"font-weight: 400;\"> that\u2019s skilled in the coding language being used, and if you plan on developing your app for both iOS and Android, it\u2019s going to take much longer to develop since you\u2019re working with multiple codebases.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7709 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-iso1-webiotic-800x457.jpg\" alt=\"\" width=\"800\" height=\"457\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Another big difference between PWA and native apps is how they\u2019re distributed, which we touched on earlier.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">PWAs can be downloaded outside of app stores. All a user needs is a web browser and the URL from which to download the app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Native apps, however, require <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/app-store-submission-checklist\/\"><span style=\"font-weight: 400;\">publishing in app stores<\/span><\/a><span style=\"font-weight: 400;\">, depending on the platform.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, Android apps can be published on Google Play but not on Apple\u2019s App Store. Additionally, each app store has its own set of guidelines and requirements for publishing.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7724 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-group-webiotic-800x655.jpg\" alt=\"\" width=\"800\" height=\"655\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Discoverability is yet another difference between the two types of apps. Native apps rely on app store optimization (ASO) to be found, whereas PWAs rely on SEO to be indexed and ranked by search engines.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Native apps aren\u2019t indexed and listed in search engines like Google. <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/a-definitive-guide-to-mobile-app-stats-and-user-behavior\/\"><span style=\"font-weight: 400;\">They must rely on users<\/span><\/a><span style=\"font-weight: 400;\"> finding the app through the app store, which is why ASO is so important.<\/span><\/p>\n<h2 id=\"chapter2\"><span style=\"font-weight: 400;\">Chapter #2: How to Create a Progressive Mobile App<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">While this isn\u2019t a step-by-step guide to creating a progressive app, this section will serve as an overview of the steps you\u2019ll need to take to create your own PWA.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7726 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-technologies-webiotic-800x399.jpg\" alt=\"\" width=\"800\" height=\"399\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo Credit: <\/span><a href=\"https:\/\/www.newshore.es\/home\/news\/are-progressive-web-apps-a-game-changer-for-airlines\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">newshore.es<\/span><\/a><\/p>\n<h3 id=\"ssl\"><span style=\"font-weight: 400;\">2.1 Use SSL<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Remember, <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/custom-mobile-applications-development\/\"><span style=\"font-weight: 400;\">you\u2019re creating a mobile app<\/span><\/a><span style=\"font-weight: 400;\"> that runs in a web browser, so serving it over HTTPS is crucial. SSL adds an additional layer of web security and will help your users feel secure when using your mobile app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">HTTPS is also needed for progressive web applications in order to use service workers, which we\u2019ll get into later.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7708 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-iso2-webiotic-800x400.jpg\" alt=\"\" width=\"800\" height=\"400\" \/><\/p>\n<p class=\"has-background\" style=\"background-color: #d2eeff;\"><strong>PRO TIP:<\/strong><br \/><span style=\"font-weight: 400;\">An SSL certificate can be purchased directly from your hosting provider or your domain registrar.<\/span><\/p>\n<h3 id=\"shell\"><span style=\"font-weight: 400;\">2.2 Create an Application Shell<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Your application shell is the first thing your users will see after downloading your app. It ensures that your application will load reliably and instantly on users\u2019 screens, similar to native applications.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This shell is made up of HTML, CSS, and JavaScript and powers the UI. It also caches so that the shell doesn\u2019t need to be loaded each time a user visits the app.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7721 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-appshell-webiotic-800x611.jpg\" alt=\"\" width=\"800\" height=\"611\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Ideally, your app shell should:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Load fast<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use little data<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use static images from a local cache<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Separate content and navigation<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Retrieve and display content specific to the page<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Cache dynamic content<\/span><\/li>\n<\/ul>\n<h3 id=\"service-worker\"><span style=\"font-weight: 400;\">2.3 Register a Service Worker<\/span><\/h3>\n<p><a href=\"https:\/\/developers.google.com\/web\/ilt\/pwa\/introduction-to-service-worker\"><span style=\"font-weight: 400;\">A service worker<\/span><\/a><span style=\"font-weight: 400;\"> is a type of web worker. It\u2019s basically a JS file that runs separately from the primary browser thread.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In short, it gives you access to many PWA features, like caching, <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/benefits-of-push-notifications\/\"><span style=\"font-weight: 400;\">push notifications<\/span><\/a><span style=\"font-weight: 400;\">, install prompts, and more.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If a user\u2019s browser supports service workers, you can register the service worker JS file. From there, you can include code in that file that will allow you to access the three primary service worker lifecycle events: registration, installation, and activation.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7712 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-caching-webiotic-800x393.jpg\" alt=\"\" width=\"800\" height=\"393\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo Credit: <\/span><a href=\"https:\/\/web.dev\/rail\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">web.dev<\/span><\/a><\/p>\n<h3 id=\"manifest\"><span style=\"font-weight: 400;\">2.4 Add a Web App Manifest<\/span><\/h3>\n<p>Adding a Web App Manifest is an important step in creating a PWA and can help to improve the user experience.<\/p>\n<p>The Web App Manifest is a simple<a href=\"https:\/\/web.dev\/add-manifest\/\"> JSON file<\/a> that offers information about the PWA, like its name, icon, theme color, and start URL.<\/p>\n<p>By including this file, the PWA can be installed on the user&#8217;s device and launched from the home screen just like a native app.<\/p>\n<p>This improves the user experience by providing a more seamless and immersive experience, without the need to navigate to the website through a browser.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5032 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/Best-Language-for-App-Development-PWA-Webiotic-1024x651-1-800x509.jpg\" alt=\"\" width=\"800\" height=\"509\" \/><\/p>\n<h3 id=\"install-prompt\"><span style=\"font-weight: 400;\">2.5 Setup the Install Prompt<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">If your PWA has a service worker and a web app manifest, the user\u2019s browser will prompt them to install the app to their home screen. However, this prompt will only be executed if a user visits the site twice and with five minutes between the visits.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is so that the prompt only happens automatically when a user is clearly interested in the application.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7725 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-case-study-webiotic-800x550.jpg\" alt=\"\" width=\"800\" height=\"550\" \/><\/p>\n<p><span style=\"font-weight: 400;\">You\u2019ll need to configure an install prompt for this to occur. You can also configure the prompt for various situations, such as when a user takes a specific action.<\/span><\/p>\n<h3 id=\"performance\"><span style=\"font-weight: 400;\">2.6 Analyze Performance<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">PWAs take pride in being fast for users, despite network conditions. The idea of progressive web apps is that they provide users with a great experience, which includes speed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Be sure to analyze your app\u2019s performance to ensure it meets the standards expected of your users.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can measure your app\u2019s performance using the <\/span><a href=\"https:\/\/web.dev\/rail\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">RAIL model<\/span><\/a><span style=\"font-weight: 400;\">. This is a user-centric system that breaks down the user experience into specific actions, like tap, scroll, and load, and help you establish goals for each.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7720 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-rail-webiotic-800x367.jpg\" alt=\"\" width=\"800\" height=\"367\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo Credit: <\/span><a href=\"https:\/\/web.dev\/rail\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">web.dev<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">RAIL stands for response, animation, idle, and load\u2014all key aspects of a web app\u2019s life cycle.<\/span><\/p>\n<h3 id=\"lighthouse\"><span style=\"font-weight: 400;\">2.7 Lighthouse For Auditing Your App<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Lighthouse is a great <\/span><a href=\"https:\/\/developers.google.com\/web\/ilt\/pwa\/lighthouse-pwa-analysis-tool\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">PWA analysis tool by Google<\/span><\/a><span style=\"font-weight: 400;\">. It can be used to audit a progressive web app\u2019s features.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It tests for app speed, offline ability, security, and accessibility best practices. This tool is available as a Chrome extension and a command-line tool.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7719 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-lighthouse-webiotic-800x331.jpg\" alt=\"\" width=\"800\" height=\"331\" \/><\/p>\n<h2 id=\"chapter3\"><span style=\"font-weight: 400;\">Chapter #3: Companies Using PWAs<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now let\u2019s look at some real-world applications to get you inspired in building your own app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are three companies currently <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/how-to-build-a-blockchain-app-leveraging-new-technology\/\"><span style=\"font-weight: 400;\">taking advantage of PWA technology<\/span><\/a><span style=\"font-weight: 400;\">, and with success.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7723 alignnone size-full\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-success-webiotic.jpg\" alt=\"\" width=\"623\" height=\"619\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo Credit: <\/span><a href=\"https:\/\/medium.com\/progressivewebapps\/history-of-progressive-web-apps-4c912533a531\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">medium.com<\/span><\/a><\/p>\n<h3 id=\"starbucks\"><span style=\"font-weight: 400;\">3.1 Starbucks<\/span><\/h3>\n<p><a href=\"https:\/\/app.starbucks.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Starbucks created a PWA<\/span><\/a><span style=\"font-weight: 400;\"> of their ordering system that delivers a similar experience as their already-existing native app.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Customers can easily browse the menu, customize orders, add items to their cart, etc, online or offline. This is great for on-the-go customers who may not have access to the internet, which is required for their native app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Their PWA has been incredibly successful and is a favorite among their users.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7718 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-starbucks-webiotic-800x597.jpg\" alt=\"\" width=\"800\" height=\"597\" \/><\/p>\n<h3 id=\"uber\"><span style=\"font-weight: 400;\">3.2 Uber<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Uber is another company <\/span><a href=\"https:\/\/m.uber.com\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">offering a PWA<\/span><\/a><span style=\"font-weight: 400;\"> to help them expand to new markets.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This app offers a very similar experience to what you get with their native app, but it was developed to make booking a car accessible on low-speed networks.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This gives users an app-like experience on modern browsers, perfect for those using older devices that may not be compatible with the current native app.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7715 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-uber-webiotic-800x657.jpg\" alt=\"\" width=\"800\" height=\"657\" \/><\/p>\n<h3 id=\"pinterest\"><span style=\"font-weight: 400;\">3.3 Pinterest<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Pinterest rolled out their PWA to grow their international user base. They found that due to low performance on mobile, only 1% of mobile users signed up or installed the app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To increase conversions, Pinterest introduced a PWA using technology like React, Redux, and webpack, which greatly <\/span><a href=\"https:\/\/medium.com\/dev-channel\/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">boosted time spent in the app, engagement, and revenue<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">They also found that this led to an increase in performance. Their old mobile web experience often took 23 seconds to load any UI, whereas their new PWA loads at 5.6s.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7714 alignnone size-medium\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-pinterest-webiotic-800x450.jpg\" alt=\"\" width=\"800\" height=\"450\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Photo Credit: <\/span><a href=\"https:\/\/medium.com\/dev-channel\/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">medium.com<\/span><\/a><\/p>\n<h2><span style=\"font-weight: 400;\">Final Thoughts<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Progressive web apps are the future of the mobile web, and more companies and industries are using this new standard to improve their performance.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">PWAs are fast, reliable, and engaging\u2014all while maintaining native-app experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re unsure if a PWA is the right fit for your project, our <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/simple-starter\/\"><span style=\"font-weight: 400;\">Simple Starter<\/span><\/a><span style=\"font-weight: 400;\"> package is a cost-effective solution that can help <\/span><a href=\"https:\/\/architsingh.com\/webioticnew\/you-have-a-great-app-idea-should-you-sell-your-idea-or-develop-it\/\"><span style=\"font-weight: 400;\">transform your app ideas<\/span><\/a><span style=\"font-weight: 400;\"> into an actionable plan.<\/span><\/p>\n<p><b>Have you used a progressive app before? If so, how was the experience?<\/b><\/p>\n<p>[\/et_pb_text][et_pb_comments _builder_version=&#8221;4.11.4&#8243; _module_preset=&#8221;default&#8221; form_field_background_color=&#8221;#FFFFFF&#8221; form_field_focus_background_color=&#8221;#FFFFFF&#8221; header_font=&#8221;Helvetica||||||||&#8221; header_text_align=&#8221;left&#8221; title_font=&#8221;Helvetica|700|||||||&#8221; title_text_align=&#8221;left&#8221; title_text_color=&#8221;#2ea0d2&#8243; title_font_size=&#8221;25px&#8221; title_line_height=&#8221;1.2em&#8221; meta_font=&#8221;Helvetica||||||||&#8221; meta_text_color=&#8221;#000000&#8243; body_font=&#8221;Helvetica||||||||&#8221; body_text_align=&#8221;left&#8221; body_font_size=&#8221;16px&#8221; body_line_height=&#8221;1.6em&#8221; form_field_font=&#8221;Helvetica||||||||&#8221; form_field_text_align=&#8221;left&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#2ea0d2&#8243; button_bg_color=&#8221;#FFFFFF&#8221; button_border_color=&#8221;#2ea0d2&#8243; button_font=&#8221;Helvetica||||||||&#8221; button_use_icon=&#8221;off&#8221; button_alignment=&#8221;right&#8221; text_orientation=&#8221;left&#8221; border_width_bottom=&#8221;1px&#8221; border_color_bottom=&#8221;#e5e5e5&#8243; border_radii_fields=&#8221;on|5px|5px|5px|5px&#8221; border_width_all_fields=&#8221;1px&#8221; border_color_all_fields=&#8221;#c6c6c6&#8243; global_module=&#8221;5439&#8243; saved_tabs=&#8221;all&#8221; global_colors_info=&#8221;{}&#8221; button_bg_color__hover_enabled=&#8221;on|hover&#8221; button_bg_color__hover=&#8221;#2ea0d2&#8243; button_bg_enable_color__hover=&#8221;on&#8221; button_border_color__hover_enabled=&#8221;off|hover&#8221; button_text_color__hover_enabled=&#8221;on|hover&#8221; button_text_color__hover=&#8221;#FFFFFF&#8221;][\/et_pb_comments][et_pb_text disabled_on=&#8221;on|on|on&#8221; admin_label=&#8221;Up Next&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Helvetica|||on|||||&#8221; text_text_color=&#8221;#9e9e9e&#8221; text_font_size=&#8221;20px&#8221; width=&#8221;100%&#8221; max_width=&#8221;50%&#8221; module_alignment=&#8221;left&#8221; custom_margin=&#8221;-50px|0px|0px|0px|false|false&#8221; custom_margin_tablet=&#8221;0px||||false|false&#8221; custom_margin_phone=&#8221;0px|0px|0px|0px|false|false&#8221; custom_margin_last_edited=&#8221;off|desktop&#8221; custom_padding=&#8221;50px||||false|false&#8221; custom_css_main_element=&#8221;float: left;||margin-bottom:0px !important;&#8221; disabled=&#8221;on&#8221; global_module=&#8221;6525&#8243; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>Up Next<\/p>\n<p>[\/et_pb_text][et_pb_post_title title=&#8221;off&#8221; date=&#8221;off&#8221; categories=&#8221;off&#8221; comments=&#8221;off&#8221; featured_image=&#8221;off&#8221; disabled_on=&#8221;on|on|on&#8221; admin_label=&#8221;Author&#8221; module_class=&#8221;author-bottom&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; meta_font=&#8221;Journal||||||||&#8221; meta_text_align=&#8221;right&#8221; meta_text_color=&#8221;#0ab1db&#8221; meta_font_size=&#8221;35px&#8221; width=&#8221;100%&#8221; max_width=&#8221;50%&#8221; module_alignment=&#8221;right&#8221; custom_margin=&#8221;0px|40px|0px|0px|true|false&#8221; custom_css_post_title=&#8221;float: right;||margin: 0px !important;||margin-right: 40px !important;&#8221; disabled=&#8221;on&#8221; global_module=&#8221;5440&#8243; saved_tabs=&#8221;all&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_post_title][et_pb_sidebar area=&#8221;et_pb_widget_area_2&#8243; show_border=&#8221;off&#8221; disabled_on=&#8221;on|on|on&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; header_font=&#8221;|700|||||||&#8221; header_text_color=&#8221;#000000&#8243; header_font_size=&#8221;0px&#8221; header_line_height=&#8221;1.1em&#8221; body_font=&#8221;Helvetica Bold|700|||||||&#8221; body_text_align=&#8221;left&#8221; body_text_color=&#8221;#000000&#8243; body_font_size=&#8221;35px&#8221; body_line_height=&#8221;1.2em&#8221; custom_margin=&#8221;-20px||||false|false&#8221; custom_margin_tablet=&#8221;&#8221; custom_margin_phone=&#8221;0px||0px||false|false&#8221; custom_margin_last_edited=&#8221;on|phone&#8221; disabled=&#8221;on&#8221; global_module=&#8221;5442&#8243; saved_tabs=&#8221;all&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_sidebar][et_pb_text admin_label=&#8221;Read Time&#8221; module_class=&#8221;timer_d&#8221; _builder_version=&#8221;4.11.4&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Helvetica||||||||&#8221; text_text_color=&#8221;#26282d&#8221; text_font_size=&#8221;20px&#8221; custom_margin=&#8221;0px||50px||false|false&#8221; custom_padding=&#8221;0px||50px||false|false&#8221; border_width_bottom=&#8221;1px&#8221; border_color_bottom=&#8221;#e5e5e5&#8243; global_module=&#8221;6522&#8243; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<div class=\"related_posts\">\n\t\t<p class=\"up-next\">Up Next<\/p>\n\t\t<div class=\"author-meta\">\n\t\t<img decoding=\"async\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/vesko.png\"\/><span class=\"author-emoji\">Vesko<\/span>\n\t\t<\/div>\n\t\t<div class=\"related-content\">\n\t\t<a href=\"https:\/\/architsingh.com\/webioticnew\/what-are-night-out-apps-and-what-features-do-they-use\/\">\n\t\t<div class=\"related_post_title\">What Are Night Out Apps and What Features Do They Use?<\/div> <\/a>\n\t\t<div class=\"post-category\">App Development, Strategy Planning, App Development<\/div>\n\t\t<\/div>\n\t\t\n\t\t<div class=\"related_featured_img\"><a href=\"https:\/\/architsingh.com\/webioticnew\/what-are-night-out-apps-and-what-features-do-they-use\/\">\n\t\t<img decoding=\"async\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/night-out-app-header-webiotic.jpg\"\/><\/a><\/div>\n\t\t\n\t\t<span class=\"related_post_time\"><i class=\"far fa-clock\"><\/i> <p>12 minute read<\/p><\/span>\n\t\t<\/div>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; module_class=&#8221;post-sticky&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_css_main_element=&#8221; margin: 0;|| top: 40px;|| text-align: center;|| float: right;|| right: 0;||max-width:350px;||overflow: scroll;&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_post_title title=&#8221;off&#8221; date=&#8221;off&#8221; categories=&#8221;off&#8221; comments=&#8221;off&#8221; featured_image=&#8221;off&#8221; disabled_on=&#8221;on|on|on&#8221; admin_label=&#8221;Author&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; meta_font=&#8221;Journal||||||||&#8221; meta_text_align=&#8221;center&#8221; meta_text_color=&#8221;#0ab1db&#8221; meta_font_size=&#8221;35px&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; disabled=&#8221;on&#8221; global_module=&#8221;5438&#8243; saved_tabs=&#8221;all&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_post_title][et_pb_code disabled_on=&#8221;on|on|off&#8221; _builder_version=&#8221;4.18.0&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#ffffff&#8221; position_origin_f=&#8221;top_right&#8221; vertical_offset=&#8221;40px&#8221; text_orientation=&#8221;center&#8221; height=&#8221;100vh&#8221; custom_padding=&#8221;||||false|false&#8221; link_option_url=&#8221;https:\/\/architsingh.com\/webioticnew\/calendar\/&#8221; global_module=&#8221;5437&#8243; saved_tabs=&#8221;all&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<div class=\"header-sticky-post\"><!-- [et_pb_line_break_holder] -->  <img decoding=\"async\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/vesko.png\" \/> <span class=\"author_name\">Vesko<\/span><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><img loading=\"lazy\" decoding=\"async\" width=\"874\" height=\"722\" class=\"wp-image-6141 aligncenter size-full\" src=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/grey_calender_002-1.png\" alt=\"\"  \/>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; module_class=&#8221;fixed-image&#8221; _builder_version=&#8221;4.9.7&#8243; _module_preset=&#8221;default&#8221; z_index=&#8221;4&#8243; custom_margin=&#8221;-30px||0px||false|false&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; global_module=&#8221;6228&#8243; saved_tabs=&#8221;all&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; width=&#8221;100%&#8221; max_width=&#8221;100%&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_image src=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/newsletter_bg.png&#8221; title_text=&#8221;newsletter_bg&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; position_origin_a=&#8221;center_left&#8221; z_index=&#8221;3&#8243; width=&#8221;100%&#8221; max_width=&#8221;35%&#8221; custom_css_main_element=&#8221;position: absolute;||width: 100%;||height: 100%;||top: 50%;||left: 0;||&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; module_class=&#8221;form-section&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;rgba(255,255,255,0)&#8221; background_enable_image=&#8221;off&#8221; background_size=&#8221;contain&#8221; background_position=&#8221;center_left&#8221; z_index=&#8221;5&#8243; width=&#8221;100%&#8221; max_width=&#8221;100%&#8221; custom_padding=&#8221;0px||||false|false&#8221; background_last_edited=&#8221;on|phone&#8221; background_enable_image_phone=&#8221;off&#8221; global_module=&#8221;6229&#8243; saved_tabs=&#8221;all&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row disabled_on=&#8221;on|off|off&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; width=&#8221;100%&#8221; max_width=&#8221;100%&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;||0px||false|false&#8221; custom_padding=&#8221;||0px||false|false&#8221; scroll_scaling=&#8221;0|50|50|100|70|100|85%&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_image src=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/2020\/12\/heart.png&#8221; title_text=&#8221;heart&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][et_pb_text admin_label=&#8221;Your inbox wants some love.&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Nexa Regular||||||||&#8221; text_text_color=&#8221;#010101&#8243; text_font_size=&#8221;48px&#8221; text_orientation=&#8221;center&#8221; text_font_size_tablet=&#8221;&#8221; text_font_size_phone=&#8221;28px&#8221; text_font_size_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>Your inbox <strong>wants some love.<\/strong><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row disabled_on=&#8221;on|off|off&#8221; module_id=&#8221;email-optin&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;rgba(255,255,255,0.77)&#8221; width=&#8221;70%&#8221; custom_padding=&#8221;41px|60px|41px|60px|true|true&#8221; border_radii=&#8221;on|5px|5px|5px|5px&#8221; box_shadow_style=&#8221;preset1&#8243; box_shadow_horizontal=&#8221;2px&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text admin_label=&#8221;Stay informed with Webiotic latest&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Journal||||||||&#8221; text_text_color=&#8221;#2fa2d5&#8243; text_font_size=&#8221;45px&#8221; text_line_height=&#8221;1.3em&#8221; text_font_size_tablet=&#8221;&#8221; text_font_size_phone=&#8221;25px&#8221; text_font_size_last_edited=&#8221;on|phone&#8221; custom_css_before=&#8221;    width: 64px;||    height: 64px;||    background: url(https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/C-C_01A.png) no-repeat;||    background-size: 100%;||    content: %22%22;||    position: absolute;||    top: -66px;||    right: -86px;&#8221; global_colors_info=&#8221;{}&#8221;]Stay informed with Webiotic latest[\/et_pb_text][et_pb_text _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n\n<div class=\"wpcf7 no-js\" id=\"wpcf7-f9395-o1\" lang=\"en-US\" dir=\"ltr\" data-wpcf7-id=\"9395\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/webioticnew\/wp-json\/wp\/v2\/posts\/7695#wpcf7-f9395-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Contact form\" novalidate=\"novalidate\" data-status=\"init\">\n<div style=\"display: none;\">\n<input type=\"hidden\" name=\"_wpcf7\" value=\"9395\" \/>\n<input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.0.6\" \/>\n<input type=\"hidden\" name=\"_wpcf7_locale\" value=\"en_US\" \/>\n<input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f9395-o1\" \/>\n<input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/>\n<input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/div>\n<div class=\"row cus_dis\">\n\t<div class=\"col-md-5 padding-right\">\n\t\t<div class=\"form-group\">\n\t\t\t<p><label for=\"exampleInputEmail1\"><\/label><br \/>\n<!--input class=\"form-control\" type=\"text\" name=\"FNAME\" placeholder=\"First, introduce yourself\"--><span class=\"wpcf7-form-control-wrap\" data-name=\"FNAME\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text form-control\" aria-invalid=\"false\" placeholder=\"First, introduce yourself\" value=\"\" type=\"text\" name=\"FNAME\" \/><\/span><small id=\"emailHelp\" class=\"form-text text-muted\">No need for formalities (just your name)<\/small>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"col-md-5 padding-right\">\n\t\t<div class=\"form-group\">\n\t\t\t<p><label for=\"exampleInputEmail1\"><\/label><br \/>\n<!--input class=\"form-control\" type=\"email\" name=\"EMAIL\" placeholder=\"Email Address\" required--><span class=\"wpcf7-form-control-wrap\" data-name=\"EMAIL\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email form-control\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Email Address\" value=\"\" type=\"email\" name=\"EMAIL\" \/><\/span><small id=\"emailHelp\" class=\"form-text text-muted\">Ok, some need for formalities <\/small>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"col-md-2\" style=\"text-align: center;\">\n\t\t<p>(ohh, Intrigued!)\n\t\t<\/p>\n\t<\/div>\n\t<div class=\"col-md-12\" style=\" width:100%;\">\n\t\t<div class=\"form-group text-right\" style=\"display: block;\">\n\t\t\t<p><input class=\"btn btn-info\" type=\"submit\" value=\"join the list\" style=\"cursor: pointer;\" \/>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<style>.wpcf7-response-output {\n font-family: 'Nexa Regular',Helvetica,Arial,Lucida,sans-serif;\n font-size: 20px;\n font-weight: 700;\n}\n\t<\/style>\n<\/div><input type='hidden' class='wpcf7-pum' value='{\"closepopup\":false,\"closedelay\":0,\"openpopup\":false,\"openpopup_id\":0}' \/><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; disabled_on=&#8221;on|off|off&#8221; module_id=&#8221;next-step-section&#8221; module_class=&#8221;calendar-sections&#8221; _builder_version=&#8221;4.11.3&#8243; _module_preset=&#8221;default&#8221; background_enable_image=&#8221;off&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;20px||||false|false&#8221; global_module=&#8221;3218&#8243; saved_tabs=&#8221;all&#8221; locked=&#8221;off&#8221; collapsed=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row admin_label=&#8221;Featured Clients&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Nexa Regular||||||||&#8221; text_text_color=&#8221;#1e78cc&#8221; text_font_size=&#8221;18px&#8221; header_2_font=&#8221;Nexa Regular||||||||&#8221; header_2_text_align=&#8221;center&#8221; header_2_text_color=&#8221;#000000&#8243; header_2_font_size=&#8221;40px&#8221; text_orientation=&#8221;center&#8221; header_2_font_size_tablet=&#8221;&#8221; header_2_font_size_phone=&#8221;28px&#8221; header_2_font_size_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2 style=\"margin-bottom: 0;\">Featured Clients<\/h2>\n<p><a style=\"color: #1e78cc;\" href=\"\/clients\/\">View all &gt;<\/a>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_3,1_3,1_3&#8243; make_equal=&#8221;on&#8221; disabled_on=&#8221;on|off|off&#8221; module_class=&#8221;featured-images&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; width=&#8221;50%&#8221; width_tablet=&#8221;60%&#8221; width_phone=&#8221;100%&#8221; width_last_edited=&#8221;on|phone&#8221; module_alignment=&#8221;center&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; border_width_right=&#8221;1px&#8221; border_color_right=&#8221;#e8e8e8&#8243; border_width_right_tablet=&#8221;&#8221; border_width_right_phone=&#8221;0px&#8221; border_width_right_last_edited=&#8221;on|desktop&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_image src=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/trump.png&#8221; title_text=&#8221;trump&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;|20px|||false|false&#8221; border_width_right_tablet=&#8221;&#8221; border_width_right_phone=&#8221;0px&#8221; border_width_right_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_image src=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/labellamafia.png&#8221; title_text=&#8221;labellamafia&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; border_width_left=&#8221;1px&#8221; border_color_left=&#8221;#e8e8e8&#8243; border_width_left_tablet=&#8221;&#8221; border_width_left_phone=&#8221;0px&#8221; border_width_left_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_image src=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/star-new.png&#8221; title_text=&#8221;star-new&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;|||20px|false|false&#8221; border_width_left_tablet=&#8221;&#8221; border_width_left_phone=&#8221;0px&#8221; border_width_left_last_edited=&#8221;on|phone&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row disabled_on=&#8221;off|on|off&#8221; module_class=&#8221;featured-images-amp&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_image src=&#8221;https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/New-Project.png&#8221; title_text=&#8221;New Project&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.16&#8243; width=&#8221;90%&#8221; max_width=&#8221;1920px&#8221; module_alignment=&#8221;center&#8221; custom_padding=&#8221;50px||||false|false&#8221; border_color_top=&#8221;#dddddd&#8221; border_color_bottom=&#8221;#eeeeee&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_divider color=&#8221;#eeeeee&#8221; divider_position=&#8221;center&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; width=&#8221;100%&#8221; max_width=&#8221;500px&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;||100px||false|false&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_divider][et_pb_text admin_label=&#8221;So, what&#8217;s the next step?&#8221; module_class=&#8221;why-its&#8221; _builder_version=&#8221;4.16&#8243; text_font=&#8221;Nexa Regular||||||||&#8221; text_text_color=&#8221;#333333&#8243; text_font_size=&#8221;56px&#8221; text_orientation=&#8221;center&#8221; text_font_size_tablet=&#8221;&#8221; text_font_size_phone=&#8221;28px&#8221; text_font_size_last_edited=&#8221;on|desktop&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>So, what&#8217;s the <strong>next step?<\/strong><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_2,1_2&#8243; use_custom_gutter=&#8221;on&#8221; gutter_width=&#8221;2&#8243; make_equal=&#8221;on&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; width=&#8221;48%&#8221; width_tablet=&#8221;&#8221; width_phone=&#8221;&#8221; width_last_edited=&#8221;on|desktop&#8221; module_alignment=&#8221;center&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; custom_css_main_element=&#8221;margin: auto;&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text module_class=&#8221;talk-content&#8221; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; text_font=&#8221;Nexa Regular||||||||&#8221; text_text_color=&#8221;#000000&#8243; text_font_size=&#8221;21px&#8221; text_line_height=&#8221;1.3em&#8221; text_orientation=&#8221;right&#8221; module_alignment=&#8221;left&#8221; text_orientation_tablet=&#8221;&#8221; text_orientation_phone=&#8221;center&#8221; text_orientation_last_edited=&#8221;on|tablet&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>Talk with a real app developer<\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.16&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_button button_url=&#8221;@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjY2NiJ9fQ==@&#8221; button_text=&#8221;Free 15 min consultation&#8221; button_alignment=&#8221;left&#8221; button_alignment_tablet=&#8221;center&#8221; button_alignment_phone=&#8221;&#8221; button_alignment_last_edited=&#8221;on|phone&#8221; module_class=&#8221;calendar-btn&#8221; _builder_version=&#8221;4.19.2&#8243; _dynamic_attributes=&#8221;button_url&#8221; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_size=&#8221;15px&#8221; button_text_color=&#8221;#2fa2d5&#8243; button_bg_color=&#8221;#ffffff&#8221; button_border_width=&#8221;1px&#8221; button_border_color=&#8221;#2fa2d5&#8243; button_border_radius=&#8221;10px&#8221; button_font=&#8221;Nexa Regular|700|||||||&#8221; button_use_icon=&#8221;off&#8221; custom_padding=&#8221;15px|30px|15px|30px|true|true&#8221; button_text_color_last_edited=&#8221;off|desktop&#8221; global_colors_info=&#8221;{}&#8221; button_text_color__hover_enabled=&#8221;on|hover&#8221; button_text_color__hover=&#8221;#ffffff&#8221; button_bg_color__hover_enabled=&#8221;on|hover&#8221; button_bg_color__hover=&#8221;#2fa2d5&#8243; button_bg_enable_color__hover=&#8221;on&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Updated<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 11<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>App development can be a long and winding process that involves a wide spectrum of decisions. Should you develop an app for Android, iOS, or both?\u00a0 Should you create your app from scratch or use a generic web builder? Fortunately, today\u2019s technology in mobile app development offers solutions to help navigate and [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":7696,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[20],"tags":[],"class_list":["post-7695","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Progressive Web Apps: the Future of the Mobile Web | Webiotic<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Progressive Web Apps: the Future of the Mobile Web | Webiotic\" \/>\n<meta property=\"og:description\" content=\"UpdatedApp development can be a long and winding process that involves a wide spectrum of decisions. Should you develop an app for Android, iOS, or both?\u00a0 Should you create your app from scratch or use a generic web builder? Fortunately, today\u2019s technology in mobile app development offers solutions to help navigate and [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Webiotic\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-27T17:57:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-28T17:02:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-headler-webiotic.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vesko\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vesko\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Progressive Web Apps: the Future of the Mobile Web | Webiotic","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/","og_locale":"en_US","og_type":"article","og_title":"Progressive Web Apps: the Future of the Mobile Web | Webiotic","og_description":"UpdatedApp development can be a long and winding process that involves a wide spectrum of decisions. Should you develop an app for Android, iOS, or both?\u00a0 Should you create your app from scratch or use a generic web builder? Fortunately, today\u2019s technology in mobile app development offers solutions to help navigate and [&hellip;]","og_url":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/","og_site_name":"Webiotic","article_published_time":"2023-04-27T17:57:20+00:00","article_modified_time":"2023-04-28T17:02:43+00:00","og_image":[{"width":2000,"height":800,"url":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-headler-webiotic.jpg","type":"image\/jpeg"}],"author":"Vesko","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vesko","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/#article","isPartOf":{"@id":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/"},"author":{"name":"Vesko","@id":"https:\/\/architsingh.com\/webioticnew\/#\/schema\/person\/8f947edea45b8b5c233d0560045baef1"},"headline":"Progressive Web Apps: the Future of the Mobile Web","datePublished":"2023-04-27T17:57:20+00:00","dateModified":"2023-04-28T17:02:43+00:00","mainEntityOfPage":{"@id":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/"},"wordCount":4622,"commentCount":0,"publisher":{"@id":"https:\/\/architsingh.com\/webioticnew\/#organization"},"image":{"@id":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/#primaryimage"},"thumbnailUrl":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-headler-webiotic.jpg","articleSection":["App Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/","url":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/","name":"Progressive Web Apps: the Future of the Mobile Web | Webiotic","isPartOf":{"@id":"https:\/\/architsingh.com\/webioticnew\/#website"},"primaryImageOfPage":{"@id":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/#primaryimage"},"image":{"@id":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/#primaryimage"},"thumbnailUrl":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-headler-webiotic.jpg","datePublished":"2023-04-27T17:57:20+00:00","dateModified":"2023-04-28T17:02:43+00:00","breadcrumb":{"@id":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/#primaryimage","url":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-headler-webiotic.jpg","contentUrl":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/progressive-web-apps-headler-webiotic.jpg","width":2000,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/architsingh.com\/webioticnew\/progressive-web-apps-the-future-of-the-mobile-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/architsingh.com\/webioticnew\/"},{"@type":"ListItem","position":2,"name":"Progressive Web Apps: the Future of the Mobile Web"}]},{"@type":"WebSite","@id":"https:\/\/architsingh.com\/webioticnew\/#website","url":"https:\/\/architsingh.com\/webioticnew\/","name":"Webiotic","description":"360 Degree App Development &amp; Web Solutions Company","publisher":{"@id":"https:\/\/architsingh.com\/webioticnew\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/architsingh.com\/webioticnew\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/architsingh.com\/webioticnew\/#organization","name":"Webiotic","url":"https:\/\/architsingh.com\/webioticnew\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/architsingh.com\/webioticnew\/#\/schema\/logo\/image\/","url":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/checkout-logo.png","contentUrl":"https:\/\/architsingh.com\/webioticnew\/wp-content\/uploads\/checkout-logo.png","width":300,"height":68,"caption":"Webiotic"},"image":{"@id":"https:\/\/architsingh.com\/webioticnew\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/architsingh.com\/webioticnew\/#\/schema\/person\/8f947edea45b8b5c233d0560045baef1","name":"Vesko","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/architsingh.com\/webioticnew\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3706dd0eef834fbece7568edf58a3cb2fff932ede677d8843cf77474487083da?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3706dd0eef834fbece7568edf58a3cb2fff932ede677d8843cf77474487083da?s=96&d=mm&r=g","caption":"Vesko"},"url":"https:\/\/architsingh.com\/webioticnew\/team\/vesko\/"}]}},"_links":{"self":[{"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/posts\/7695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/comments?post=7695"}],"version-history":[{"count":0,"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/posts\/7695\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/media\/7696"}],"wp:attachment":[{"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/media?parent=7695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/categories?post=7695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/architsingh.com\/webioticnew\/wp-json\/wp\/v2\/tags?post=7695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}