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.
- 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.
- Transform those requirements into the blueprints for an app with wireframes, user stories, and mock-ups by working with a UI/UX designer.
- Set up the server side (database and hosting) of your application with the help of a back-end developer.
- Convert those designs into a working UI with the help of a front-end developer.
2. MAKE YOUR UI RESPONSIVE
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.
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!