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 web applications that have the following attributes:
- 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 3 months time spent using the application was up by 40% compared to the old mobile web experience, user-generated ad revenue was up 44% and core engagements was up by 60%”, so it’s no wonder why businesses are switching to this kind of application for their mobile experiences. Google list the main benefits of PWAs as:
- Reliable — Load instantly and never show the downasaur, even in uncertain network conditions.
- Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging — Feel like a natural app on the device, with an immersive user experience.
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 text-editor-pwa directory and running:
npm start
If you now open a Chrome window pointing to localhost:3000 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 inspect and then toggling the
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 /public folder as 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 <img> is selected (rather than the input itself). Change your App.js to the following:
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 App.css add the following:
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 (right-click > inspect > audits). 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 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, create-react-app creates a service worker file for you in /src named serviceWorker.js. We just need to register this service worker in our application. To do this we want to edit our index.js file in /src to look like this:
By default the readily created service worker only works when NODE_ENV=Production. To enable our service worker for development you simply have to open serviceWorker.js and change the line if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) to 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 /public folder with the names icon.png and icon512.png respectively:
Now, let’s change our manifest.json in the /public folder to the following:
And update our index.html so that the head looks like this:
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 Firebase Console, create a new project, and call it 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 npm run build && firebase deploy. 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.
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 @jamiemaison, i’d love to see what you’ve created!
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!