My first Progressive Web app is ebitcoins.app. The .app domain provides Security, Discoverability, Name Recognition, and SEO.
Progressive Web App Score
I 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 App
I 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 App
These 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 App
Google 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
- Detected JavaScript libraries
- 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:
- Reliable
- Fast
- Engaging
Reliable
When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state.
Additionally, a service worker, written in JavaScript, is like a client-side proxy and puts you in control of the cache and how to respond to resource requests. By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.
Fast
53% 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.
Engaging
Progressive 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
Examples of Progressive Web Apps
Lastly, some great examples of Progressive Web Apps (PWAs) include:
Why HTTPS Matters
You should always protect all of your websites with HTTPS, even if they don’t handle sensitive communications.
Additionally, HTTPS helps prevent intruders from tampering with the communications between your websites and your users’ browsers. Intruders include intentionally malicious attackers, and legitimate but intrusive companies, such as ISPs or hotels that inject ads into pages.
HTTPS is the future of the web
Powerful, new web platform features, such as taking pictures or recording audio with getUserMedia(), enabling offline app experiences with service workers, or building progressive web apps, require explicit permission from the user before executing.
Passive Listeners
Setting the passive option on your touch and wheel event listeners can improve scrolling performance
Avoids document.write()
One known cause of poor performance is the use of document.write() inside pages, specifically those uses that inject scripts. As innocuous as the following looks, it can cause real issues for users.
Cross-Origin Resource Sharing (CORS)
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.
Furthermore, A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.
Avoids Requesting The Geolocation Permission On Page Load
Users are mistrustful of or confused by pages that automatically request their location on page load. Rather than automatically requesting a user’s location on page load, tie the request to a user’s gesture, such as a tapping a “Find Stores Near Me” button.
In conclusion, make sure that the gesture clearly and explicitly expresses the need for the user’s location.
HTML doctype
The <!DOCTYPE html> declaration is used to inform a website visitor’s browser that the document being rendered is an HTML document.
While not actually an HTML element itself, every HTML document should being with a DOCTYPE declaration to be compliant with HTML standards.
Detects the Javascript libraries
The Library Detector extension discovers which Javascript libraries are being utilized on webpages you visit and displays their icons, along with a link to the library’s homepage, in the address bar.
Avoids Requesting The Notification Permission On Page Load
As explained in What Makes a Good Notification, good notifications are timely, relevant, and precise. If your page asks for permission to send notifications on page load, those notifications may not be relevant to your users or precise to their needs.
