Progressive Web App ScoreI created my first Progressive Web App to deliver an amazing User Experience, but also to test my skills as a UX/UI Designer and Front-end Developer.
My PWA score was provided by Lighthouse. Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
SEO – Progressive Web AppI earned an SEO score of 100/100 according to Google Lighthouse. My PWA is mobile friendly, has valid Structured Data, and is indexed by Google.
Accessibility – Progressive Web AppThese checks highlight opportunities to improve the accessibility of a web app. Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.
- Elements Have Discernible Names
- Elements Describe Contents Well
- Color Contrast Is Satisfactory
- Elements Are Well Structured
- Page Specifies Valid Language
- Meta Tags Used Properly
Best Practices – Progressive Web AppGoogle Lighthouse provided a list of the best practices that were used when creating ebitcoins.app.
- Avoids Application Cache
- Uses HTTPS
- Uses passive listeners to improve scrolling performance
- Avoids document.write()
- Links to cross-origin destinations are safe
- Avoids requesting the geolocation permission on page load
- Page has the HTML doctype
- Avoids requesting the notification permission on page load
What are Progressive Web Apps?Progressive Web Apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. According to Google, Progressive Web Applications are user experiences that have the reach of the web, and are:
Fast53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.
EngagingProgressive Web Apps are installable and live on the user’s home screen, without the need for an app store. They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications. Additionally, The Web App Manifest allows you to control how your app appears and how it’s launched. You can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome.
Why build a Progressive Web App?In addition, Building a high-quality Progressive Web App has substantial positive benefits, making it easy to delight your users, grow engagement and increase conversions. Some additional benefits of PWAs are:
- Worthy of being on the home screen
- Work reliably, no matter the network conditions
- Increased engagement
- Improved conversions