Firebase console<\/a>, create a new project called pwa-experiment.<\/p>\n\n\n\nBack in your project folder, run the following:<\/p>\n\n\n\n
npm install -g firebase-tools\nfirebase login\nfirebase init<\/code><\/pre>\n\n\n\nAfter you complete the login and start the initiation, answer the following questions:<\/p>\n\n\n\n
When it asks What Firebase CLI features do you want to setup for this directory?<\/strong>, use the spacebar to deselect all but Hosting.<\/p>\n\n\n\nHit enter, then select pwa-experiment as the project.<\/p>\n\n\n\n
When it asks What do you want to use as your public directory?, <\/strong>type build<\/em> and then hit enter.<\/p>\n\n\n\nFor the single page app question, say no.<\/p>\n\n\n\n
That should complete. Then, you can run the following:<\/p>\n\n\n\n
npm run build && firebase deploy<\/code><\/pre>\n\n\n\nThis tells create-react-app to build our project into the build\/ folder, which Firebase then deploys.<\/p>\n\n\n\n
Firebase will give you back a URL. Let\u2019s open that in Chrome, and then run our Lighthouse audit one last time.<\/p>\n\n\n\n
This time, we\u2019ll be using HTTPS instead of HTTP, and take advantage of caching.<\/p>\n\n\n\nWe did it!<\/p>\n\n\n\n
As a last test, open it up on your phone and try saving it to your home screen. Once opened from the home screen, it should feel like a native app.<\/p>\n\n\n\n
Where To Go From Here<\/h2>\n\n\n\n The essence of a PWA is speed. In this tutorial, we skipped a lot of the performance enhancement, since our app was so barebones.<\/p>\n\n\n\n
As your app grows, however, our main.js file is going to grow and grow, and Lighthouse will be less and less pleased with us.<\/p>\n\n\n\n
For now, we have a working skeleton of PWA to build on \u2014 we\u2019re ready for the future of web apps.<\/p>\n\n\n\n
Done!<\/h2>\n\n\n\n If this article has been helpful, recommend it by hitting the green heart or (even better) share it.<\/p>\n","protected":false},"excerpt":{"rendered":"
Progressive Web Apps are the much-hyped future of the web. Let\u2019s build one! Google has been pushing PWA\u2019s hard as the solution to many of the problems of the modern web \u2014 particularly issues for mobile users. PWA are essentially fast, performance-focused web applications that are streamlined for mobile. They also can be saved to … Read more<\/a><\/p>\n","protected":false},"author":5,"featured_media":977,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/posts\/970"}],"collection":[{"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/comments?post=970"}],"version-history":[{"count":3,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/posts\/970\/revisions"}],"predecessor-version":[{"id":1033,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/posts\/970\/revisions\/1033"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/media\/977"}],"wp:attachment":[{"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/media?parent=970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/categories?post=970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/musefind.com\/wp-json\/wp\/v2\/tags?post=970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}