{"id":2063,"date":"2019-07-20T21:07:07","date_gmt":"2019-07-20T21:07:07","guid":{"rendered":"https:\/\/www.codeastar.com\/?p=2063"},"modified":"2019-07-20T21:07:22","modified_gmt":"2019-07-20T21:07:22","slug":"pwa-create-easy-progressive-web-app-with-react","status":"publish","type":"post","link":"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/","title":{"rendered":"PWA &#8211; Create Easy Progressive Web App with React"},"content":{"rendered":"\n<p>Nowadays, using smart mobile is a part of our daily life. People use mobile apps to do things they want to do, messaging, shopping, reading, learning, and the list goes on. In order to enter the mobile users market, companies need to spend time and effort to create an app then publish it on Google Play or Mac App Store. While websites can be built easier and reached by more audiences. What if&#8230; What if we combine the convenience of apps and the reach of webs? So we have &#8212; Progressive Web App (PWA).  <\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\">What is Progressive Web App?<\/h3>\n\n\n\n<p>As we mentioned earlier, PWA is a type of mobile app which works like ordinary apps and reaches like ordinary webs. A PWA can be installed on our mobile with an app icon, just likes other apps in our phone. It is fast and accessible in offline mode. And since it can be installed directly by entering a web url, instead of using Play \/ App Store to search and download.  It is easier for people to add the app to their phone.<\/p>\n\n\n\n<p>Ain&#8217;t it attractive? Yes! But what do we need to build a PWA? HTML, JavaScript and CSS. Wow, it sounds easy! Yes, then what are we waiting for? <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PWA Step-by-Step<\/h3>\n\n\n\n<p>We used React to build a <a href=\"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/\">weather forecast frontend<\/a> in past. And we know how React can make the job done in an easy and component based way. So we decide to use React agto build our PWA. But before we move to step 1, there is a step 0. The reference links for PWA:<\/p>\n\n\n\n<ul><li><a rel=\"noreferrer noopener\" aria-label=\"Google's PWA development guide (opens in a new tab)\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/codelabs\/your-first-pwapp\" target=\"_blank\">Google&#8217;s Progressive Web Apps development guide<\/a><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"React's Progressive Web Apps development guide (opens in a new tab)\" href=\"https:\/\/facebook.github.io\/create-react-app\/docs\/making-a-progressive-web-app\" target=\"_blank\">React&#8217;s Progressive Web Apps development guide<\/a><\/li><li><a href=\"https:\/\/facebook.github.io\/create-react-app\/docs\/deployment\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"React's deployment guide (opens in a new tab)\">React&#8217;s deployment guide<\/a><\/li><\/ul>\n\n\n\n<p>You can take a look on above links to find more details about PWA. Or you can go straightly with our steps to build a PWA. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create a React web app<\/h3>\n\n\n\n<p>Let&#8217;s use <em>create-react-app <\/em>command to create our React template, <em>pwa_funhouse<\/em>!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$npx create-react-app pwa_funhouse<\/code><\/pre>\n\n\n\n<p>Then we start our <em>pwa_funhouse <\/em>web app.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$cd pwa_funhouse\n$yarn start<\/code><\/pre>\n\n\n\n<p>You may notice that I use <a rel=\"noreferrer noopener\" aria-label=\"yarn (opens in a new tab)\" href=\"https:\/\/yarnpkg.com\" target=\"_blank\">yarn<\/a> instead of <a rel=\"noreferrer noopener\" aria-label=\"npm (opens in a new tab)\" href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\">npm<\/a> to start the React app. As I find the Facebook created package manager, yarn, out performs npm in speed and stability (you can still use npm by the way).<\/p>\n\n\n\n<p>After running the start command, it will pop out the <em>pwa_funhouse <\/em>app on your default browser. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2074\" data-permalink=\"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/pwa1\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa1.png?fit=528%2C520&amp;ssl=1\" data-orig-size=\"528,520\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"pwa1\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa1.png?fit=300%2C295&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa1.png?fit=528%2C520&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"528\" height=\"520\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa1.png?resize=528%2C520&#038;ssl=1\" alt=\"PWA starter app\" class=\"wp-image-2074\" srcset=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa1.png?w=528&amp;ssl=1 528w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa1.png?resize=300%2C295&amp;ssl=1 300w\" sizes=\"(max-width: 528px) 100vw, 528px\" data-recalc-dims=\"1\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Check rather our app is PWA ready<\/h3>\n\n\n\n<p>If your default browser is not Chrome, let&#8217;s open a Chrome browser and run our app on it. As we will use <a rel=\"noreferrer noopener\" aria-label=\"Lighthouse (opens in a new tab)\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\" target=\"_blank\">Lighthouse<\/a>, the audit tool on Chrome,  to check our PWA readiness. <\/p>\n\n\n\n<p>On your Chrome browser, open the &#8220;<em>Developer tools<\/em>&#8221; option, select the &#8220;<em>Audits<\/em>&#8221; tab. Then you will see the Lighthouse tool there.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-attachment-id=\"2076\" data-permalink=\"https:\/\/www.codeastar.com\/lighthouse2\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse2.png?fit=1078%2C340&amp;ssl=1\" data-orig-size=\"1078,340\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"lighthouse2\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse2.png?fit=300%2C95&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse2.png?fit=1024%2C323&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"323\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse2.png?resize=1024%2C323&#038;ssl=1\" alt=\"Lighthouse\" class=\"wp-image-2076\" srcset=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse2.png?resize=1024%2C323&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse2.png?resize=300%2C95&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse2.png?resize=768%2C242&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse2.png?w=1078&amp;ssl=1 1078w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Press the &#8220;<em>Run audits<\/em>&#8221; at the bottom. It starts auditing our app, then displays the results. There are different kind of results, like &#8220;Accessibility&#8221; and &#8220;SEO&#8221;. But what we need to look at, is the &#8220;Progressive Web App&#8221; result. Once we click on it, it shows us many problematic issues:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2077\" data-permalink=\"https:\/\/www.codeastar.com\/lighthouse-pwa\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse-pwa-e1562603940328.png?fit=600%2C407&amp;ssl=1\" data-orig-size=\"600,407\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"lighthouse pwa\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse-pwa-e1562603940328.png?fit=300%2C204&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse-pwa-e1562603940328.png?fit=600%2C407&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"600\" height=\"407\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse-pwa-e1562603940328.png?resize=600%2C407&#038;ssl=1\" alt=\"PWA lighthouse result 1\" class=\"wp-image-2077\" data-recalc-dims=\"1\"\/><\/figure><\/div>\n\n\n\n<p>Don&#8217;t worry, we are going to clear them on next step.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Clear the PWA issues<\/h3>\n\n\n\n<p>There are several issues found by Lighthouse, let&#8217;s clear those easy ones first.  <\/p>\n\n\n\n<ul><li>Web app manifest does not meet the installability requirements<ul><li>Failures: Manifest does not have a PNG icon of at least 192px<\/li><\/ul><\/li><li>Is not configured for a custom splash screen <ul><li>Failures: Manifest does not have a PNG icon of at least 512px. <\/li><\/ul><\/li><\/ul>\n\n\n\n<p>From the above messages, we know there are missing icons for our app. You can download icon images from my source <a href=\"https:\/\/github.com\/codeastar\/pwa_funhouse\/tree\/source\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">here<\/a> and put them in &#8220;<em>public\/images\/icons<\/em>&#8221; folder. Then update the <em>icons<\/em> part from the &#8220;<em>public\/manifest.json<\/em>&#8221; file to:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  \"icons\": [{\n    \"src\": \".\/images\/icons\/icon-128x128.png\",\n      \"sizes\": \"128x128\",\n      \"type\": \"image\/png\"\n    }, {\n      \"src\": \".\/images\/icons\/icon-144x144.png\",\n      \"sizes\": \"144x144\",\n      \"type\": \"image\/png\"\n    }, {\n      \"src\": \".\/images\/icons\/icon-152x152.png\",\n      \"sizes\": \"152x152\",\n      \"type\": \"image\/png\"\n    }, {\n      \"src\": \".\/images\/icons\/icon-192x192.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image\/png\"\n    }, {\n      \"src\": \".\/images\/icons\/icon-256x256.png\",\n      \"sizes\": \"256x256\",\n      \"type\": \"image\/png\"\n    }, {\n      \"src\": \".\/images\/icons\/icon-512x512.png\",\n      \"sizes\": \"512x512\",\n      \"type\": \"image\/png\"\n    }],<\/code><\/pre>\n\n\n\n<p>Re-run the Lighthouse audits again. Yes, those icons related issues are gone. Now we go to handle other issues: <\/p>\n\n\n\n<ul><li>Current page does not respond with a 200 when offline<\/li><li>start_url does not respond with a 200 when offline <ul><li>Unable to fetch start URL via service worker<\/li><\/ul><\/li><li>Does not register a service worker that controls page and start_url<\/li><\/ul>\n\n\n\n<p>Let&#8217; sum up above issues: we don&#8217;t use a service worker to handle app in offline mode. Then we have another question. <\/p>\n\n\n\n<p>What is a service worker? <\/p>\n\n\n\n<p>A <a rel=\"noreferrer noopener\" aria-label=\"service worker (opens in a new tab)\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/primers\/service-workers\/\" target=\"_blank\">service worker<\/a> is a script that runs in background. It handles page caching, background sync and push notification in PWA. Well, doesn&#8217;t it sound complicated? Maybe, but the good thing is, in React, the service worker part is already prepared for us. We edit the &#8220;<em>src\/index.js<\/em>&#8221; file, then change the line of <em>serviceWorker.unregister();<\/em> to  <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>serviceWorker.register();<\/code><\/pre>\n\n\n\n<p>Since service worker works in a production environment not development environment, we run following command to make a production build: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$yarn build<\/code><\/pre>\n\n\n\n<p>Once the build is ready, we can start a server to run the build. If you have installed serve, you can ignore the first command. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$yarn global add serve\n$serve -s build<\/code><\/pre>\n\n\n\n<p>Open the Chrome browser and we run the Lighthouse audits again. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2081\" data-permalink=\"https:\/\/www.codeastar.com\/lighthouse-results-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse-results-2-e1562645143213.png?fit=600%2C411&amp;ssl=1\" data-orig-size=\"600,411\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"lighthouse results 2\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse-results-2-e1562645143213.png?fit=300%2C206&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse-results-2-e1562645143213.png?fit=600%2C411&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"600\" height=\"411\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse-results-2-e1562645143213.png?resize=600%2C411&#038;ssl=1\" alt=\"\" class=\"wp-image-2081\" data-recalc-dims=\"1\"\/><\/figure><\/div>\n\n\n\n<p>Poof! The service worker is on an we finish all major issues here!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Check PWA network status<\/h3>\n\n\n\n<p>Since our app is now a PWA, it caches the current page when the network is down. Then it brings out an issue for us. How do we know our app is online, when both online and offline pages are the same? <em>React-detect-offline<\/em> package to rescue! Firstly, let&#8217;s install the <em>react-detect-offline<\/em> using yarn.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$yarn add react-detect-offline<\/code><\/pre>\n\n\n\n<p>It is a package that allows users to add &lt;Online&gt; and&lt;Offline&gt; tags in React. So the app can run certain behaviors when it is online or offline. In our &#8220;<em>src\/App.js<\/em>&#8221; file, let import the package:<\/p>\n\n\n\n<pre lang=\"javascript\" line=\"1\">import { Offline, Online } from \"react-detect-offline\";<\/pre>\n\n\n\n<p> And add following code insider &lt;header className=&#8221;App-header&#8221;&gt; :<\/p>\n\n\n\n<pre lang=\"javascript\" line=\"1\">       <div>\n          You are <online>online<\/online><offline>offline<\/offline>\n       <\/div>\n<\/pre>\n\n\n\n<p>Now we build the app again and open it on Chrome browser. You may see there is nothing changed at all. Don&#8217;t panic, it is a caching behavior of the service worker. I would suggest reading &#8220;<a rel=\"noreferrer noopener\" aria-label=\"The Service Worker Lifecycle (opens in a new tab)\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/primers\/service-workers\/lifecycle\" target=\"_blank\">The Service Worker Lifecycle<\/a>&#8221; article for more details. At this moment, let&#8217;s clear up the cache ourselves, by using &#8220;Developer tools&#8221; &gt; &#8220;Application&#8221; &gt; &#8220;Clear storage&#8221;, then press the &#8220;Clear site data&#8221; button.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2088\" data-permalink=\"https:\/\/www.codeastar.com\/storage\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/storage-e1562684586470.png?fit=600%2C438&amp;ssl=1\" data-orig-size=\"600,438\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"storage\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/storage-e1562684586470.png?fit=300%2C219&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/storage-e1562684586470.png?fit=600%2C438&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"600\" height=\"438\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/storage-e1562684586470.png?resize=600%2C438&#038;ssl=1\" alt=\"Clear storage\" class=\"wp-image-2088\" data-recalc-dims=\"1\"\/><\/figure><\/div>\n\n\n\n<p>After that, when we refresh the app, the message of &#8220;You are online&#8221; is now showed. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2090\" data-permalink=\"https:\/\/www.codeastar.com\/pwa-online\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa-online.png?fit=446%2C415&amp;ssl=1\" data-orig-size=\"446,415\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"pwa online\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa-online.png?fit=300%2C279&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa-online.png?fit=446%2C415&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"446\" height=\"415\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa-online.png?resize=446%2C415&#038;ssl=1\" alt=\"PWA online\" class=\"wp-image-2090\" srcset=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa-online.png?w=446&amp;ssl=1 446w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa-online.png?resize=300%2C279&amp;ssl=1 300w\" sizes=\"(max-width: 446px) 100vw, 446px\" data-recalc-dims=\"1\" \/><\/figure><\/div>\n\n\n\n<p>For the offline message, of cause we can cut the network to make it display. But we have an easier way to test it. Let&#8217;s use the   &#8220;Developer tools&#8221; &gt; &#8220;Application&#8221; once again. This time, we click &#8220;Service Workers&#8221; on the left then &#8220;Offline&#8221; on the right.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2091\" data-permalink=\"https:\/\/www.codeastar.com\/offline-test\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/offline-test-e1562689625676.png?fit=600%2C595&amp;ssl=1\" data-orig-size=\"600,595\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"offline test\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/offline-test-e1562689625676.png?fit=300%2C297&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/offline-test-e1562689625676.png?fit=600%2C595&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"600\" height=\"595\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/offline-test-e1562689625676.png?resize=600%2C595&#038;ssl=1\" alt=\"service workers offline\" class=\"wp-image-2091\" data-recalc-dims=\"1\"\/><\/figure><\/div>\n\n\n\n<p>The app then shows &#8220;You are offline&#8221; message.  We can untick the &#8220;Offline&#8221; checkbox to make it online again.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Build a BTC tracker<\/h3>\n\n\n\n<p>We make a PWA with online\/offline indicator, but then&#8230; now what? A PWA with React logo spinning around is  so meaningless. In CodeAStar here, we always make <a href=\"https:\/\/www.codeastar.com\/easy-accuweather-forecast-in-python\/\">easy and useful<\/a> things :]] . Bitcoin is going up again (as of July 2019), let&#8217;s build a easy BTC price tracker then.<\/p>\n\n\n\n<p>The packages we need:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$yarn add axios\n$yarn add moment<\/code><\/pre>\n\n\n\n<p>We have used the &#8220;axios&#8221; package in our weather forecast React project before. This time, we use this package to get the BTC price info from  <a rel=\"noreferrer noopener\" aria-label=\"Blockchain.com (opens in a new tab)\" href=\"https:\/\/www.blockchain.com\/api\/exchange_rates_api\" target=\"_blank\">Blockchain.com<\/a>. And we use &#8220;moment&#8221; package to handle the Javascript date object. We create 1 folder &#8220;<em>Btc<\/em>&#8221; and 2 files, &#8220;<em>Btc.css<\/em>&#8221; and &#8220;<em>Btc.js<\/em>&#8220;, under &#8220;<em>src<\/em>&#8221; folder.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/src\n  \/Btc\n    |- Btc.css\n    |- Btc.js<\/code><\/pre>\n\n\n\n<p>Once again, you can go to my github <a href=\"https:\/\/github.com\/codeastar\/pwa_funhouse\/tree\/source\/src\/Btc\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">page<\/a> to download the source of those files. Inside the &#8220;<em>Btc.js<\/em>&#8221; file, we use <em>setInterval() <\/em>method to get BTC info every 1 second.<\/p>\n\n\n\n<pre lang=\"javascript\" line=\"1\" escaped=\"true\">    componentDidMount () \n    {\n        this.timerID = setInterval(\n            () => this.getBtcInfo(),\n            1000\n          );\n    }\n \n    getBtcInfo()\n    {       \n        axios.get(\"https:\/\/blockchain.info\/ticker\")\n        .then(response =&gt; {\n           let current_price = response.data.USD.last;\n           this.setState({ latest_price: current_price });\n           this.setState({ btcusd: current_price });\n \n           if (this.last_price)\n           {\n                let change = parseFloat(current_price) - parseFloat(this.last_price);\n                if (change !== 0)  \n                {\n                    this.setState({ price_change: change.toFixed(2) });\n                    let sign = (change &gt; 0) ? '+' : '';\n                    this.setState({ price_sign: sign });\n                }                \n           }\n\n           this.last_price = current_price;\n           let curr_date = moment().local().format('YYYY-MM-DD HH:mm:ss');\n           this.setState({ last_updated: curr_date });          \n         })\n        .catch(error =&gt; {\n           console.log(error)\n           this.setState({ btcusd: this.state.btcusd });\n        })    \n    }\n<\/pre>\n\n\n\n<p> Then on the &#8220;<em>src\/App.js<\/em>&#8220;, we import Btc component to our app. <\/p>\n\n\n\n<pre lang=\"javascript\" line=\"1\">import Btc from '.\/Btc\/Btc'<\/pre>\n\n\n\n<p>And render the Btc component.<\/p>\n\n\n\n<pre lang=\"python\" line=\"1\">        <p>\n          Real Time BTC tracker from blockchain.info\n        <\/p>    \n        <div>\n          You are <Online>online<\/Online><Offline>offline<\/Offline>\n       <\/div>\n       <Btc \/>\n<\/pre>\n\n\n\n<p>After changing the css and logo of our app (copy and paste from the source), we can re-build and re-run it.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2102\" data-permalink=\"https:\/\/www.codeastar.com\/btctracler\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/btctracler.png?fit=646%2C744&amp;ssl=1\" data-orig-size=\"646,744\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"btctracler\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/btctracler.png?fit=260%2C300&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/btctracler.png?fit=646%2C744&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"646\" height=\"744\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/btctracler.png?resize=646%2C744&#038;ssl=1\" alt=\"BTC Tracker\" class=\"wp-image-2102\" srcset=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/btctracler.png?w=646&amp;ssl=1 646w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/btctracler.png?resize=260%2C300&amp;ssl=1 260w\" sizes=\"(max-width: 646px) 100vw, 646px\" data-recalc-dims=\"1\" \/><\/figure><\/div>\n\n\n\n<p>And now we have a working BTC tracker PWA.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Put it on web server for FREE<\/h3>\n\n\n\n<p>Things look good so far. Isn&#8217;t it? :]] But what we have done is all on our development environment. The next thing we do is putting all our work on a web server, so we can make a complete PWA. <\/p>\n\n\n\n<p>First things first, we use <a rel=\"noreferrer noopener\" aria-label=\"GitHub Pages (opens in a new tab)\" href=\"https:\/\/pages.github.com\/\" target=\"_blank\">GitHub Pages<\/a> as our web server. Of course you can deploy on your own web server as well. But the GitHub one is free and HTTPS supported. And it can share the source easier. <\/p>\n\n\n\n<p>We go to our source &#8220;<em>src\/package.json<\/em>&#8221; then add &#8220;<em>predeploy<\/em>&#8220;, &#8220;<em>deploy<\/em>&#8221; and &#8220;<em>homepage<\/em>&#8221; into it. You can copy following lines for &#8220;<em>predeploy<\/em>&#8221; and &#8220;<em>deploy<\/em>&#8221; under &#8220;<em>scripts<\/em>&#8220;. But for &#8220;<em>homepage<\/em>&#8220;, it would use &#8220;<em>https:\/\/user_name.github.io\/repository_name<\/em>&#8221; naming. For my case, it is &#8220;<em>https:\/\/codeastar.github.io\/pwa_funhouse<\/em>&#8220;.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"pwa_funhouse\",\n  ......\n  \"scripts\": {\n    \"predeploy\": \"yarn build\",\n    \"deploy\": \"gh-pages -b master -d build\", \n  .......\n  },\n  \"homepage\": \"https:\/\/codeastar.github.io\/pwa_funhouse\"\n}<\/code><\/pre>\n\n\n\n<p>You may notice we have added &#8220;<em>gh-pages -b master -d build<\/em>&#8221; on &#8220;<em>deploy<\/em>&#8220;. That means we use &#8220;<em>gh-pages<\/em>&#8221; package, to make a production build, then upload it to the master branch.<\/p>\n\n\n\n<p>But before we go to next step, let&#8217;s install &#8220;<em>gh-pages<\/em>&#8221; package.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$yarn add gh-pages<\/code><\/pre>\n\n\n\n<p>And don&#8217;t forget to create a repository on github.com. After the creation, run following commands on your development environment.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$git init \n$git add * \n$git commit -m \"first commit\" \n$git remote add origin https:\/\/github.com\/user_name\/repository_name.git \n$git push -u origin master<\/code><\/pre>\n\n\n\n<p>So we can upload our source to GitHub. When the upload process is finished, we can run the GitHub Pages integration by using: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$yarn run deploy<\/code><\/pre>\n\n\n\n<p>Now our master branch is updated with build content instead of original source.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2106\" data-permalink=\"https:\/\/www.codeastar.com\/master\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/master-e1563468252730.png?fit=620%2C223&amp;ssl=1\" data-orig-size=\"620,223\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"master\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/master-e1563468252730.png?fit=300%2C108&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/master-e1563468252730.png?fit=1024%2C369&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"620\" height=\"223\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/master-e1563468252730.png?resize=620%2C223&#038;ssl=1\" alt=\"master branch after gh-pages\" class=\"wp-image-2106\" data-recalc-dims=\"1\"\/><\/figure><\/div>\n\n\n\n<p>We are almost there, we just need to enable GitHub Pages from project setting. Select &#8220;master branch&#8221; from &#8220;GitHub Pages&#8221; &gt; &#8220;Source&#8221;. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2108\" data-permalink=\"https:\/\/www.codeastar.com\/ghpage\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/ghpage-e1563468768893.png?fit=590%2C312&amp;ssl=1\" data-orig-size=\"590,312\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"ghpage\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/ghpage-e1563468768893.png?fit=300%2C159&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/ghpage-e1563468768893.png?fit=590%2C312&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"590\" height=\"312\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/ghpage-e1563468768893.png?resize=590%2C312&#038;ssl=1\" alt=\"GitHub Pages\" class=\"wp-image-2108\" data-recalc-dims=\"1\"\/><\/figure><\/div>\n\n\n\n<p>Now we are ready to run our PWA, let&#8217;s click the GitHub Pages link ( <a href=\"https:\/\/codeastar.github.io\/pwa_funhouse\/\">https:\/\/codeastar.github.io\/pwa_funhouse\/<\/a> for my case ) and run the Lighthouse audits again.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2109\" data-permalink=\"https:\/\/www.codeastar.com\/pwa_audits\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa_audits-e1563470591498.png?fit=620%2C374&amp;ssl=1\" data-orig-size=\"620,374\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"pwa_audits\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa_audits-e1563470591498.png?fit=300%2C181&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa_audits-e1563470591498.png?fit=620%2C374&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"620\" height=\"374\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa_audits-e1563470591498.png?resize=620%2C374&#038;ssl=1\" alt=\"Lighthouse audits PWA\" class=\"wp-image-2109\" data-recalc-dims=\"1\"\/><\/figure><\/div>\n\n\n\n<p>Finally, we pass all the PWA checks!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PWA Mobile Experience<\/h3>\n\n\n\n<p>The purpose of this project is to make an easy app that run like a mobile app. So let&#8217;s use a mobile to access the link of our app. Then we see the screen as same as the desktop one on our phone.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2112\" data-permalink=\"https:\/\/www.codeastar.com\/screenshot_20190719-013050\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-013050-e1563533214591.png?fit=450%2C800&amp;ssl=1\" data-orig-size=\"450,800\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_20190719-013050\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-013050-e1563533214591.png?fit=169%2C300&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-013050-e1563533214591.png?fit=576%2C1024&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"450\" height=\"800\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-013050-e1563533214591.png?resize=450%2C800&#038;ssl=1\" alt=\"PWA on mobile\" class=\"wp-image-2112\" data-recalc-dims=\"1\"\/><\/figure><\/div>\n\n\n\n<p>Please note that there is a dialogue of &#8220;<strong>Add BTC Tracker PWA to Home screen<\/strong>&#8221; at the bottom. Once we clicked it, it would pop up another dialogue.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2113\" data-permalink=\"https:\/\/www.codeastar.com\/screenshot_20190719-013123\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-013123-e1563544688953.png?fit=580%2C342&amp;ssl=1\" data-orig-size=\"580,342\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_20190719-013123\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-013123-e1563544688953.png?fit=300%2C177&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-013123-e1563544688953.png?fit=1024%2C604&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"580\" height=\"342\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-013123-e1563544688953.png?resize=580%2C342&#038;ssl=1\" alt=\"Add to Home PWA\" class=\"wp-image-2113\" data-recalc-dims=\"1\"\/><\/figure><\/div>\n\n\n\n<p>When we click the &#8220;Add&#8221; button to confirm &#8220;Add to Home screen&#8221; action, it will install the PWA on our mobile. It just likes we install an app from Google Play or App Store. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img data-attachment-id=\"2114\" data-permalink=\"https:\/\/www.codeastar.com\/screenshot_20190719-014100\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-014100-e1563565380393.png?fit=450%2C678&amp;ssl=1\" data-orig-size=\"450,678\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_20190719-014100\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-014100-e1563565380393.png?fit=199%2C300&amp;ssl=1\" data-large-file=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-014100-e1563565380393.png?fit=576%2C1024&amp;ssl=1\" decoding=\"async\" loading=\"lazy\" width=\"450\" height=\"678\" src=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-014100-e1563565380393.png?resize=450%2C678&#038;ssl=1\" alt=\"PWA on mobile screen\" class=\"wp-image-2114\" srcset=\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-014100-e1563565380393.png?w=450&amp;ssl=1 450w, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-014100-e1563565380393.png?resize=199%2C300&amp;ssl=1 199w\" sizes=\"(max-width: 450px) 100vw, 450px\" data-recalc-dims=\"1\" \/><\/figure><\/div>\n\n\n\n<p>Now we have an app icon on our phone, it is fast and it can be run in online\/offline mode!<\/p>\n\n\n\n<div style=\"height:84px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">What have we learnt in this post?<\/h3>\n\n\n\n<ol><li>Concept of PWA<\/li><li>Build a PWA with React <\/li><li>Usage of Lighthouse audits <\/li><li>Deploy a React project into GitHub Pages<\/li><\/ol>\n\n\n\n<p> (the complete source can be found at&nbsp;<strong>GitHub<\/strong>:&nbsp;<a href=\"https:\/\/github.com\/codeastar\/pwa_funhouse\/tree\/source\">https:\/\/github.com\/codeastar\/pwa_funhouse\/tree\/source<\/a> ) <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nowadays, using smart mobile is a part of our daily life. People use mobile apps to do things they want to do, messaging, shopping, reading, learning, and the list goes on. In order to enter the mobile users market, companies need to spend time and effort to create an app then publish it on Google [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2120,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[2],"tags":[157,119,156,155,154,131,158],"jetpack_publicize_connections":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>PWA - Create Easy Progressive Web App with React &#8902; Code A Star<\/title>\n<meta name=\"description\" content=\"Mobile app is convenient, website is easy to build and reached by more audiences. By using React to build a PWA, we can take the advantages of app and web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PWA - Create Easy Progressive Web App with React &#8902; Code A Star\" \/>\n<meta property=\"og:description\" content=\"Mobile app is convenient, website is easy to build and reached by more audiences. By using React to build a PWA, we can take the advantages of app and web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Code A Star\" \/>\n<meta property=\"article:publisher\" content=\"codeastar\" \/>\n<meta property=\"article:author\" content=\"codeastar\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-20T21:07:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-07-20T21:07:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa_coffee.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"403\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Raven Hon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeastar\" \/>\n<meta name=\"twitter:site\" content=\"@codeastar\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Raven Hon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/\"},\"author\":{\"name\":\"Raven Hon\",\"@id\":\"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd\"},\"headline\":\"PWA &#8211; Create Easy Progressive Web App with React\",\"datePublished\":\"2019-07-20T21:07:07+00:00\",\"dateModified\":\"2019-07-20T21:07:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/\"},\"wordCount\":1747,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd\"},\"keywords\":[\"BTC\",\"easy\",\"mobile\",\"Progressive Web App\",\"PWA\",\"React\",\"yarn\"],\"articleSection\":[\"We code therefore we are\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/\",\"url\":\"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/\",\"name\":\"PWA - Create Easy Progressive Web App with React &#8902; Code A Star\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeastar.com\/#website\"},\"datePublished\":\"2019-07-20T21:07:07+00:00\",\"dateModified\":\"2019-07-20T21:07:22+00:00\",\"description\":\"Mobile app is convenient, website is easy to build and reached by more audiences. By using React to build a PWA, we can take the advantages of app and web.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codeastar.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PWA &#8211; Create Easy Progressive Web App with React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codeastar.com\/#website\",\"url\":\"https:\/\/www.codeastar.com\/\",\"name\":\"Code A Star\",\"description\":\"We don&#039;t wish upon a star, we code a star\",\"publisher\":{\"@id\":\"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codeastar.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd\",\"name\":\"Raven Hon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codeastar.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/logo70.png?fit=70%2C70&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/logo70.png?fit=70%2C70&ssl=1\",\"width\":70,\"height\":70,\"caption\":\"Raven Hon\"},\"logo\":{\"@id\":\"https:\/\/www.codeastar.com\/#\/schema\/person\/image\/\"},\"description\":\"Raven Hon is\u00a0a 20 years+ veteran in information technology industry who has worked on various projects from console, web, game, banking and mobile applications in different sized companies.\",\"sameAs\":[\"https:\/\/www.codeastar.com\",\"codeastar\",\"https:\/\/twitter.com\/codeastar\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"PWA - Create Easy Progressive Web App with React &#8902; Code A Star","description":"Mobile app is convenient, website is easy to build and reached by more audiences. By using React to build a PWA, we can take the advantages of app and web.","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:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/","og_locale":"en_US","og_type":"article","og_title":"PWA - Create Easy Progressive Web App with React &#8902; Code A Star","og_description":"Mobile app is convenient, website is easy to build and reached by more audiences. By using React to build a PWA, we can take the advantages of app and web.","og_url":"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/","og_site_name":"Code A Star","article_publisher":"codeastar","article_author":"codeastar","article_published_time":"2019-07-20T21:07:07+00:00","article_modified_time":"2019-07-20T21:07:22+00:00","og_image":[{"width":1000,"height":403,"url":"https:\/\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa_coffee.png","type":"image\/png"}],"author":"Raven Hon","twitter_card":"summary_large_image","twitter_creator":"@codeastar","twitter_site":"@codeastar","twitter_misc":{"Written by":"Raven Hon","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/#article","isPartOf":{"@id":"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/"},"author":{"name":"Raven Hon","@id":"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd"},"headline":"PWA &#8211; Create Easy Progressive Web App with React","datePublished":"2019-07-20T21:07:07+00:00","dateModified":"2019-07-20T21:07:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/"},"wordCount":1747,"commentCount":0,"publisher":{"@id":"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd"},"keywords":["BTC","easy","mobile","Progressive Web App","PWA","React","yarn"],"articleSection":["We code therefore we are"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/","url":"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/","name":"PWA - Create Easy Progressive Web App with React &#8902; Code A Star","isPartOf":{"@id":"https:\/\/www.codeastar.com\/#website"},"datePublished":"2019-07-20T21:07:07+00:00","dateModified":"2019-07-20T21:07:22+00:00","description":"Mobile app is convenient, website is easy to build and reached by more audiences. By using React to build a PWA, we can take the advantages of app and web.","breadcrumb":{"@id":"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.codeastar.com\/pwa-create-easy-progressive-web-app-with-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codeastar.com\/"},{"@type":"ListItem","position":2,"name":"PWA &#8211; Create Easy Progressive Web App with React"}]},{"@type":"WebSite","@id":"https:\/\/www.codeastar.com\/#website","url":"https:\/\/www.codeastar.com\/","name":"Code A Star","description":"We don&#039;t wish upon a star, we code a star","publisher":{"@id":"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codeastar.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.codeastar.com\/#\/schema\/person\/832d202eb92a3d430097e88c6d0550bd","name":"Raven Hon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codeastar.com\/#\/schema\/person\/image\/","url":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/logo70.png?fit=70%2C70&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/logo70.png?fit=70%2C70&ssl=1","width":70,"height":70,"caption":"Raven Hon"},"logo":{"@id":"https:\/\/www.codeastar.com\/#\/schema\/person\/image\/"},"description":"Raven Hon is\u00a0a 20 years+ veteran in information technology industry who has worked on various projects from console, web, game, banking and mobile applications in different sized companies.","sameAs":["https:\/\/www.codeastar.com","codeastar","https:\/\/twitter.com\/codeastar"]}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa_coffee.png?fit=1000%2C403&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8PcRO-xh","jetpack-related-posts":[{"id":2281,"url":"https:\/\/www.codeastar.com\/easy-cheap-flights-seeker-web-app-with-flask-and-react\/","url_meta":{"origin":2063,"position":0},"title":"Easy Cheap Flights Seeker Web App with Flask and React","author":"Raven Hon","date":"October 5, 2020","format":false,"excerpt":"We have 1, 2, 3, 4, 5 months without updating the CodeAStar web site. It seems 2020 is not a good year for everybody. What we can do are, stay strong, stay positive and keep learning. So let's continue on what we mentioned last time --- Easy Cheap Flights Seeker\u2026","rel":"","context":"In &quot;We code therefore we are&quot;","block_context":{"text":"We code therefore we are","link":"https:\/\/www.codeastar.com\/category\/we-code-therefore-we-are\/"},"img":{"alt_text":"EZ Cheap Flights Web App","src":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2020\/10\/ezflight_1.png?fit=940%2C543&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2020\/10\/ezflight_1.png?fit=940%2C543&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2020\/10\/ezflight_1.png?fit=940%2C543&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2020\/10\/ezflight_1.png?fit=940%2C543&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1769,"url":"https:\/\/www.codeastar.com\/react-frontend-weather-forecast-2\/","url_meta":{"origin":2063,"position":1},"title":"React Frontend and Flask Backend for Weather Forecast \u2013 Part 2","author":"Raven Hon","date":"March 4, 2019","format":false,"excerpt":"From our last post, \"Flask Backend and React Frontend for Weather Forecast \u2013 Part 1\", we built our magic user, RESTful API as the backend module with Flask. This time, we are going to build our sword swinger, who always deals with challenges at the front line. Before we go\u2026","rel":"","context":"In &quot;We code therefore we are&quot;","block_context":{"text":"We code therefore we are","link":"https:\/\/www.codeastar.com\/category\/we-code-therefore-we-are\/"},"img":{"alt_text":"React Frontend","src":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/03\/wq_happy.png?fit=1000%2C500&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":990,"url":"https:\/\/www.codeastar.com\/click-fraud-detection\/","url_meta":{"origin":2063,"position":2},"title":"Click Fraud Detection with Machine Learning","author":"Raven Hon","date":"May 4, 2018","format":false,"excerpt":"Up to now, we have tried 3 different Kaggle journeys, the Titanic Survivors, the Iowa House Prices and the hand written digits recognition. Those journeys covered popular Machine Learning topics, such as classification, regression, deep learning, and so on. I would suggest fans of Machine Learning to start with those\u2026","rel":"","context":"In &quot;Learn Machine Learning&quot;","block_context":{"text":"Learn Machine Learning","link":"https:\/\/www.codeastar.com\/category\/machine-learning\/"},"img":{"alt_text":"Click Fraud Detection","src":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/05\/fraud_click2.png?fit=1049%2C419&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/05\/fraud_click2.png?fit=1049%2C419&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/05\/fraud_click2.png?fit=1049%2C419&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/05\/fraud_click2.png?fit=1049%2C419&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1740,"url":"https:\/\/www.codeastar.com\/flask-backend-react-frontend-weather-1\/","url_meta":{"origin":2063,"position":3},"title":"Flask Backend and React Frontend for Weather Forecast &#8211; Part 1","author":"Raven Hon","date":"February 25, 2019","format":false,"excerpt":"We built a weather forecast web app with Flask in past. That was an old fashioned way which we handled all frontend and backend stuff under Flask framework. The best practice for web applications nowadays is separating frontend and backend into 2 modules. So we can utilize both modules to\u2026","rel":"","context":"In &quot;We code therefore we are&quot;","block_context":{"text":"We code therefore we are","link":"https:\/\/www.codeastar.com\/category\/we-code-therefore-we-are\/"},"img":{"alt_text":"Flask backend","src":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/02\/wq_milktea.png?fit=1000%2C500&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/02\/wq_milktea.png?fit=1000%2C500&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/02\/wq_milktea.png?fit=1000%2C500&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/02\/wq_milktea.png?fit=1000%2C500&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":854,"url":"https:\/\/www.codeastar.com\/flask-easy-web-app-python\/","url_meta":{"origin":2063,"position":4},"title":"Easy Weather Forecast Flask Web App with Python","author":"Raven Hon","date":"March 10, 2018","format":false,"excerpt":"We have tried to code an Easy Weather Forecast Tool with Python. Yes, it is fast and easy, but it is just not that convenient to run anything on a command prompt. It is so.... 80s. It would be better if we can make a single-page Flask web app. Then\u2026","rel":"","context":"In &quot;We code therefore we are&quot;","block_context":{"text":"We code therefore we are","link":"https:\/\/www.codeastar.com\/category\/we-code-therefore-we-are\/"},"img":{"alt_text":"EZ Weather Forecast Web App in Flask","src":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/03\/ezw_wep_app.png?fit=1030%2C460&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/03\/ezw_wep_app.png?fit=1030%2C460&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/03\/ezw_wep_app.png?fit=1030%2C460&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/03\/ezw_wep_app.png?fit=1030%2C460&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":1281,"url":"https:\/\/www.codeastar.com\/tutorial-deploy-flask-docker-amazon-ecs\/","url_meta":{"origin":2063,"position":5},"title":"Amazon Tutorial: Deploy a Flask Docker image in ECS","author":"Raven Hon","date":"August 20, 2018","format":false,"excerpt":"We have learnt how to build a\u00a0weather forecast Flask app. We have learnt how to deploy the Flask app to a Raspberry Pi\u00a0using Docker. But we mostly focus on deploying our app in a local machine or a private network. In order to step up our game, we are going\u2026","rel":"","context":"In &quot;We code therefore we are&quot;","block_context":{"text":"We code therefore we are","link":"https:\/\/www.codeastar.com\/category\/we-code-therefore-we-are\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/fargate.png?fit=1052%2C470&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/fargate.png?fit=1052%2C470&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/fargate.png?fit=1052%2C470&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/fargate.png?fit=1052%2C470&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2018\/08\/fargate.png?fit=1052%2C470&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/posts\/2063"}],"collection":[{"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/comments?post=2063"}],"version-history":[{"count":40,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/posts\/2063\/revisions"}],"predecessor-version":[{"id":2128,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/posts\/2063\/revisions\/2128"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/media\/2120"}],"wp:attachment":[{"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/media?parent=2063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/categories?post=2063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codeastar.com\/wp-json\/wp\/v2\/tags?post=2063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}