Everything You Need to Know to Build a Progressive Web App with Freelancers [INFOGRAPHIC]

Image for Everything You Need to Know to Build a Progressive Web App with Freelancers [INFOGRAPHIC]

Progressive web apps (PWAs) are all the rage, and for good reason. These next-generation mobile websites are easier to implement than native apps, provide an “app-like” UI/UX, and boast an impressive track record for helping businesses boost the ROI of their mobile assets.

When Pinterest rebuilt its mobile site as a PWA, browsing time increased 40%, ad revenue went up 44%, and core engagements shot up 60% compared with its previous mobile web experience. Best of all, it took only three months for Pinterest to completely revamp its mobile presence with a PWA.

Eager to join the ranks of Pinterest and other PWA success stories? Here’s a jumping off point for building a PWA with freelancers.

1. Start with a basic web app

The initial steps toward building a PWA are identical to those for building any other modern web application.

  1. Start with the planning and requirements-gathering phase typical of any software development life cycle (SDLC). This is where you define what you want your app to do.
  2. Transform those requirements into the blueprints for an app with wireframes, user stories, and mock-ups by working with a UI/UX designer.
  3. Set up the server side (database and hosting) of your application with the help of a back-end developer.
  4. Convert those designs into a working UI with the help of a front-end developer.

PWA features are supported in popular JavaScript frameworks such as Angular, React, and Vue, so there’s a good chance you’re already well on your way to a PWA app. You can use Chrome’s Lighthouse extension to check for compliance.

2. MAKE YOUR UI RESPONSIVE

Responsive web design (RWD) is the art of designing web pages to automatically resize and reformat based on the screen size or orientation of the end user’s device. It’s a must given the overall shift in the web development landscape toward a mobile-first philosophy. It’s also one of the items on Google’s PWA checklist. From CSS frameworks such as Bootstrap to tools such as Gridset, there are many ways a web designer can incorporate RWD into your PWA.

3. Make your web app progressive

Progressive enhancement is a design strategy where the core content of a web page loads first, before more-nuanced presentation layers and features are progressively introduced based on the capabilities of the end user’s browser, connection, or device. It ensures that even someone with an old phone and a 3G connection will be able to enjoy a baseline level of UX. A front-end developer can make an app progressive by building an application shell: basic HTML and CSS that will give users something to look at other than a blank page while the actual functional JavaScript loads.

awesome job post

4. SERVE WEB PAGES OVER HTTPS

HTTPS is one of the major items on Google’s PWA checklist. The S stands for “secure” and indicates that some form of encryption (often SSL or TLS) is being used to protect communications between your websites and your users’ browsers. It’s also required for using service workers and other features needed to build a PWA. To set up HTTPS one must:

  • Host one’s web app with a dedicated IP address.
  • Buy an SSL/TSL or digital certificate (basically an ID that uniquely identifies your website). Alternatively you can set up your own for free if you own your own server.
  • Activate and install your certificate through the web host (a one- or two-day wait) or manually with the help of a network administrator.
  • Migrate all your web pages from HTTP to HTTPS with the help of a front-end developer.

5. Set up service workers

The service worker provides a powerful API for intercepting and handling network requests. This script can run in the background of your browser to provide features such as push notifications and background sync. It’s also the technical foundation behind the PWA’s ability to function offline, allowing the app to run from a cache of precoded responses. A web developer familiar with the ins and outs of working with dynamic caching is a must for unlocking the full potential of a PWA with service workers.

6. Set up an icon for your PWA with an app manifest

The web app manifest is a JSON file that describes the metadata of your PWA. The manifest tells the browser how your app will behave once “installed” on the user’s mobile device, letting you describe your app name, icon, and starting URL. It’s required for Chrome to show the ”Add to Home Screen” prompt, which lets users add your icon to their device’s app launcher or home screen. It also lets you control how your PWA is displayed in the browser once launched (e.g. hiding the address bar to look like a native app). The app manifest is quick and easy for a front-end developer to setup. Be sure to have your graphic designer design the icon as you want it to display on a user’s home screen.

Further reading

In a nutshell, a PWA is a user-first, performance-oriented web application that can install locally to provide an app-like user experience. The “progressive” part is about providing a baseline level of quality to all users, including those with poor connections, older browsers, and low-price devices. This article only scratched the surface of what you can do with a PWA. Check out Google’s PWA checklist for a full list of features. Upwork’s Hiring Headquarters is filled with resources you can use to help you build a team of freelancers and bring your PWA project to life.

 

Upwork is a freelancing website where businesses of all sizes can find talented professionals across multiple disciplines and categories. If you are a business and are looking to get projects done, consider signing up!

Get Started
Yoshitaka Shiotsu

by - Technical Copywriter & Digital Marketing Consultant

Yoshitaka (Chris) Shiotsu is a technical copywriter and digital marketing consultant on Upwork. He brings the researching prowess and technical savvy of an electrical engineer… more