My first Progressive Web app is ebitcoins.app. The .app domain provides Security, Discoverability, Name Recognition, and SEO.
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.
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.
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.
Google Lighthouse provided a list of the best practices that were used when creating ebitcoins.app.
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:
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.
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.
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.
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:
Lastly, some great examples of Progressive Web Apps (PWAs) include:
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.
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.
Setting the passive option on your touch and wheel event listeners can improve scrolling performance
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) 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.
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.
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.
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.
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.
This post was last modified on November 28, 2018 4:13 pm