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

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

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

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

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

gtag('event', 'purchase', {
  "transaction_id": "24.031608523954162",
  "affiliation": "Google online store",
  "value": 23.07,
  "currency": "USD",
  "tax": 1.24,
  "shipping": 0,
  "items": [
    {
      "id": "P12345",

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

Antoinebr

const getContent  = async () => {

      const response = await fetch('https://jsonplaceholder.typicode.com/posts');

      // reponse is not correct
      if (!response.ok) throw new Error(`We received an invalid response  ${await response.text()}`);

 const reponseJson = await response.json();