For Your Progressive Web App: In 2019 Progressive Web Apps are going to be much hyped and there’s no better time to start exploring the benefits. In this tutorial i’ll take you step by step through creating a simple Text Editor PWA using React so you can code your own! Originally published at . www.jamiemaison.com In 2019 Progressive Web Apps (PWAs) are going to be much hyped and there’s no better time to start exploring the benefits. In this tutorial i’ll take you step by step through creating a simple Text Editor PWA using React so you can code your own! When PWAs were first mentioned in 2015 Google’s Alex Russell introduced them as that have the following attributes: web applications Responsive: to fit any form factor Connectivity independent: Progressively-enhanced with Service Workers to let them work offline App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions Fresh: Transparently always up-to-date thanks to the Service Worker update process Safe: Served via TLS (a Service Worker requirement) to prevent snooping Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters. Since switching to a PWA Pinterest reported that “after time spent using the application was up by compared to the old mobile web experience, user-generated ad revenue was up and core engagements was up by ”, so it’s no wonder why businesses are switching to this kind of application for their mobile experiences. Google list the as: 3 months 40% 44% 60% main benefits of PWAs — Load instantly and never show the downasaur, even in uncertain network conditions. Reliable — Respond quickly to user interactions with silky smooth animations and no janky scrolling. Fast — Feel like a natural app on the device, with an immersive user experience. Engaging Getting Started With all that said, let’s get started building a Progressive Web App! First, let’s set up the project using : create-react-app npm i -g create-react-appcreate-react-app text-editor-pwa Once that’s done you’ll have a base template react app, let’s run it by navigating to the newly created directory and running: text-editor-pwa npm start If you now open a Chrome window pointing to and you should be seeing the default React application. For this tutorial it's best to work in the mobile view which you get to by simply right clicking the window, selecting and then toggling the localhost:3000 inspect icon on. Your window should now look something like this: Basic Functionality Now that we’ve set our environment up we can start developing this application! First off let’s add an asset we’ll need to use. You can right the following image save it in your folder as : /public placeholder.png Following that we want to set up the basic view which is simply going to be a couple of inputs and a few lines of Javascript trickery to handle the image upload when the is selected (rather than the input itself). Change your to the following: <img> App.js Now that that has been added you can run your application. It should look like this… Beautiful, isn’t it! Let’s add some styling to bring this all together. To your add the following: App.css Now if you save and reload your application you should see an application that looks like this: Voila! We now have a functioning text editor application that allows your specify a title, subtitle, image & content. This is all great but this is not yet a progressive web app, so what do we need to do next? Lighthouse & Progressive Web Apps Introducing Lighthouse. Lighthouse is Google’s automated tool for improving the quality of the web. It runs in Chrome against any web page and audits for performance, accessibility, progressive web apps, and more. We can use Lighthouse to find out what we need to do to make our current application a Progressive Web App. Lighthouse is now built into Google Chrome under the developer tools “Audit” section. Let’s navigate to that tab ( ). To run our audit let's select "mobile" as the device and uncheck all audits ensuring "Progressive Web App" is the only one left. Leave "Throttling" as the default and click . right-click > inspect > audits Run audits With a score of 54/100 that doesn’t look too good! But we can fix that easily. Let’s fix the issue “Does not register a service worker” first. Service workers are a technology that enables your application to use many of the features Progressive Web App are known for, such as the ability to work offline, push notifications and more. Luckily for us, creates a service worker file for you in named . We just need to register this service worker in our application. To do this we want to edit our file in to look like this: create-react-app /src serviceWorker.js index.js /src By default the readily created service worker only works when . To enable our service worker for development you simply have to open and change the line to . NODE_ENV=Production serviceWorker.js if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) if ('serviceWorker' in navigator) If successful we’ve now got ourself a working service worker and Lighthouse should now be happier. Restart the application. Let’s check our PWA status by rerunning the Lighthouse audit again. Progress! Now let’s tackle the “User will not be prompted to Install the Web App” and “Is not configured for a custom splash screen” issues. Luckily this is easy to solve by simply adding the correct details to the application manifest. First we’ll need an application icon for the homescreen and one for the splash screen, you can copy the following two images and place them in the folder with the names and respectively: /public icon.png icon512.png Now, let’s change our in the folder to the following: manifest.json /public And update our so that the looks like this: index.html head Let’s try running the Lighthouse audit again. Looks like we are getting there! The last step is to solve the remaining issues which we can do by deploying this application online to a service like Firebase. Deploying to Firebase is simple (and free!). Simply navigate to the , create a new project, and call it . Firebase Console text-editor-pwa Head back to your terminal now and enter the following commands: npm install -g firebase-toolsfirebase loginfirebase init After logging in you’ll be asked a series of questions. You’ll want the following setup: 1) What Firebase CLI features do you want to setup for this directory? => Hosting2) Select a default Firebase project for this directory => text-editor-pwa3) What do you want to use as your public directory? => build4) Configure as a single-page app (rewrite all urls to /index.html)? => n Once this has completed run . Once deployed (this can take a minute or two) you should be given a URL where your project is hosted. Let's navigate to that URL and run Lighthouse one last time. npm run build && firebase deploy Success! We now have a progressive web application that passed all of the Lighthouse audit checks. You can now add this application to your mobile homescreen, it should feel and behave just like a native mobile app — all powered by the web. Mission complete Congratulations! You have now successfully developed a Progressive Web App and have a great foundation to go on and make your own. If you have followed along on this tutorial and started to piece together your own PWA please feel free to tweet me at , i’d love to see what you’ve created! @jamiemaison You can download the example code for this tutorial at https://github.com/jamiemaison/text-editor-pwa Got a project that you’re looking to get started, think you may need my help with something or simpy want to reach out? Get in touch!

Google

Instantly

Creating a Simple Text Editor Progressive Web App with React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Recreating Spotify Playlists using GraphQL & React Native

Tired of Learning 50 New Concepts to Build a Form? Say Hello to Lighthouse for PHP

How I Grew My Open-Source Japanese Learning Platform to 10k Monthly Users and 640+ GitHub Stars

Stop Guessing Your Rates: How Filipino Web Devs Can Price Projects Like Pros

Achieving Reliable E2E Tests in Cypress: Overcome cy.wait Pitfalls

You Should Use This for Your Next Project: Random Image API

Recreating Spotify Playlists using GraphQL & React Native

Tired of Learning 50 New Concepts to Build a Form? Say Hello to Lighthouse for PHP

How I Grew My Open-Source Japanese Learning Platform to 10k Monthly Users and 640+ GitHub Stars

Stop Guessing Your Rates: How Filipino Web Devs Can Price Projects Like Pros

Achieving Reliable E2E Tests in Cypress: Overcome cy.wait Pitfalls

You Should Use This for Your Next Project: Random Image API

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps