Show Menu
Cheatography

Progressive Web Applications Cheat Sheet (DRAFT) by [deleted]

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Introd­uction

PWAs were originally proposed by Google back in 2015, and were described with this all-to­o-s­imple descri­pti­on: “A Progre­ssive Web App uses modern web capabi­lities to deliver an app-like user experi­enc­e.” However, there is a great deal more to a PWA than “modern web capabi­lit­ies”. At its core, a PWA is all about delivering a better, faster user experi­ence, regardless of what browser or device they are using.

there are several criteria that Google laid out to better determine if an app fits the PWA mold. To be considered a Progre­ssive Web App, the app must be:

PWA Attributes

Prog­res­sive: In other words, the app should work for every user, regardless of browser choice. The app must be built with progre­ssive enhanc­ement as a core tenet.
Resp­ons­ive: Adapt to any form factor, such as a tablet, mobile device, desktop, or any other device that consumes web content via a browser.
Conn­ect­ivity indepe­nde­nt: Ability to work offline or in poor connec­tivity situat­ions.
App-­lik­e-P­res­ent­ati­on: The app should use the app-shell model to provide app-style experi­ences.
Fresh: Always up-to-­date, enabled by the service worker update process.
Safe: Delivered via HTTPS to protect data from interc­eption, snooping or tampering.
Disc­ove­rab­le: Identified as applic­ations, as defined by W3C manifests, and implem­enting a service worker regist­ration scope, making them visible to search engines.
Re-e­nga­gea­ble: Users are able to re-engage with applic­ations through push notifi­cations and other inform­ational display features.
Inst­all­able: Allow users to have the freedom to install (or keep) apps on their device without having to rely on an app store.
Link­able: Can be shared via URLs, without the need for a complex instal­lation process.

Under the Hood of the PWA Archit­ecture

There are two parts to a PWA: service workers and applic­ation shell archit­ect­ure. Service workers are bits of code that act like a proxy that sits between the website and the browser. Its job is to intercept what is asked of the browser and then hijack the responses given back. In effect, the service worker caches inform­ation, so the data is only fetched once for replay thousands of times. Service workers also exist to deliver extra features via browsers, which were impossible in the past. These include:

Push notifi­cat­ions: Informs the user of an event, such as a new message, a page being updated and so forth.
Sync­hro­niz­ati­on: Updates data in the backgr­ound, even when the user isn’t using the web page or website.
Cach­ing: Stores inform­ation for offline use, allowing the user to have some functi­onality of a site while offline.
Pre-­fet­ching data: Identifies data that may be used in the near future, such as images or content not yet displayed, and pre-fe­tches it to speed up access.
Inco­rpo­rating additional data feeds: PWAs can query hardware such as geoloc­ation, GPS, sensors, and so on using AJAX code.
 

PWA

PWA Advantages

No Instal­lation Needed: PWAs are basically just web pages; users can consume them directly from their browser and then decide whether or not to keep them for offline use.
Instant Gratif­ica­tion: PWAs load instantly and do not require extensive prereq­uisites to run on the end user’s device.
Instant updates: PWAs are updated on use, just like a web page, which means PWAs will always be current with the latest deployed features and code.
Elim­inates the App Store: Users do not need to access an app store to receive a PWA or add it to their desktop or favorites.
Port­abi­lity: As websites, PWAs prove to be fully portable, and do not require any type of special packaging and deployment models.
Secu­re: PWAs are secure, hosted over HTTPS, using TLS between the endpoint and server.
Resp­ons­ive: PWAs use responsive web design (RWD) techni­ques, which allows them to work on all combin­ations of mobile devices, laptops, smart phones and tablets.

PWA Disadv­antages

Single sign-on and cross-­app­lic­ation logins are not suppor­ted: Third-­party applic­ations that require a login, such as Facebook and Google, will continue to require their individual login, as PWAs are unable to indepe­ndently collect and store that login inform­ation.
Lack of hardware functi­onality support: PWAs do not support all the hardware components that native apps support, such as cameras, GPS, and biometric access­ories.
Browser compat­ibi­lity: Newer versions of Chrome, Opera, and Samsung’s Android browser support PWA. However, IE, Edge, Safari and many custom and propri­etary default browsers do not support PWA.
                       

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi