{"id":1480,"date":"2022-05-10T10:24:26","date_gmt":"2022-05-10T10:24:26","guid":{"rendered":"https:\/\/pwa-for-wp.com\/docs\/?post_type=ht_kb&#038;p=1480"},"modified":"2022-07-06T04:42:18","modified_gmt":"2022-07-06T04:42:18","slug":"setting-up-visibility-in-pwa","status":"publish","type":"ht_kb","link":"https:\/\/pwa-for-wp.com\/docs\/article\/setting-up-visibility-in-pwa\/","title":{"rendered":"How to set up Visibility in PWA"},"content":{"rendered":"\n<p>We added APP visibility features where you can add APP visibility in include and exclude format.<\/p>\n\n\n\n<p>It\u2019s pretty easy for you to Visibility feature with PWA here are the steps:<\/p>\n\n\n\n<p><strong>Step 1:<\/strong> First  Install the <strong><a href=\"https:\/\/wordpress.org\/plugins\/pwa-for-wp\/\">PWA for WP &amp; AMP<\/a>&nbsp;<\/strong>plugin. <\/p>\n\n\n\n<p><strong>Step 2: <\/strong>After Installing the plugin click on the&nbsp;<strong>WordPress Dashboard<\/strong>&nbsp;-&gt; Navigate to&nbsp;the PWA&nbsp;option -&gt;Once you click on the <strong>Settings <\/strong>links it will redirect to the <strong>Features <\/strong>option here to enable the \u201c<strong>Visibility<\/strong>\u201d option. Click on the \u201c<strong>gear<\/strong>\u201d icon like below the screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"360\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-2-3-1024x360.png\" alt=\"\" class=\"wp-image-1488\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-2-3-1024x360.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-2-3-300x105.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-2-3-768x270.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-2-3-50x18.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-2-3-60x21.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-2-3-100x35.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-2-3.png 1064w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Step 3 \u2013&nbsp;<\/strong>Once you click on the gear icon you can access the Settings page.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Included On:<\/strong> By using Included On option users can select certain pages, posts, and post types on include the service worker app to show only on those pages, not on the full website  Once you select the Visibility Type option here is a list of the Post Type select as per your requirement and after that click on the \u201c<strong>Add<\/strong> \u201d button.<\/li><li><strong>Excluded On:<\/strong> By using Excluded On option users can select certain pages, posts, and post types on include the service worker app to not showing that pages. Once you select the Visibility Type option here is a list of the Post Type select as per your requirement and after that click on the \u201c<strong>Add<\/strong> \u201d button.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"499\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-3-1-1024x499.png\" alt=\"\" class=\"wp-image-1489\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-3-1-1024x499.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-3-1-300x146.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-3-1-768x374.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-3-1-50x24.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-3-1-60x29.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-3-1-100x49.png 100w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2022\/05\/p-3-1.png 1349w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions&nbsp;Just contact us&nbsp;<strong><a href=\"http:\/\/pwa-for-wp.com\/contact-us\/\">here<\/a>&nbsp;<\/strong>and we are always available for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We added APP visibility features where you can add APP visibility in include and exclude format. It\u2019s pretty easy for you to Visibility feature with PWA here are the steps: Step 1: First Install the PWA for WP &amp; AMP&nbsp;plugin. Step 2: After Installing the plugin click on the&nbsp;WordPress Dashboard&nbsp;-&gt;&#8230;<\/p>\n","protected":false},"author":3,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[6],"ht-kb-tag":[],"class_list":["post-1480","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-how-to"],"_links":{"self":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/comments?post=1480"}],"version-history":[{"count":6,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1480\/revisions"}],"predecessor-version":[{"id":1497,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/1480\/revisions\/1497"}],"wp:attachment":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/media?parent=1480"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=1480"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=1480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}