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(); 

Antoinebr

<amp-list src="https://cors-anywhere.herokuapp.com/https://www.energiedirect.nl/api/v1/search?maxContentLength=150&maxresults=5&q=home"  single-item items="Results" width="900" height="100" layout="responsive" >
  <template type="amp-mustache">
    <p class="listitem">Dynamic DATA fetched with AJAX with amp-list 👍 : \{{Title}} </p>
  </template>
</amp-list>
  

Antoinebr

Edit Profile

nano ~/.bash_profile

Add this to the profile

getAmpCache(){

Antoinebr

Bust AMP cache

Demo on how to force cache refresh with AMP

NB : all the follwing instructions are on node.js

Demo

https://glitch.com/edit/#!/bust-amp-cache

Antoinebr

<script>
      

      // more documentation : https://developers.google.com/analytics/devguides/collection/analyticsjs/ecommerce 

      ga('require', 'ecommerce'); // You have to require the ecommerce Addon

      ga('ecommerce:addTransaction', {
        'id': '{{orderId}}',                     // Transaction ID. Required.
        'revenue': '{{orderToal}}',               // Grand Total.

Antoinebr

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://goo.gl/nhQhGp
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.

Antoinebr

/**
 * cacheOrNetwork
 * 
 * Look for and returns an event request in the cache
 * @param {eventRequest} event 
 * @param {string} cacheName 
 */
const cacheOrNetwork = async (event, cacheName) => {
    

Antoinebr

node ttfb.js https://www.google.com/ 20

Will create 20 curl test for https://www.google.com/

Antoinebr

[...document.querySelectorAll('input')].forEach( input => {


	input.setAttribute('value', `my type is ${input.getAttribute('type')}`);

	input.setAttribute('style', `color:black; font-size:20px; font-weight:bold;`);
	

});