{"id":50,"date":"2019-04-16T12:37:28","date_gmt":"2019-04-16T12:37:28","guid":{"rendered":"http:\/\/pwa-for-wp.com\/docs\/?post_type=ht_kb&#038;p=50"},"modified":"2019-10-18T13:26:16","modified_gmt":"2019-10-18T13:26:16","slug":"setting-up-precaching-in-pwa","status":"publish","type":"ht_kb","link":"https:\/\/pwa-for-wp.com\/docs\/article\/setting-up-precaching-in-pwa\/","title":{"rendered":"Setting up Precaching in PWA"},"content":{"rendered":"<p><strong>Introduction to Precaching:&nbsp;<\/strong>One of the most important features of PWAs is the ability to load fast and to work on slow network conditions or even offline. To achieve this, we can use a service worker to precache the app and, when available, use the network only to fetch necessary data.<\/p>\n<p>In our PWA for WP &amp; AMP plugin, we&#8217;ve implemented the Pre-caching functionality which helps you to cache the content.<\/p>\n<p><strong>There are two ways you can cache the content&nbsp;<\/strong><\/p>\n<ol>\n<li><a href=\"https:\/\/pwa-for-wp.com\/docs\/article\/setting-up-precaching-in-pwa\/#1-automatic\">Automatic<\/a><\/li>\n<li><a href=\"https:\/\/pwa-for-wp.com\/docs\/article\/setting-up-precaching-in-pwa\/#2-manual\">Manual<\/a><\/li>\n<\/ol>\n<h4><strong>1) Automatic<\/strong><\/h4>\n<ul>\n<li>You will find this option in the <strong>WordPress Dashboard<\/strong> -&gt; <strong>PWA<\/strong> -&gt; <strong>Settings<\/strong> -&gt; <strong>Features<\/strong> -&gt; Enable &#8220;<strong>Pre Caching&#8221; <\/strong>option<strong> -&gt; <\/strong>Click on the &#8220;<strong>gear<\/strong>&#8221; icon like as below the screenshot<strong>.&nbsp;<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-504\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/3-1.png\" alt=\"\" width=\"1076\" height=\"503\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/3-1.png 1076w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/3-1-300x140.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/3-1-768x359.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/3-1-1024x479.png 1024w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/3-1-50x23.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/3-1-60x28.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/3-1-100x47.png 100w\" sizes=\"auto, (max-width: 1076px) 100vw, 1076px\" \/><\/p>\n<ul>\n<li>Once you click on gear icon you can access the Settings page. By enabling <strong>Automatic<\/strong> option you can cache the Post, Page and Custom Post Type and also you can set the number of posts which you want to cache.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-506\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/4-2.png\" alt=\"\" width=\"835\" height=\"444\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/4-2.png 835w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/4-2-300x160.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/4-2-768x408.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/4-2-50x27.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/4-2-60x32.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/4-2-100x53.png 100w\" sizes=\"auto, (max-width: 835px) 100vw, 835px\" \/><\/p>\n<h4><strong>2) Manual<\/strong><\/h4>\n<ul>\n<li>You will find this option in the <strong>WordPress Dashboard<\/strong> -&gt; <strong>PWA<\/strong> -&gt; <strong>Settings<\/strong> -&gt; <strong>Features<\/strong> -&gt; Enable &#8220;<strong>Pre Caching&#8221; <\/strong>option<strong> -&gt; <\/strong>Click on the &#8220;<strong>gear<\/strong>&#8221; icon.Once you click on gear icon you can access the Settings page. By enabling <strong>Manual<\/strong> option, you can directly add the URLs which you want to get the cache.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-508\" src=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/5-1.png\" alt=\"\" width=\"828\" height=\"443\" srcset=\"https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/5-1.png 828w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/5-1-300x161.png 300w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/5-1-768x411.png 768w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/5-1-50x27.png 50w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/5-1-60x32.png 60w, https:\/\/pwa-for-wp.com\/docs\/wp-content\/uploads\/2019\/04\/5-1-100x54.png 100w\" sizes=\"auto, (max-width: 828px) 100vw, 828px\" \/><\/p>\n<p style=\"background-color: #ffdddd; border-left: 2px solid #f44336; padding: 10px;\"><strong>Note:<\/strong> You can cache as many posts as you want but it will be better if you use 10 posts for better performance.<\/p>\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n<p>We hope we\u2019ve clear your doubts in case If you have any feedback or questions, Just contact us&nbsp;<strong><a href=\"http:\/\/pwa-for-wp.com\/contact-us\/\">here<\/a><\/strong>&nbsp;and we are always available for you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to Precaching:&nbsp;One of the most important features of PWAs is the ability to load fast and to work on slow network conditions or even offline. To achieve this, we can use a service worker to precache the app and, when available, use the network only to fetch necessary data&#8230;.<\/p>\n","protected":false},"author":3,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[4],"ht-kb-tag":[],"class_list":["post-50","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-getting-started"],"_links":{"self":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/50","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=50"}],"version-history":[{"count":21,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/50\/revisions"}],"predecessor-version":[{"id":629,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb\/50\/revisions\/629"}],"wp:attachment":[{"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/media?parent=50"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=50"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/pwa-for-wp.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}