How to build a PWA + AMP: Google Lighthouse and Search Console Audit passed
Tags: pwa, amp, lighthouse, google
Published: 2020-02-11 14:18:56

<section data-field="body" class="e-content">
<section name="ec26" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="5057" id="5057" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">Summary:</strong><em class="markup--em markup--p-em"> In this page, I am going to explain how to build a PWA using AMP and get it verified by Google Lighthouse and Google Search Console AMP Audit. </em><a href="https://github.com/bravemaster619/pwa-amp-example" data-href="https://github.com/bravemaster619/pwa-amp-example" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"><em class="markup--em markup--p-em">Click here</em></a><em class="markup--em markup--p-em"> to see the github repository of working source code.</em></p><h4 name="3015" id="3015" class="graf graf--h4 graf-after--p">1. Build an AMP Page</h4><p name="b114" id="b114" class="graf graf--p graf-after--h4">There are many articles and documents about <a href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/?format=websites" data-href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/?format=websites" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">how to build AMP</a>s, so I’d like to skip the basic principles and knowledge of AMP.<br>However, if you don’t know AMP very well, that’s OK. There is a cool AMP builder tool ready for you (yes, it’s free). It is called <a href="https://mobirise.co/" data-href="https://mobirise.co/" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Mobirise</a>.</p><p name="2560" id="2560" class="graf graf--p graf-after--p">After you download and install Mobirise, you can start building your first AMP page. Just drag and drop your blocks to your page then customize them as you like. After you are done, click Publish button in the toolbar to export generated AMP source code to your local hard drive, FTP server or even a github repository.</p><p name="bb44" id="bb44" class="graf graf--p graf-after--p">Here is an example page and generated source code:</p><figure name="3c90" id="3c90" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 334px; max-height: 570px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 170.70000000000002%;"></div><img class="graf-image" data-image-id="1*UUluVzHC6Eg5gDiSAerQrA.png" data-width="334" data-height="570" alt="Example AMP" src="https://cdn-images-1.medium.com/max/800/1*UUluVzHC6Eg5gDiSAerQrA.png"></div></figure><pre name="566c" id="566c" class="graf graf--pre graf-after--figure">&lt;!DOCTYPE html&gt;<br>&lt;html amp &gt;<br>&lt;head&gt;<br>  &lt;!-- Site made with Mobirise Website Builder v4.12.0, https://mobirise.com --&gt;<br>  &lt;meta charset=&quot;UTF-8&quot;&gt;<br>  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;<br>  &lt;meta name=&quot;generator&quot; content=&quot;Mobirise v4.12.0, mobirise.com&quot;&gt;<br>  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, minimum-scale=1&quot;&gt;<br>  &lt;link rel=&quot;shortcut icon&quot; href=&quot;assets/images/logo1.png&quot; type=&quot;image/x-icon&quot;&gt;<br>  &lt;meta name=&quot;description&quot; content=&quot;How to build PWA using AMP and get verified by Google. Written by bravemaster619&quot;&gt;<br>  <br>  &lt;title&gt;How to build PWA using AMP and get verified by Google&lt;/title&gt;<br>  <br>&lt;link rel=&quot;canonical&quot; href=&quot;./&quot;&gt;<br> &lt;style amp-boilerplate&gt;body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}&lt;/style&gt;<br>&lt;noscript&gt;&lt;style amp-boilerplate&gt;body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}&lt;/style&gt;&lt;/noscript&gt;<br>&lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;<br> &lt;style amp-custom&gt; /* custom style omitted */&lt;/style&gt;<br>  &lt;script async  src=&quot;https://cdn.ampproject.org/v0.js&quot;&gt;&lt;/script&gt;<br>  &lt;script async custom-element=&quot;amp-analytics&quot; src=&quot;https://cdn.ampproject.org/v0/amp-analytics-0.1.js&quot;&gt;&lt;/script&gt;<br>  &lt;script async custom-element=&quot;amp-sidebar&quot; src=&quot;https://cdn.ampproject.org/v0/amp-sidebar-0.1.js&quot;&gt;&lt;/script&gt;<br>&lt;/head&gt;<br>&lt;body&gt;&lt;amp-sidebar id=&quot;sidebar&quot; class=&quot;cid-rQaZLG0MWg&quot; layout=&quot;nodisplay&quot; side=&quot;right&quot;&gt;<br>        &lt;div class=&quot;builder-sidebar&quot; id=&quot;builder-sidebar&quot;&gt;<br>            &lt;button on=&quot;tap:sidebar.close&quot; class=&quot;close-sidebar&quot;&gt;<br>                &lt;span&gt;&lt;/span&gt;<br>                &lt;span&gt;&lt;/span&gt;<br>            &lt;/button&gt;      <br>            &lt;ul class=&quot;navbar-nav nav-dropdown&quot; data-app-modern-menu=&quot;true&quot;&gt;&lt;li class=&quot;nav-item&quot;&gt;<br>                    &lt;a class=&quot;nav-link link text-primary display-7&quot; href=&quot;https://bravemaster619.github.io&quot;&gt;<br>                        About Me&lt;/a&gt;<br>                &lt;/li&gt;&lt;/ul&gt;<br>            &lt;div class=&quot;navbar-buttons mbr-section-btn&quot;&gt;&lt;a class=&quot;btn btn-sm btn-primary display-7&quot; href=&quot;mailto:bravemaster619@hotmail.com&quot;&gt;<br>                  Contact Me&lt;/a&gt;&lt;/div&gt;<br>      &lt;/div&gt;<br>    &lt;/amp-sidebar&gt;<br>  &lt;section class=&quot;menu horizontal-menu cid-rQaZLG0MWg&quot; id=&quot;menu2-1&quot;&gt;<br>    &lt;nav class=&quot;navbar navbar-dropdown navbar-expand-lg navbar-fixed-top&quot;&gt;<br>      &lt;div class=&quot;brand&quot;&gt;<br>          &lt;span class=&quot;brand-logo&quot;&gt;<br>              &lt;amp-img src=&quot;assets/images/logo1.png&quot; layout=&quot;responsive&quot; width=&quot;45.71808510638298&quot; height=&quot;45&quot; alt=&quot;Mobirise&quot; class=&quot;mobirise-loader&quot;&gt;<br>                  &lt;div placeholder=&quot;&quot; class=&quot;placeholder&quot;&gt;<br>                                &lt;div class=&quot;mobirise-spinner&quot;&gt;<br>                                    &lt;em&gt;&lt;/em&gt;<br>                                    &lt;em&gt;&lt;/em&gt;<br>                                    &lt;em&gt;&lt;/em&gt;<br>                                &lt;/div&gt;&lt;/div&gt;<br>              &lt;/amp-img&gt;<br>          &lt;/span&gt;<br>          &lt;p class=&quot;brand-name mbr-fonts-style mbr-bold display-5&quot;&gt;PWA - AMP&lt;/p&gt;<br>      &lt;/div&gt;<br>      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;<br>            &lt;ul class=&quot;navbar-nav nav-dropdown&quot; data-app-modern-menu=&quot;true&quot;&gt;&lt;li class=&quot;nav-item&quot;&gt;<br>                    &lt;a class=&quot;nav-link link text-primary display-7&quot; href=&quot;https://bravemaster619.github.io&quot;&gt;<br>                        About Me&lt;/a&gt;<br>                &lt;/li&gt;&lt;/ul&gt;<br>            &lt;div class=&quot;navbar-buttons mbr-section-btn&quot;&gt;&lt;a class=&quot;btn btn-sm btn-primary display-7&quot; href=&quot;mailto:bravemaster619@hotmail.com&quot;&gt;<br>                  Contact Me&lt;/a&gt;&lt;/div&gt;<br>      &lt;/div&gt;<br>      &lt;button on=&quot;tap:sidebar.toggle&quot; class=&quot;ampstart-btn hamburger sticky-but&quot;&gt;<br>        &lt;span&gt;&lt;/span&gt;<br>        &lt;span&gt;&lt;/span&gt;<br>        &lt;span&gt;&lt;/span&gt;<br>        &lt;span&gt;&lt;/span&gt;<br>    &lt;/button&gt;<br>    &lt;/nav&gt;<br>  &lt;!-- AMP plug --&gt;<br>    &lt;/section&gt;<br>&lt;section class=&quot;engine&quot;&gt;&lt;a href=&quot;https://mobirise.info/j&quot;&gt;website templates&lt;/a&gt;&lt;/section&gt;&lt;section class=&quot;header2 cid-rQaX7rw2b2&quot; id=&quot;header2-0&quot;&gt;<br><br>    &lt;div class=&quot;container&quot;&gt;<br>        &lt;div class=&quot;mbr-row mbr-justify-content-center&quot;&gt;<br>            &lt;div class=&quot;mbr-col-lg-8&quot;&gt;<br>                &lt;h1 class=&quot;mbr-fonts-style align-center mbr-bold display-1&quot;&gt;<br>                    This is PWA sample page using AMP&lt;/h1&gt;<br>                &lt;h3 class=&quot;mbr-fonts-style align-center display-5&quot;&gt;This page was built with Mobirise 4.12.0 by @bravemaster619&lt;/h3&gt;<br>                &lt;div class=&quot;mbr-text align-center&quot;&gt;<br>                    <br>                &lt;/div&gt;<br>                &lt;div class=&quot;mbr-section-btn align-center&quot;&gt;&lt;a class=&quot;btn btn-md btn-primary display-4&quot; href=&quot;https://mobirise.co&quot;&gt;START BUILDING AMP&lt;/a&gt;<br>                    &lt;a class=&quot;btn btn-md btn-warning display-4&quot; href=&quot;https://github.com/bravemaster619&quot;&gt;LEARN MORE&lt;/a&gt;&lt;/div&gt;<br>                &lt;amp-img src=&quot;assets/images/sana-potter.jpg&quot; alt=&quot;pwa built with amp&quot; width=&quot;731.2&quot; height=&quot;914&quot; layout=&quot;responsive&quot; class=&quot;mobirise-loader&quot; title=&quot;Sana Potter - example PWA using AMP&quot;&gt;<br>                    &lt;div placeholder=&quot;&quot; class=&quot;placeholder&quot;&gt;<br>                                &lt;div class=&quot;mobirise-spinner&quot;&gt;<br>                                    &lt;em&gt;&lt;/em&gt;<br>                                    &lt;em&gt;&lt;/em&gt;<br>                                    &lt;em&gt;&lt;/em&gt;<br>                                &lt;/div&gt;&lt;/div&gt;<br>                &lt;/amp-img&gt;<br>            &lt;/div&gt;<br>        &lt;/div&gt;<br>    &lt;/div&gt;<br>&lt;/section&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;</pre><h4 name="e696" id="e696" class="graf graf--h4 graf-after--pre">2. AMP Validation Check</h4><p name="0531" id="0531" class="graf graf--p graf-after--h4">You can test if your web app is a valid AMP in <a href="https://search.google.com/test/amp" data-href="https://search.google.com/test/amp" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Google AMP Test page</a>.</p><p name="8d58" id="8d58" class="graf graf--p graf-after--p">If your AMP page is valid it will show something like this:</p><figure name="c0de" id="c0de" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 368px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 52.5%;"></div><img class="graf-image" data-image-id="1*OsqF37ypBObdMS9A61VpCw.png" data-width="1721" data-height="904" alt="This page passed Google AMP Test" src="https://cdn-images-1.medium.com/max/800/1*OsqF37ypBObdMS9A61VpCw.png"></div></figure><p name="2da6" id="2da6" class="graf graf--p graf-after--figure">I strongly recommend to do this test before deploying your AMP. If your web app contains invalid AMP pages when Googlebot crawls your page, it will show error messages. You should fix them all and resubmit your changes to Google. It will take more than a few days for Google to parse and validate your AMP again.</p><h4 name="e516" id="e516" class="graf graf--h4 graf-after--p">3. Make it PWA</h4><p name="afff" id="afff" class="graf graf--p graf-after--h4">Now, we are going to make our AMP PWA — <a href="https://developers.google.com/web/progressive-web-apps" data-href="https://developers.google.com/web/progressive-web-apps" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Progressive Web App</a>. </p><p name="0e71" id="0e71" class="graf graf--p graf-after--p">To verify what’s missing in our web app, we can use <a href="https://developers.google.com/web/tools/lighthouse" data-href="https://developers.google.com/web/tools/lighthouse" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Google Lighthouse Audit.</a> You can use <a href="https://chrome.google.com/webstore/search/lighthouse" data-href="https://chrome.google.com/webstore/search/lighthouse" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">Lighthouse Chrome Extension</a> or simply run audit in your Chrome Developer Tools.</p><p name="833c" id="833c" class="graf graf--p graf-after--p"><em class="markup--em markup--p-em">Note: Lighthouse can not audit local pages. You should host your web app (in server or localhost)or </em><a href="https://pages.github.com/" data-href="https://pages.github.com/" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"><em class="markup--em markup--p-em">create a github page</em></a><em class="markup--em markup--p-em"> before audit.</em></p><figure name="69c3" id="69c3" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 347px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 49.6%;"></div><img class="graf-image" data-image-id="1*DV2x_0DK0N-S5mcHOHuatg.png" data-width="1912" data-height="948" data-is-featured="true" alt="How to audit your web app using Lighthouse" src="https://cdn-images-1.medium.com/max/800/1*DV2x_0DK0N-S5mcHOHuatg.png"></div></figure><p name="b07f" id="b07f" class="graf graf--p graf-after--figure">If you have installed and added Lighthouse Chrome extension, click lighthouse icon in the toolbar. If you didn’t install Lighthouse extension, open developer tools (by pressing F12 or Ctrl+Shift+I), select Audits tab and click “Generate report” button.</p><p name="a96c" id="a96c" class="graf graf--p graf-after--p">When audit is complete, Lighthouse will show you various scores and PWA validity.</p><figure name="a557" id="a557" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 760px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 108.5%;"></div><img class="graf-image" data-image-id="1*VV34cK1RYCeDkuCSKPV5pw.png" data-width="799" data-height="867" alt="Lighthouse example score" src="https://cdn-images-1.medium.com/max/800/1*VV34cK1RYCeDkuCSKPV5pw.png"></div></figure><p name="382c" id="382c" class="graf graf--p graf-after--figure">Unfortunately, our web app does not pass PWA audit. But you can get all the instructions and hints here.</p><p name="0d21" id="0d21" class="graf graf--p graf-after--p">First, let’s add <a href="https://developers.google.com/web/ilt/pwa/introduction-to-service-worker" data-href="https://developers.google.com/web/ilt/pwa/introduction-to-service-worker" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">service worker</a> and <a href="https://developers.google.com/web/fundamentals/web-app-manifest" data-href="https://developers.google.com/web/fundamentals/web-app-manifest" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">manifest.json</a>. This will solve the most problems, if not all.</p><p name="5513" id="5513" class="graf graf--p graf-after--p">You can generate your sw.js(javascript file for service worker) using <a href="https://developers.google.com/web/tools/workbox/modules/workbox-cli" data-href="https://developers.google.com/web/tools/workbox/modules/workbox-cli" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">workbox-cli</a>. You can find the full guide of how to generate sw.js for AMP in <a href="https://developers.google.com/web/ilt/pwa/lab-build-a-progressive-web-amp" data-href="https://developers.google.com/web/ilt/pwa/lab-build-a-progressive-web-amp" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">here</a>. Generated source code for sw.js might look like this one:</p><pre name="6052" id="6052" class="graf graf--pre graf-after--p">importScripts(&#39;https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js&#39;);<br><br>workbox.precaching.precacheAndRoute([<br>  {<br>    &quot;url&quot;: &quot;assets/images/hashes.json&quot;,<br>    &quot;revision&quot;: &quot;fe72232f35b744ddacbd0cb6afc6002e&quot;<br>  },<br>  {<br>    &quot;url&quot;: &quot;assets/images/logo-192.png&quot;,<br>    &quot;revision&quot;: &quot;8dc95f8b15eb89a49f484e24bec7772b&quot;<br>  },<br>  {<br>    &quot;url&quot;: &quot;assets/images/logo-512.png&quot;,<br>    &quot;revision&quot;: &quot;35cf42271eac1ed0c5c5823901f74db9&quot;<br>  },<br>  {<br>    &quot;url&quot;: &quot;assets/images/logo4.png&quot;,<br>    &quot;revision&quot;: &quot;58c9e4e45653bde53a04a5f7217ff007&quot;<br>  },<br>  {<br>    &quot;url&quot;: &quot;assets/images/sana-potter.jpg&quot;,<br>    &quot;revision&quot;: &quot;662f63c6e5daf6041b9e43bd820aecb5&quot;<br>  }<br>]);<br><br><strong class="markup--strong markup--pre-strong"><em class="markup--em markup--pre-em">self</em></strong>.addEventListener(&#39;install&#39;, event =&gt; {<br>   const urls = [<br>      &#39;https://cdn.ampproject.org/v0.js&#39;,<br>      &#39;https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js&#39;,<br>      &#39;https://cdn.ampproject.org/shadow-v0.js&#39;<br>   ];<br>   const cacheName = workbox.core.cacheNames.runtime;<br>   event.waitUntil(<strong class="markup--strong markup--pre-strong"><em class="markup--em markup--pre-em">caches</em></strong>.open(cacheName).then(cache =&gt; cache.addAll(urls)));<br>});<br><br>workbox.routing.registerRoute(/(.*)html|(.*)\/$/, workbox.strategies.networkFirst())<br>workbox.routing.registerRoute(/\.(?:js|css|png|gif|jpg|svg)$/,<br>   workbox.strategies.cacheFirst()<br>);<br>workbox.routing.registerRoute(/(.*)cdn\.ampproject\.org(.*)/,<br>   workbox.strategies.staleWhileRevalidate()<br>);</pre><p name="016c" id="016c" class="graf graf--p graf-after--pre">Add the <code class="markup--code markup--p-code">amp-install-serviceworker</code> JavaScript to the end of the HEAD section of each AMP page:</p><pre name="2488" id="2488" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">&lt;script async custom-element=&quot;amp-install-serviceworker&quot; src=&quot;https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js&quot;&gt;&lt;/script&gt;</code></pre><p name="9349" id="9349" class="graf graf--p graf-after--pre">And then add <code class="markup--code markup--p-code">amp-install-serviceworker</code>component to the bottom of page, right before the <code class="markup--code markup--p-code">&lt;/body&gt;</code> tag:</p><pre name="2e54" id="2e54" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">&lt;amp-install-serviceworker<br>  src=&quot;/sw.js&quot;<br>  layout=&quot;nodisplay&quot;<br>  data-iframe-src=&quot;/install-service-worker.html&quot;&gt;<br>&lt;/amp-install-serviceworker&gt;</code></pre><p name="6220" id="6220" class="graf graf--p graf-after--pre">Add install-service-worker.html:</p><pre name="5d57" id="5d57" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">&lt;!doctype html&gt;<br>&lt;html&gt;<br>  &lt;head&gt;<br>    &lt;title&gt;Installing service worker&lt;/title&gt;<br>    &lt;script type=&quot;text/javascript&quot;&gt;<br>      if (&#39;serviceWorker&#39; in navigator) {<br>        window.addEventListener(&#39;load&#39;, () =&gt; {<br>          navigator.serviceWorker.register(&#39;sw.js&#39;)<br>          .then(swReg =&gt; {<br>            console.log(&#39;Service Worker is registered&#39;, swReg);<br>          })<br>          .catch(err =&gt; {<br>            console.error(&#39;Service Worker Error&#39;, err);<br>          });<br>        });<br>      }<br>    &lt;/script&gt;<br>  &lt;/head&gt;<br>  &lt;body&gt;<br>  &lt;/body&gt;<br></code>&lt;/html&gt;</pre><p name="7b15" id="7b15" class="graf graf--p graf-after--pre">We need to add manifest.json now:</p><pre name="30fa" id="30fa" class="graf graf--pre graf-after--p">{<br>  &quot;short_name&quot;: &quot;PWA-AMP&quot;,<br>  &quot;name&quot;: &quot;PWA-AMP example&quot;,<br>  &quot;icons&quot;: [<br>    {<br>      &quot;src&quot;: &quot;assets/images/logo-192.png&quot;,<br>      &quot;sizes&quot;: &quot;192x192&quot;,<br>      &quot;type&quot;: &quot;image/png&quot;<br>    },<br>    {<br>      &quot;src&quot;: &quot;assets/images/logo-512.png&quot;,<br>      &quot;sizes&quot;: &quot;512x512&quot;,<br>      &quot;type&quot;: &quot;image/png&quot;<br>    }<br>  ],<br>  &quot;start_url&quot;: &quot;.&quot;,<br>  &quot;display&quot;: &quot;standalone&quot;,<br>  &quot;theme_color&quot;: &quot;#000000&quot;,<br>  &quot;background_color&quot;: &quot;#ffffff&quot;<br>}</pre><p name="4aaf" id="4aaf" class="graf graf--p graf-after--pre"><em class="markup--em markup--p-em">Note: You have to prepare 512</em>x<em class="markup--em markup--p-em">512 and 192</em>x<em class="markup--em markup--p-em">192 png files for </em><a href="https://developers.google.com/web/tools/lighthouse/audits/custom-splash-screen" data-href="https://developers.google.com/web/tools/lighthouse/audits/custom-splash-screen" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"><em class="markup--em markup--p-em">splash screen</em></a><em class="markup--em markup--p-em"> and </em><a href="https://developers.google.com/web/tools/lighthouse/audits/manifest-contains-192px-icon" data-href="https://developers.google.com/web/tools/lighthouse/audits/manifest-contains-192px-icon" class="markup--anchor markup--p-anchor" rel="noopener" target="_blank"><em class="markup--em markup--p-em">icon</em></a><em class="markup--em markup--p-em"> of your web app. They should be </em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">PNG</em></strong><em class="markup--em markup--p-em"> files in </em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">correct</em></strong><em class="markup--em markup--p-em"> </em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">sizes</em></strong><em class="markup--em markup--p-em">.</em></p><p name="4265" id="4265" class="graf graf--p graf-after--p">Now, let’s link manifest.json to index.html. Add the following tag to HEAD section of index.html:</p><pre name="7e98" id="7e98" class="graf graf--pre graf-after--p">&lt;link rel=&quot;manifest&quot; href=&quot;/manifest.json&quot;&gt;</pre><p name="7e34" id="7e34" class="graf graf--p graf-after--pre">Next, run Lighthouse audit again:</p><figure name="b099" id="b099" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 767px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 109.5%;"></div><img class="graf-image" data-image-id="1*r3BiR43RdvpFo6_rVliCWw.png" data-width="800" data-height="876" alt="service worker registered in Lighthouse PWA test" src="https://cdn-images-1.medium.com/max/800/1*r3BiR43RdvpFo6_rVliCWw.png"></div></figure><p name="86cb" id="86cb" class="graf graf--p graf-after--figure">Almost done. You can see service worker and manifest.json are working correctly. All we need to do is add the following meta tags to HEAD section for theme color and apple touch icon:</p><pre name="44dc" id="44dc" class="graf graf--pre graf-after--p">&lt;meta name=&quot;theme-color&quot; content=&quot;#9FA8DA&quot;/&gt;<br>&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;assets/images/logo-192.png&quot;&gt;</pre><p name="c85d" id="c85d" class="graf graf--p graf-after--pre">And voila! Our AMP finally passed Google lighthouse PWA audit:</p><figure name="c228" id="c228" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 554px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 79.2%;"></div><img class="graf-image" data-image-id="1*ov28yZ9YnCSS2hn7oT4FcQ.png" data-width="777" data-height="615" src="https://cdn-images-1.medium.com/max/800/1*ov28yZ9YnCSS2hn7oT4FcQ.png"></div></figure><p name="9ad6" id="9ad6" class="graf graf--p graf-after--figure"><em class="markup--em markup--p-em">Note: If http to https redirect test fails, add the following to .htaccess file:</em></p><pre name="81ba" id="81ba" class="graf graf--pre graf-after--p">RewriteEngine On<br>RewriteCond %{SERVER_PORT} !^443$<br>RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R,L]</pre><h4 name="45db" id="45db" class="graf graf--h4 graf-after--pre">4. AMP in Google Search Console</h4><p name="8ec4" id="8ec4" class="graf graf--p graf-after--h4"><em class="markup--em markup--p-em">Important: Don’t forget AMP check before deploying your web app.</em></p><p name="185e" id="185e" class="graf graf--p graf-after--p">If you add your AMP to your search console, AMP tab will be added to sidebar:</p><figure name="f45e" id="f45e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 385px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.00000000000001%;"></div><img class="graf-image" data-image-id="1*xowGH3r_z0q97IV247HWnw.png" data-width="1575" data-height="866" alt="AMP added to Google Search Console Sidebar" src="https://cdn-images-1.medium.com/max/800/1*xowGH3r_z0q97IV247HWnw.png"></div></figure><p name="f307" id="f307" class="graf graf--p graf-after--figure">When Googlebot crawls your page, it will check AMP validity of your web app. If validity check fails, Google will let you know what is wrong with your web app.</p><figure name="7699" id="7699" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 193px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 27.500000000000004%;"></div><img class="graf-image" data-image-id="1*MHlWXC5Vo4csogpFfoRxNQ.png" data-width="949" data-height="261" alt="AMP Error" src="https://cdn-images-1.medium.com/max/800/1*MHlWXC5Vo4csogpFfoRxNQ.png"></div></figure><p name="f4dc" id="f4dc" class="graf graf--p graf-after--figure">If that happens, you need to fix all errors and submit changes to Google to let it check your web app again. But it will take 3 ~ 4 days to complete. Google will send you a message once your web app passed AMP audit.</p><figure name="e3e3" id="e3e3" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 397px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.699999999999996%;"></div><img class="graf-image" data-image-id="1*v_G7dpLu0YWAsxtPhbTSwA.png" data-width="970" data-height="550" alt="Google Messages for AMP" src="https://cdn-images-1.medium.com/max/800/1*v_G7dpLu0YWAsxtPhbTSwA.png"></div></figure><h4 name="af9b" id="af9b" class="graf graf--h4 graf-after--figure">Useful Links:</h4><ul class="postList"><li name="f99a" id="f99a" class="graf graf--li graf-after--h4"><a href="https://github.com/bravemaster619/pwa-amp-example" data-href="https://github.com/bravemaster619/pwa-amp-example" class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">Github repository for working source code</a></li><li name="e9ab" id="e9ab" class="graf graf--li graf-after--li"><a href="https://bravemaster619.github.io/pwa-amp-example/" data-href="https://bravemaster619.github.io/pwa-amp-example/" class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">Example Page</a></li><li name="03c5" id="03c5" class="graf graf--li graf-after--li"><a href="https://search.google.com/test/amp?id=6olOIcayIMqIsSI3-ChD7g" data-href="https://search.google.com/test/amp?id=6olOIcayIMqIsSI3-ChD7g" class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">AMP Test Result</a></li><li name="2977" id="2977" class="graf graf--li graf-after--li graf--trailing"><a href="https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fbravemaster619.github.io%2Fpwa-amp-example%2Findex.html&amp;strategy=mobile&amp;category=performance&amp;category=accessibility&amp;category=best-practices&amp;category=seo&amp;category=pwa&amp;utm_source=lh-chrome-ext" data-href="https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fbravemaster619.github.io%2Fpwa-amp-example%2Findex.html&amp;strategy=mobile&amp;category=performance&amp;category=accessibility&amp;category=best-practices&amp;category=seo&amp;category=pwa&amp;utm_source=lh-chrome-ext" class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">Google Lighthouse Report</a></li></ul></div></div></section>
</section>