Progressive Web App

What is a Progressive Web App? A progressive web app (PWA) is a web application that uses modern web technologies to deliver a user experience equal to any mobile app. An active open source community, in conjunction with tech leaders like Google and Microsoft, pushes the PWA agenda forward in an effort to "bridge the app gap."

Basically, a PWA runs your app in a web browser. Because there's essentially a two-party system of the Play and App stores, the focus is on two browsers: Google Chrome and Apple Safari (built on top of the open-source Chromium and WebKit, respectively).

PWAs are built the same way as any website or web app. They use the latest mobile technologies and implement UX best practices. PWAs can also hook the browser in with native code to improve the experience.

If you type "What is a PWA" in your favorite search engine, you'll probably get a stock response similar to "PWAs are designed to be fast, reliable, and engaging, with the ability to work offline and be installed on a device's home screen." While this is partly true, it's just the tip of the iceberg for what a PWA has the potential to be and what it's evolving into.

Continue reading more in the post "A PWA is the Web Browser" on Opensource.com

Progressive Web Apps by definition are:


* Reliable — Load instantly and never show an "Offline" screen to the visitor, even in uncertain network conditions.
* Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling.
* Engaging — Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

Continue reading more about PWAs from Google or on MDN.

By definition a PWA depends on the following technologies to be available:


* Service Workers
* Web App Manifest
* HTTPS

What does the PWA Drupal module do? The main benefit of this module is the use of Service Worker for caching and offline capabilities. Once the Service Worker is active, page loading is faster:


* All JS and CSS files will always be served from cache while being refreshed in the background. Same thing as Stale While Revalidate in Varnish.
* All pages are fetched from the network (as before) and a copy is kept in cache so it will be available when offline.
* Images are cached unless the save-data header is detected in order to be mindful of bandwidth usage and cache size. A fallback image should appear for any uncached image.

The module will also create a configurable manifest.json file to make the website installable on supporting mobile devices. Out of the box, the module fulfils enough PWA requirements that the "add to home screen" prompt is automatically triggered when a visitor often returns enough to your website. It provides a perfect PWA Lighthouse audit score by default as well.

Configuration Visit the configuration page and fill in what you need. The only way to change the logo used in the manifest file now is to implement hook_pwa_manifest_alter(&$manifest) and set the icons array. See a D7 example hook (This hook is D7 ONLY, D8 you may upload a manifest icon at /admin/config/pwa/settings).

By default, the manifest has the following properties:


* name: from variable_get('site_name')
* short_name: from variable_get('site_name')
* description: blank
* lang: default site language
* dir: default site language direction
* background_color: white
* theme_color: white
* start_url: /
* display: standalone
* icons: Druplicons in 144, 192, 512, and SVG

The D8 submodule pwa_extras currently does not have a README, see #3066848: Emit metatags for iOS from a submodule for documentation and discussion on current best practices for PWA markup. Also, see Apple's Configuring Web Applications.

Server Requirements This Drupal module requires PHP 7.2 or greater. We will continue to modify this minimum requirement to avoid supporting any EOL version of PHP. If you are using an older version, it is recommended to urgently upgrade your version of PHP to avoid unpatched security vulnerabilities.

Additionally, your web server MUST support secure connections using HTTPS. This is a requirement of the W3 specification and is not a choice made by the module maintainers.

Browser support As of May 2018 there is wide cross-browser support! See current status at the following canonical resources:


* Is Service Worker Ready? - browser support grouped by dependencies.
* caniuse.com/#feat=serviceworkers - historical support grouped by browser version.

A brief list of browsers that support Service Worker and Manifest:


* Chrome/Opera
* Firefox
* Edge 17+
* Safari macOS 11.1 / iOS 11.3+
* UC Browser 11.8+
* Samsung Internet 4+

Service Worker is a progressive enhancement, so browsers without support will behave exactly as normal websites. However, it will make things significantly faster, more network-resilient, and offer an offline branding opportunity in browsers that have support.

Related specifications The Cache API used by PWA is a new cache defined by the Service Worker spec.

Branches There are 4 branches of the PWA module.


* 7.x-1.x: The original code and most tested, it uses a vanilla JS Service Worker for caching strategies.
* 7.x-2.x: Service Worker based on Google's Workbox. Essentially a rewrite, and the creation of the pwa_webpush module. Release Notes.
* 8.x-1.x: The default D8 branch, uses the Service Worker from 7.x-1.x.
* 2.x: #3165795: PWA module 3.x roadmap Intended to be a port of 8.x-1.x to use the Workbox Service Worker and other PHP code improvements inspired by 7.x-2.x. Currently nothing has been done on the Workbox port so the branch is inactive, this may start in 2022.

Troubleshooting See important configuration notes & troubleshooting for D8.