- Google’s Progressive Web Apps development guide<\/a><\/li>
- React’s Progressive Web Apps development guide<\/a><\/li>
- React’s deployment guide<\/a><\/li><\/ul>\n\n\n\n
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
Step 1: Create a React web app<\/h3>\n\n\n\n
Let’s use create-react-app <\/em>command to create our React template, pwa_funhouse<\/em>!<\/p>\n\n\n\n
$npx create-react-app pwa_funhouse<\/code><\/pre>\n\n\n\nThen we start our pwa_funhouse <\/em>web app.<\/p>\n\n\n\n
$cd pwa_funhouse\n$yarn start<\/code><\/pre>\n\n\n\nYou may notice that I use yarn<\/a> instead of 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
After running the start command, it will pop out the pwa_funhouse <\/em>app on your default browser. <\/p>\n\n\n\n
![\"PWA](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa1.png?resize=528%2C520&ssl=1\")
<\/figure><\/div>\n\n\n\nStep 2: Check rather our app is PWA ready<\/h3>\n\n\n\n
If your default browser is not Chrome, let’s open a Chrome browser and run our app on it. As we will use Lighthouse<\/a>, the audit tool on Chrome, to check our PWA readiness. <\/p>\n\n\n\n
On your Chrome browser, open the “Developer tools<\/em>” option, select the “Audits<\/em>” tab. Then you will see the Lighthouse tool there.<\/p>\n\n\n\n
![\"Lighthouse\"](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse2.png?resize=1024%2C323&ssl=1\")
<\/figure>\n\n\n\nPress the “Run audits<\/em>” at the bottom. It starts auditing our app, then displays the results. There are different kind of results, like “Accessibility” and “SEO”. But what we need to look at, is the “Progressive Web App” result. Once we click on it, it shows us many problematic issues:<\/p>\n\n\n\n
![\"PWA](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse-pwa-e1562603940328.png?resize=600%2C407&ssl=1\")
<\/figure><\/div>\n\n\n\nDon’t worry, we are going to clear them on next step.<\/p>\n\n\n\n
Step 3: Clear the PWA issues<\/h3>\n\n\n\n
There are several issues found by Lighthouse, let’s clear those easy ones first. <\/p>\n\n\n\n
- Web app manifest does not meet the installability requirements
- Failures: Manifest does not have a PNG icon of at least 192px<\/li><\/ul><\/li>
- Is not configured for a custom splash screen
- Failures: Manifest does not have a PNG icon of at least 512px. <\/li><\/ul><\/li><\/ul>\n\n\n\n
From the above messages, we know there are missing icons for our app. You can download icon images from my source here<\/a> and put them in “public\/images\/icons<\/em>” folder. Then update the icons<\/em> part from the “public\/manifest.json<\/em>” file to:<\/p>\n\n\n\n
\"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\nRe-run the Lighthouse audits again. Yes, those icons related issues are gone. Now we go to handle other issues: <\/p>\n\n\n\n
- Current page does not respond with a 200 when offline<\/li>
- start_url does not respond with a 200 when offline
- Unable to fetch start URL via service worker<\/li><\/ul><\/li>
- Does not register a service worker that controls page and start_url<\/li><\/ul>\n\n\n\n
Let’ sum up above issues: we don’t use a service worker to handle app in offline mode. Then we have another question. <\/p>\n\n\n\n
What is a service worker? <\/p>\n\n\n\n
A service worker<\/a> is a script that runs in background. It handles page caching, background sync and push notification in PWA. Well, doesn’t it sound complicated? Maybe, but the good thing is, in React, the service worker part is already prepared for us. We edit the “src\/index.js<\/em>” file, then change the line of serviceWorker.unregister();<\/em> to <\/p>\n\n\n\n
serviceWorker.register();<\/code><\/pre>\n\n\n\nSince service worker works in a production environment not development environment, we run following command to make a production build: <\/p>\n\n\n\n
$yarn build<\/code><\/pre>\n\n\n\nOnce 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
$yarn global add serve\n$serve -s build<\/code><\/pre>\n\n\n\nOpen the Chrome browser and we run the Lighthouse audits again. <\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/lighthouse-results-2-e1562645143213.png?resize=600%2C411&ssl=1\")
<\/figure><\/div>\n\n\n\nPoof! The service worker is on an we finish all major issues here!<\/p>\n\n\n\n
Step 4: Check PWA network status<\/h3>\n\n\n\n
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? React-detect-offline<\/em> package to rescue! Firstly, let’s install the react-detect-offline<\/em> using yarn.<\/p>\n\n\n\n
$yarn add react-detect-offline<\/code><\/pre>\n\n\n\nIt is a package that allows users to add <Online> and<Offline> tags in React. So the app can run certain behaviors when it is online or offline. In our “src\/App.js<\/em>” file, let import the package:<\/p>\n\n\n\n
import { Offline, Online } from \"react-detect-offline\";<\/pre>\n\n\n\nAnd add following code insider <header className=”App-header”> :<\/p>\n\n\n\n
\n You areonline<\/online> offline<\/offline>\n <\/div>\n<\/pre>\n\n\n\n Now we build the app again and open it on Chrome browser. You may see there is nothing changed at all. Don’t panic, it is a caching behavior of the service worker. I would suggest reading “The Service Worker Lifecycle<\/a>” article for more details. At this moment, let’s clear up the cache ourselves, by using “Developer tools” > “Application” > “Clear storage”, then press the “Clear site data” button.<\/p>\n\n\n\n
![\"Clear](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/storage-e1562684586470.png?resize=600%2C438&ssl=1\")
<\/figure><\/div>\n\n\n\nAfter that, when we refresh the app, the message of “You are online” is now showed. <\/p>\n\n\n\n
![\"PWA](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa-online.png?resize=446%2C415&ssl=1\")
<\/figure><\/div>\n\n\n\nFor the offline message, of cause we can cut the network to make it display. But we have an easier way to test it. Let’s use the “Developer tools” > “Application” once again. This time, we click “Service Workers” on the left then “Offline” on the right.<\/p>\n\n\n\n
![\"service](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/offline-test-e1562689625676.png?resize=600%2C595&ssl=1\")
<\/figure><\/div>\n\n\n\nThe app then shows “You are offline” message. We can untick the “Offline” checkbox to make it online again.<\/p>\n\n\n\n
Step 5: Build a BTC tracker<\/h3>\n\n\n\n
We make a PWA with online\/offline indicator, but then… now what? A PWA with React logo spinning around is so meaningless. In CodeAStar here, we always make easy and useful<\/a> things :]] . Bitcoin is going up again (as of July 2019), let’s build a easy BTC price tracker then.<\/p>\n\n\n\n
The packages we need:<\/p>\n\n\n\n
$yarn add axios\n$yarn add moment<\/code><\/pre>\n\n\n\nWe have used the “axios” package in our weather forecast React project before. This time, we use this package to get the BTC price info from Blockchain.com<\/a>. And we use “moment” package to handle the Javascript date object. We create 1 folder “Btc<\/em>” and 2 files, “Btc.css<\/em>” and “Btc.js<\/em>“, under “src<\/em>” folder.<\/p>\n\n\n\n
\/src\n \/Btc\n |- Btc.css\n |- Btc.js<\/code><\/pre>\n\n\n\nOnce again, you can go to my github page<\/a> to download the source of those files. Inside the “Btc.js<\/em>” file, we use setInterval() <\/em>method to get BTC info every 1 second.<\/p>\n\n\n\n
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 => {\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 > 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 => {\n console.log(error)\n this.setState({ btcusd: this.state.btcusd });\n }) \n }\n<\/pre>\n\n\n\nThen on the “src\/App.js<\/em>“, we import Btc component to our app. <\/p>\n\n\n\n
import Btc from '.\/Btc\/Btc'<\/pre>\n\n\n\n
And render the Btc component.<\/p>\n\n\n\n
\n Real Time BTC tracker from blockchain.info\n <\/p> \n
\n You areonline<\/Online> offline<\/Offline>\n <\/div>\n \n<\/pre>\n\n\n\n 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
![\"BTC](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/btctracler.png?resize=646%2C744&ssl=1\")
<\/figure><\/div>\n\n\n\nAnd now we have a working BTC tracker PWA.<\/p>\n\n\n\n
Step 6: Put it on web server for FREE<\/h3>\n\n\n\n
Things look good so far. Isn’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
First things first, we use 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
We go to our source “src\/package.json<\/em>” then add “predeploy<\/em>“, “deploy<\/em>” and “homepage<\/em>” into it. You can copy following lines for “predeploy<\/em>” and “deploy<\/em>” under “scripts<\/em>“. But for “homepage<\/em>“, it would use “https:\/\/user_name.github.io\/repository_name<\/em>” naming. For my case, it is “https:\/\/codeastar.github.io\/pwa_funhouse<\/em>“.<\/p>\n\n\n\n
{\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\nYou may notice we have added “gh-pages -b master -d build<\/em>” on “deploy<\/em>“. That means we use “gh-pages<\/em>” package, to make a production build, then upload it to the master branch.<\/p>\n\n\n\n
But before we go to next step, let’s install “gh-pages<\/em>” package.<\/p>\n\n\n\n
$yarn add gh-pages<\/code><\/pre>\n\n\n\nAnd don’t forget to create a repository on github.com. After the creation, run following commands on your development environment.<\/p>\n\n\n\n
$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\nSo 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
$yarn run deploy<\/code><\/pre>\n\n\n\nNow our master branch is updated with build content instead of original source.<\/p>\n\n\n\n
![\"master](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/master-e1563468252730.png?resize=620%2C223&ssl=1\")
<\/figure><\/div>\n\n\n\nWe are almost there, we just need to enable GitHub Pages from project setting. Select “master branch” from “GitHub Pages” > “Source”. <\/p>\n\n\n\n
![\"GitHub](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/ghpage-e1563468768893.png?resize=590%2C312&ssl=1\")
<\/figure><\/div>\n\n\n\nNow we are ready to run our PWA, let’s click the GitHub Pages link ( https:\/\/codeastar.github.io\/pwa_funhouse\/<\/a> for my case ) and run the Lighthouse audits again.<\/p>\n\n\n\n
- Failures: Manifest does not have a PNG icon of at least 512px. <\/li><\/ul><\/li><\/ul>\n\n\n\n
- React’s Progressive Web Apps development guide<\/a><\/li>
![\"Lighthouse](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/pwa_audits-e1563470591498.png?resize=620%2C374&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"PWA](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-013050-e1563533214591.png?resize=450%2C800&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"Add](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-013123-e1563544688953.png?resize=580%2C342&ssl=1\")
<\/figure><\/div>\n\n\n\n![\"PWA](\"https:\/\/i0.wp.com\/www.codeastar.com\/wp-content\/uploads\/2019\/07\/Screenshot_20190719-014100-e1563565380393.png?resize=450%2C678&ssl=1\")
<\/figure><\/div>\n\n\n\n