Progressive Web Apps in React with create-react-app

[lsminter]

Progressive Web Apps in React with create-react-app

⏲️ 45 Minutes

It seems like there have been some updates to the create-react-app that has broken some of the code. Reply from a user: "New versions of creat-react-app will have the funcrtions skipWaiting and clientsClaim in the core package so instead of workbox.skipWaiting() use workbox.core.skipWaiting()"

🛠 Setup

• Navigate to review.egghead.io
• Start a new review
• Add course slug
• Add Dependencies
• Make a copy of this Template for review notes

📖 The Review

• Watch the video
• Note how code functions in video
• Check the comments
• Test the code
• Note how code functions
• Update dependencies
• Test the code
• Note how code functions
• Compare to video and pre-updated code
• Note any errors in the review app and doc
• Do not hesitate to ask any question at any time!

🏆 Finished

• Navigate to the content-team slack channel
• Share your review document
• Share a snippet of the review app json output
• Add the review to your invoice

💻 Copying the JSON

• hover over "items"
• click the clipboard icon

[caydenakins]

Lesson 12+13 are broken due to Chrome updates. I’m not finding the Add to homescreen button like in the lesson example (seen at 00:46 on lesson 12). I found there are now requirements for this button to appear, something that changed in the Chrome 68 update.

The documents for the update are here: https://developers.google.com/web/fundamentals/app-install-banners/ but the problem I’m assuming is the PWA isn’t meeting all the requirements because the button isn’t showing.

Another user experienced the same thing 3 months ago and commented a few (seemingly correct) ideas. They believed the issue may be the fact that one of the requirements is - Served over HTTPS (required for service workers), which we aren’t meeting due to us using a local server. However, the user claimed to have tried to bug fix by using ngrok with HTTPS, but it still didn’t appear.