A Drupal developer’s information to Progressive Web Apps

The following article is a companion to my presentation at Drupalcon and Drupalcamp protecting Progressive Web Apps implementations.

Progressive Web Apps (PWA) have help from a number of the prime tech firms, together with Google and Microsoft, with the frequent objective being “Web apps should be able to do anything iOS, Android, or desktop apps can.” PWAs can add worth to companies at a wide range of completely different levels. All tasks have limitations, whether or not they be growth sources, timeline, price range, or technical debt. Even with “unlimited resources,” growing an app from a single codebase, utilizing generally identified net applied sciences, permits for a extra frictionless, sane launch cycle.

Disclaimers:

• PWA is a group of various methods mixed in an online browser to create an “app-like” expertise.
• This info is from an architect’s perspective for selecting and implementing varied applied sciences that come collectively to construct a product.
• Below is a high-level end-to-end define of a path to launch a Drupal web site on the app shops. Each part might be its personal in-depth weblog submit.
• The methods are written with Drupal in thoughts, however you’ll be able to apply lots of them to all net apps.

What is a PWA?

Benefits of a PWA implementation:

• Increased Lighthouse rating and search engine optimisation.
• Single codebase.
• Frictionless testing.
• Instant suggestions loop for growth cycles.
• Use of current PaaS deployment workflows, together with Acquia, Pantheon, Platform.sh and many others.
• Use of net applied sciences which can be a well-recognized skillset for a big selection of builders.
• Provides the one cross-platform growth answer that delivers a full-fledged desktop expertise.
• Offers limitless choices to customise a design with out counting on a cross-platform framework’s restricted UI parts.

This article covers some primary factors for PWA deployment. There are many particulars to contemplate each on the architect and developer ranges. The following matters are mentioned:

• PWA minimal necessities and Drupal PWA module as a place to begin.
• Publishing on app shops.
• Everything you might want to learn about making your PWA really feel app-like.

PWA module on Drupal.org

The Drupal PWA module is an answer that generates a service employee for caching methods and offline capabilities. Its secondary performance additionally generates a manifest.json, so as soon as put in, it can fulfill the basic requirements of a PWA out-of-the-box.

There is performance within the module’s service employee that gives distinctive options to Drupal-specific habits, though you can too apply these options to apps outdoors of Drupal.

Offline caching

Offline caching with a service employee is without doubt one of the functionalities that defines a PWA.

The following photos summarize how a service employee acts as a proxy (sitting between the consumer and the web/webserver) to intercept HTTP requests from the browser.

During the primary request to the /about web page, the browser reaches the community, and upon returning a 200 response from the server, the Javascript service employee calls cache.put() to retailer the HTML and all belongings within the Cache API.

On the second journey, the service employee bypasses the community utterly and serves the web page from the Cache API retailer within the consumer’s browser, loading the web page immediately. It also can load the web page offline.

The browser can precache pages to make them load immediately earlier than the consumer visits them and even load offline earlier than a go to. However, as a result of in Drupal, the CSS/JS filenames change after compression, the answer should tackle the issue of figuring out these belongings earlier than it might precache them by way of a service employee. It does this by internally requesting the URLs set within the admin panel and extracting belongings from the DOM. This permits the service employee install event to fetch all CSS/JS and pictures from these paperwork to retailer in Cache API. The full pages will then be viewable offline and cargo immediately, even when the consumer by no means visits them first.

Below, I fetch all of the belongings from the URLs set within the admin panel to inject later into the service employee precache belongings array. In D8, I modified the request to make use of Drupal::httpClient(), which is the up to date model of drupal_http_request() in D7 and is a wrapper for the PHP Guzzle library.

 foreach ($pages as $web page) {
      strive {
        // URL is validated as inside in ConfigurationForm.php.
        $url = Url::fromUserInput($web page, ['absolute' => TRUE])->toString(TRUE);
        $url_string = $url->getGeneratedUrl();
        $response = Drupal::httpClient()->get($url_string, array('headers' => array('Accept' => 'textual content/plain')));

This code matches all belongings wanted:

// Get all DOM knowledge.

      $dom = new DOMDocument();

      @$dom->loadHTML($knowledge);
      $xpath = new DOMXPath($dom);
      foreach ($xpath->question('//script[@src]') as $script) {
        $sources[] = $script->getAttribute('src');
      }
      foreach ($xpath->question('//hyperlink[@rel="stylesheet"][@href]') as $stylesheet) {
        $sources[] = $stylesheet->getAttribute('href');
      }
      foreach ($xpath->question('//fashion[@media="all" or @media="screen"]') as $stylesheets) $
      foreach ($xpath->question('//img[@src]') as $picture) {
        $sources[] = $image->getAttribute('src');
      }
    }

Below, you’ll be able to see the ultimate end result within the processed serviceworker.js file that’s output within the browser. The variables within the service employee are changed with the trail to the belongings to cache.

Phone residence uninstall

The module supplies one other intelligent piece of performance—accountable cleanup when uninstalled. The module sends a request again to a URL created by the module. If the URL doesn’t exist, it means the module has been uninstalled. The service employee then unregisters itself and deletes all associated caches left on the consumer’s browser.

// Fetch phone-home URL and course of response.

  let phoneHomeUrl = fetch(PWA_PHONE_HOME_URL)

  .then(perform (response) {

    // if no community, do not attempt to phone-home.

    if (!navigator.onLine) {

      console.debug('PWA: Phone-home - Network not detected.');

    }
    // if community + 200, do nothing
    if (response.standing === 200) {
      console.debug('PWA: Phone-home - Network detected, module detected.');
    }
    // if community + 404, uninstall
    if (response.standing === 404) {
      console.debug('PWA: Phone-home - Network detected, module NOT detected. UNINSTALLING.');
// Let SW try to unregister itself.
      Promise.resolve(pwaUninstallServiceEmployee());
    }
    return Promise.resolve();
  })
  .catch(perform(error) {
    console.error('PWA: Phone-home - ', error);
  });
};

Testing notes

Disable the module on dev because it supplies an additional caching layer. Any adjustments pushed to manufacturing for CSS or different belongings with cache first methods needs to be adopted by incrementing the service employee model to bust the cache.

You can discover further debugging steps for a service employee on this PWA module documentation page.

Using the Chrome console to remote debug on a cellular system is feasible on Android and may be useful.

2.x model

The 2.x and seven.2x variations port the service employee to Workbox, the place you’ll be able to set caching methods. Here, setting caching methods for various asset sorts and routes is simplified from about 30 traces of code utilizing simply the javascript Fetch API to about 5 traces. Some individuals could also be proof against libraries, however that is the path Google is taking with PWAs.

Workbox caching strategies are just like these in different caching layers equivalent to Varnish. For instance, by default, picture belongings and fonts are set to “cache first,” so they’re at all times served immediately. HTML would greatest be carried out as stale-while-revalidate.

There can also be performance in Workbox, equivalent to background sync, the place a failed submit request will retry upon coming again on-line.

For extra info on what a service employee can do and all of the use instances the place it could be useful, examine the W3 Service Workers Demo repo on GitHub.

Get your net app within the app shops

PWA builder is an online utility powered by Microsoft the place you enter your URL and it generates the whole lot you might want to undergo the app shops.

For Android, it makes use of TWA, and for iOS, it wraps your net app in native SWIFT code utilizing WebKit’s WKWebView. These are methods I’ve been utilizing since 2013, manner again when Drupal was a buzzy know-how and being utilized by startups. Businesses that had mobile-optimized Drupal web sites wished them on the app shops. Before Android TWA, builders used Webview, and earlier than WKWebView, there was UIWebView.

Recently PWA builder added a solution for iOS utilizing WKWebView, which confirms my perception that that is the most suitable choice to get your PWA into the App Store. Maximilian Firtman additionally reveals this as the answer in his course “Creating Progressive Web Apps with Vue,” which I bought to see his reply to the issue.

The PWA module supplies the whole lot you might want to run by PWA Builder:

• For Android, it creates a light-weight .apk/.aap utilizing TWA to undergo the Play Store 800kb.
• For iOS, it wraps your web site in WKWebView to undergo the App Store.

A reside demo I put collectively of PWA builder is right here. [[EDITORS – MISSING LINK]]

Android and TWA

The Google and Chromium groups are at the moment the strongest driving forces behind PWAs. Therefore, TWA is designed particularly to get your PWA into the Play Store. On the opposite, WKWebView is actually a workaround not explicitly supported by Apple. However, WKWebView is extraordinarily highly effective, regardless that Apple would not promote this or have a lot documentation on its capabilities.

Trusted Web Activity is actually a Chrome course of working in full display screen with a standing bar and loading display screen. The thread is working in the identical course of because the Chrome app in your cellphone. For instance, if you’re logged in in your Chrome browser, you can be logged in in your TWA app. To clear up any doable confusion ensuing from this, the TWA crew has added a “toast,” which means the primary time the consumer opens the app, a notification reveals “Running in Chrome.” This solely occurs the primary time the app is put in. This annoyance is sufficient for some groups to ditch TWA and use the WebView class as a substitute; nonetheless, Google discouraged this as you lose out on the whole lot baked into the Chrome net browser.

The main points Google makes about utilizing TWA are:

• Chrome is function full.
• Faster than Webview.
• Evergreen (at all times the up-to-date model of Chrome).

Additional helpful performance.

• Chrome handles frictionless OAuth requests.
• Share cookies, native storage, and saved settings with the popular browser.

Below is a comparability chart of the whole lot you get when utilizing TWA as a substitute of a Webview wrapper.

Webkit: WKWebView

There are a number of issues for publishing on the App Store. WKWebView is actually a workaround and never a way implicitly endorsed by Apple to launch a local app. Some caveats include this. The most essential is to be aware of Apple’s minimal functionality guidelines.

From my expertise, you can be accredited for those who do the whole lot you’ll be able to to make your net app “app-like” with helpful performance. Using the Webkit API to boost your net app is one other manner to supply further performance outdoors of your web site.

One method is to set a cookie relying on the start_url. For instance, add a parameter like myapp.com?ios_app and set a cookie to find out a separate stylesheet or customise logic.

Consider the next pattern implementation.

Note: This method shouldn’t be confused with Apple’s restricted add to homescreen help, which you normally hear about with Apple + PWAs. I will not cowl this as it is not the expertise a consumer would count on.

PWA builder supplies the minimal performance required to wrap a web site in WKWebView for App Store submission. For options equivalent to biometric or push notifications, you want a customized implementation of WKWebView.

In the graphic beneath, you’ll be able to see the supply recordsdata supplied. You can then simply compile your app in XCode and submit it to the app retailer.

PWA Builder provides:

• No Bounce when scrolling out of view with wKWebView.scrollView.bounces = false
• Service employee help
• Shortcuts URL seize
• Permitted navigation scopes
• Status bar customization
• Splash display screen from manifest props
• iOS app consciousness from JS code
• Mac Store help

A customized implementation of WKWebView can present:

• Push notifications: Push notifications are doable by posting the system ID matched to the Drupal UID, which may be extracted from the URL /consumer/{uid}/edit, for instance.
• Biometric: Biometric is carried out on all pages apart from consumer/login and consumer/register, and the cookie max expiration is prolonged. Biometric is proven each time the app is closed and reopened.
• WKUIDelegate: Present native UI parts, equivalent to alerts, inputs, or contextual menus.
• evaluateJavaScript(): Execute any Javascript. The prospects listed below are infinite.
• Password administration utilizing associated domains: Placing a public keypair in your /.well-known listing will enable your native app to belief your web site and autofill passwords.

View the README.md of WKWebView+, a challenge I’m engaged on that makes it simple to combine this enhanced performance into any iOS PWA.

Cons of WKWebView

Give the next issues consideration earlier than implementing WKWebView:

• There is a paradigm shift in considering required for frontend builders to debug a PWA appropriately. Though it depends on net applied sciences, there’s a studying curve.
• Without a local iOS developer, sure options should not doable to implement. However, WKWebView+ was designed to unravel this.
• Though the outlook for Apple and PWAs looks positive, as traditional, you’re on the mercy of the following Safari launch.

Moving ahead

Many of the options out there with TWA are solely out there on Chromium-based browsers. Webkit cellular/WKWebView lags. This lag contains push notifications, “add to home screen,” and total net browser requirements. Maximilian Firtman’s weblog is at the moment probably the greatest sources for a abstract of the updates within the newest Safari, even when they were not announced in the release notes.

The optimistic outlook is that WKWebView relies on the open-source challenge Webkit, and there’s a collaboration among the many builders that work on each Chromium and WebEquipment. Anyone can create a problem and pull request. Often, options already implemented in Chrome have patches submitted to Webkit that do the identical.

Make it app-like

Websites that took all the fitting vitaminsA PWA is actually a group of net applied sciences that mix to make your net expertise app-like, as if the web site “took all the right vitamins.” Below I’ve recognized factors that make up a very good PWA:

• UX/UI: Visual downside fixing is on the core of creating your web site really feel like an app. An awesome CSS developer with a watch for design and element, equivalent to animations, enter/font sizes, and scrolling points, is important.
• Stay present with app-like enhancements: Keeping frontend code up to date and appropriate throughout WebEquipment/Chrome requires analysis and periodic updates, significantly when a brand new model of the iPhone is launched.
• Implement expanded net capabilities: The Chromium crew continuously improves the browser expertise. This may be tracked in Project Fugu, the overarching net capabilities challenge. The closest factor there’s to complete documentation on PWAs is on webdev.
• Page velocity: I lined caching with a service employee, however there are numerous different applied sciences and methods.

Some examples of app-like enhancements embrace utilizing HTML/CSS/JS applied sciences generally out there to net builders, after which making them frictionless to implement, take a look at, and deploy. You can discover a good instance of an online utility utilizing many of those options here.

Suggestions embrace:

• Javascript touch events: Disable pinch zoom and add swipe/multitouch gestures.
• CSS:
  • Minify/optimize CSS and apply Lighthouse options.
  • “App-like” enter/font sizes and ensure the whole lot suits within the viewport; make it visually appear to be an app.
  • Tactful use of preloaders.
• Utilize cookies: Set cookie based mostly on app begin URL.
• HTML attributes:
• Ajax API (Drupal particular), Websockets, or SPA framework.
• iPhone particular options:

Wrap up

PWA brings collectively completely different methods to create an app-like expertise in an online browser. I outlined an strategy to PWA implementation for a Drupal web site, however different choices are definitely out there with related designs. What implementations of PWA may assist your group’s consumer expertise?

View the README.md of WKWebView+, a challenge I’m engaged on that makes it simple to combine this enhanced performance into any iOS PWA. 

Ionic the religious successor to Cordova is a well-liked framework that additionally makes use of WKWebView to construct native iOS.