{"id":14934,"date":"2024-01-14T00:52:14","date_gmt":"2024-01-14T05:52:14","guid":{"rendered":"https:\/\/buzapps.net\/info\/?post_type=knowledgebase&#038;p=14934"},"modified":"2024-02-05T16:40:25","modified_gmt":"2024-02-05T21:40:25","slug":"progressive-web-apps-pwas","status":"publish","type":"knowledgebase","link":"https:\/\/buzapps.net\/info\/knowledgebase\/app-features\/progressive-web-apps-pwas\/","title":{"rendered":"Progressive Web Apps (PWAs)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>A Progressive Web App is a web application that has native app capabilities. It has features like push notifications, and app icons can be added to iOS and Android devices. Plus, PWA\u2019s work on desktop devices! <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A Progressive Web App will help you avoid the headache of dealing with App Stores while giving you engaging features of native apps! <a href=\"https:\/\/buzapps.net\/info\/were-now-creating-progressive-web-apps-pwas\/\">Click here<\/a> for more information on the benefits of PWAs. <\/p>\n\n\n\n<iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/HybLgWsJsj4?si=RxjPVrbPwjAbap5s\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"section-wrapper\" data-id=\"iWdV1r\"><section class=\"wp-block-gutenverse-section guten-element guten-section guten-iWdV1r layout-boxed align-stretch\"><div class=\"guten-background-overlay\"><\/div><div class=\"guten-shape-divider guten-shape-divider-top\"><\/div><div class=\"guten-shape-divider guten-shape-divider-bottom\"><\/div><div class=\"guten-container guten-column-gap-default\">\n<div class=\"wp-block-gutenverse-column guten-element guten-column guten-cneh6Q\"><div class=\"guten-background-overlay\"><\/div><div class=\"sticky-wrapper\" data-id=\"cneh6Q\"><div class=\"guten-column-wrapper\">\n<h3 class=\"wp-block-heading\">PWA On A Mobile Device<\/h3>\n<\/div><\/div><\/div>\n<\/div><\/section><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">On a <strong>mobile device<\/strong>, your Progressive Web App will look and perform similar to how it would as a native iOS and Android app.  The difference being it will be accessible via the web. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Whether on a mobile or desktop device, <strong>users can access your PWA from your website name<\/strong>.  For example, they would simply go to: yoursite.com\/myapp.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See the below screenshot from an iPhone.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"400\" height=\"866\" src=\"https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/02\/pwa-sample.jpg\" alt=\"\" class=\"wp-image-15212\" srcset=\"https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/02\/pwa-sample.jpg 400w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/02\/pwa-sample-139x300.jpg 139w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"section-wrapper\" data-id=\"6GtekZ\"><section class=\"wp-block-gutenverse-section guten-element guten-section guten-6GtekZ layout-boxed align-stretch\"><div class=\"guten-background-overlay\"><\/div><div class=\"guten-shape-divider guten-shape-divider-top\"><\/div><div class=\"guten-shape-divider guten-shape-divider-bottom\"><\/div><div class=\"guten-container guten-column-gap-default\">\n<div class=\"wp-block-gutenverse-column guten-element guten-column guten-bC0bXj\"><div class=\"guten-background-overlay\"><\/div><div class=\"sticky-wrapper\" data-id=\"bC0bXj\"><div class=\"guten-column-wrapper\">\n<h3 class=\"wp-block-heading\">PWA On A Desktop Device<\/h3>\n<\/div><\/div><\/div>\n<\/div><\/section><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Below is a sample of how the PWA will be displayed <strong>on a desktop device<\/strong>.  It will have all of the functionality of the mobile device but contain a wider screen for desktop usage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The desktop version of the PWA <strong>can also contain your<\/strong> <strong>App Logo and QR Code <\/strong>on the left-hand-side of the PWA so that Desktop users can easily get to your mobile phone version by <strong>scanning the QR Code<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"780\" src=\"https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_04-1024x780.jpg\" alt=\"\" class=\"wp-image-14973\" srcset=\"https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_04-1024x780.jpg 1024w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_04-300x229.jpg 300w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_04-768x585.jpg 768w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_04.jpg 1054w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"section-wrapper\" data-id=\"xoZuM3\"><section class=\"wp-block-gutenverse-section guten-element guten-section guten-xoZuM3 layout-boxed align-stretch\"><div class=\"guten-background-overlay\"><\/div><div class=\"guten-shape-divider guten-shape-divider-top\"><\/div><div class=\"guten-shape-divider guten-shape-divider-bottom\"><\/div><div class=\"guten-container guten-column-gap-default\">\n<div class=\"wp-block-gutenverse-column guten-element guten-column guten-msXEJZ\"><div class=\"guten-background-overlay\"><\/div><div class=\"sticky-wrapper\" data-id=\"msXEJZ\"><div class=\"guten-column-wrapper\">\n<h3 class=\"wp-block-heading\">Getting Started<\/h3>\n<\/div><\/div><\/div>\n<\/div><\/section><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">To get started, go the the <strong>App Manager<\/strong>. After selecting your app, select <strong>PWA Creator<\/strong>, in the left-hand-side menu under <strong>Modules<\/strong>.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>PWA NOT ACTIVATED FOR YOUR ACCOUNT<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If your account <strong>does not<\/strong> <strong>have<\/strong> PWA activated, you will see a message stating <strong>Your app isn&#8217;t activated for PWA<\/strong>.  If you would like PWA activated for your app, <a href=\"https:\/\/buzapps.net\/info\/ticket\/\">click here<\/a> to Open A Ticket.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"39\" src=\"https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_01-1024x39.png\" alt=\"\" class=\"wp-image-14943\" srcset=\"https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_01-1024x39.png 1024w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_01-300x11.png 300w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_01-768x29.png 768w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_01-1536x59.png 1536w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_01.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>PWA ACTIVATED FOR YOUR ACCOUNT<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If your account have <strong>PWA Activated<\/strong>, you will see the <strong>PWA Dashboard<\/strong>. We entered all of the appropriate PWA settings when we enabled your PWA.  We do not recommend changing any of settings unless you consult with us first.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"521\" src=\"https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_02-1024x521.jpg\" alt=\"\" class=\"wp-image-14944\" srcset=\"https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_02-1024x521.jpg 1024w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_02-300x153.jpg 300w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_02-768x390.jpg 768w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_02.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>PWA DETAILS<\/strong> &#8211; This section enables you to change the name, keywords, colors, etc. of the PWA.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>PWA PUSH SUBSCRIBE DETAILS<\/strong> &#8211; In this section, you can edit the colors, and verbiage of Push Notifications that are sent via the PWA.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>PWA COOKIE CONSENT DETAILS<\/strong> &#8211; The Cookie Consent section enables you to change the text of the Cookie Consent that is displayed to users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>GENERATE &amp; PUBLISH PWA<\/strong> &#8211; This section should only be used when the PWA needs to be re-generated.  You should not edit this section unless advised by us.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>PWA CUSTOM CSS<\/strong> &#8211; In the Custom CSS section, you can add custom code that would enable you to affect the display of the PWA.  You&#8217;re most likely going to see code entered here by us.  You should not remove\/edit the code unless we advise.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>PWA LINK <\/strong>&#8211; This is the link and QR Code of the PWA.  It is highly recommended that you do not edit the link url (this can cause issues with your PWA.<\/p>\n\n\n\n<div class=\"section-wrapper\" data-id=\"wPdviz\"><section class=\"wp-block-gutenverse-section guten-element guten-section guten-wPdviz layout-boxed align-stretch\"><div class=\"guten-background-overlay\"><\/div><div class=\"guten-shape-divider guten-shape-divider-top\"><\/div><div class=\"guten-shape-divider guten-shape-divider-bottom\"><\/div><div class=\"guten-container guten-column-gap-default\">\n<div class=\"wp-block-gutenverse-column guten-element guten-column guten-caKaZw\"><div class=\"guten-background-overlay\"><\/div><div class=\"sticky-wrapper\" data-id=\"caKaZw\"><div class=\"guten-column-wrapper\">\n<h3 class=\"wp-block-heading\">PWA Links \/ URL&#8217;s<\/h3>\n<\/div><\/div><\/div>\n<\/div><\/section><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>default link to your PWA<\/strong> will be something like this: https:\/\/apps.buzapps.net\/pwapp\/659hf3a382\/index.html<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To promote your app, you can share your <strong>PWA link<\/strong> and <strong>QR Code<\/strong> that is in the <strong>PWA Dashboard<\/strong> in the <strong>App Manager<\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To make it easier for users to access your PWA, you may want to <strong>create a<\/strong> <strong>Re-Direct with your website name<\/strong>.  This way, your users can go to something like <strong>yoursitename.com\/myapp<\/strong>, they will <strong>automatically be redirected to your PWA<\/strong> <strong>link<\/strong>.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;re unsure of how to do this and\/or do not have a Domain name, feel free to <a href=\"https:\/\/buzapps.net\/info\/contact-us\/\">contact us<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Another option is to use a <strong>URL shortener<\/strong> (from sites like <a href=\"https:\/\/t.ly\/\" target=\"_blank\" rel=\"noreferrer noopener\">T.ly<\/a>), and send the shortened url to your users.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"336\" src=\"https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_03-1024x336.jpg\" alt=\"\" class=\"wp-image-14959\" srcset=\"https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_03-1024x336.jpg 1024w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_03-300x99.jpg 300w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_03-768x252.jpg 768w, https:\/\/buzapps.net\/info\/wp-content\/uploads\/2024\/01\/knowledgebase_pwa_03.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Progressive Web App is a web application that has native app capabilities. It has features like push notifications, and app icons can be added to iOS and Android devices. Plus, PWA\u2019s work on desktop devices! A Progressive Web App will help you avoid the headache of dealing with App Stores while giving you engaging features of native apps! Click here for more information on the benefits of PWAs. On a mobile device, your Progressive Web App will look and perform similar to how it would as a native iOS and Android app. The difference being it will be accessible<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","knowledgebase_cat":[33],"class_list":["post-14934","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-app-features"],"_links":{"self":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/14934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/comments?post=14934"}],"version-history":[{"count":39,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/14934\/revisions"}],"predecessor-version":[{"id":15254,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/14934\/revisions\/15254"}],"wp:attachment":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/media?parent=14934"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase_cat?post=14934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}