From DevTools to debuggers, here's how to get the best from Google's tools.
The web design industry moves in cycles. Progressive Web Apps (PWAs) are big news. Here are a few resources to guide you through them.
The PWA checklist
Load ‘smoothly’ Native apps were lauded for their swift and nimble response to user input. Use single-page applications and status bars to replicate this experience on your PWA.
Provide metadata Users can (and should) add PWAs to their devices’ start screens. This requires the presence of a metadata file, whose contents regulate the presentation of content.
Allow deep links PWAs differ from native apps due to their more expanded ‘social’ features. One neat aspect involves ‘deep links’, which enable users to share parts of the application with friends and colleagues.
Analyse with LightHouse
Space constraints prevent us from providing a complete list of all PWA to-do items. LightHouse automates the checklists for you. It happily runs from the shell, from Node.js or from the Chrome Developer Tools.
Use HTTPs Ideally pwas must be served over HTTPS. This prevents annoying man-in-the- middle attacks, which happen frequently on public Wi-Fi networks.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
What about AMP?
AMPs – short for Accelerated Mobile Pages – is a completely different technology with a similar set of goals. While PWAs create rich user experiences, an AMP is a snippet of JavaScript-based content intended to show up in search results.
In principle, AMPs live off a subset of HTML, which contains expansions intended to accelerate rendering. For example, an AMP image contains additional properties. They let the rendering process complete before the actual image file is available. JavaScript is run by a dedicated library enforcing multithreading in a fashion not dissimilar to the one seen on the Metro platform. Finally, an optional CDN caching system by Google ensures that content gets delivered with minimal delay.
Implementing AMPs does bring benefits in mobile search rankings – if your site is SEO-dependant, investing some effort might pay off.
What is Firebase?
While providing storage, initially, is not a problem, fast website growth usually leads to scaling problems. Fortunately, deploying Google’s Firebase storage service is a quick way to work around the problem. In addition, Google also provides market-leading authentication, cloud messaging and real-time data management solutions.
Deploying Google’s authentication service is beneficial in that it unburdens end users: instead of having to remember multiple user accounts for each site, a Google or Facebook account can be used in a cross-service fashion. Google can also take care of phone number verification and similar problems for a modest fee.
The well-known cloud messaging feature should not be new to Android-experienced developers: the API can also be accessed from the web, thereby providing a degree of feature parity to PWAs. Getting started with Firebase in JavaScript is not difficult – this article shows you how to add Firebase to your JS project.
This article was originally published in creative web design magazine Web Designer. Buy issue 281 or subscribe.
Tam Hanna is a software consultant who specialises in the management of carrier and device manufacturer relationships, mobile application distribution and development, design and prototyping of process computers and sensors. He was a regular contributor to Web Designer magazine in previous years, and now occupies his time as the owner of Tamoggemon Software and Computer Software.
