Antoinebr

curl --user-agent "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.1 Mobile Safari/537.36 (compatible);" -v $@

Antoinebr

<!-- 👇 Scroll down 👇 -->

{# variables #}
{% set my_variable = 'Hello world' %}

  {# get variables from somewhere else #}
  {% import 'path/to/hubl-variables.html' as site_vars %}
  {{ site_vars.my_external_variable }}

Antoinebr

An example of a webPageTest script

setEventName    Go to HomePage

navigate    https://monbraceletnato.fr

setEventName    Display category page

execAndWait document.querySelectorAll('.home-cta a')[1].click();

Antoinebr

GKE

Set up a Redis master

Set up gcloud and kubectl credentials

gcloud container clusters get-credentials antoine-cluster  --zone europe-west4-c

Antoinebr

Use the performance object to monitor RUM

    const sleep = () => new Promise( (resolve, reject) => setTimeout( () => resolve(), 100 ));

    const init = async () => {
      performance.mark('One');

 await sleep();

Antoinebr

A service worker for basic offline

// always check for the most current version of Workbox
// https://github.com/GoogleChrome/workbox/releases
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.3/workbox-sw.js');

const OFFLINE_HTML = '/offline/offline.html';
const PRECACHE = [
  { url: OFFLINE_HTML, revision: '70f044fda3e9647a98f084763ae2c32a' }

Antoinebr

Detect standalone IOS

// Detects if device is on iOS 
const isIos = () => {
  const userAgent = window.navigator.userAgent.toLowerCase();
  return /iphone|ipad|ipod/.test( userAgent );
}
// Detects if device is in standalone mode

Antoinebr

// The lazyoad class is added

<?php the_post_thumbnail('medium', array('class' => "img-responsive lazyload")); ?>

Antoinebr

Install workbox

npm install workbox-cli.

List your assets that will only change at build time

Antoinebr

bit.ly/pwa-tips

Show an offline page when you have a cache miss

1 create an offline page and add the URL to the preache