Snippet repository

#intro.md

There are many code snippets which can be quickly used to show/demo stuff in Chrome for demos or pitches, or just debugging, QA and testing. This is a collection of such snippets with some instructions Snippets can be saved to Chrome and run via one click again!

How to use snippets in Chrome

• Open Command Menu in DevTools
• Apple-Shift-P
• Pick "Create new snippet"
• Copy & paste code from this repository

Later on run snippet by:

• Open Command menu again
• Run snippet via ! operator (For SW snippets select SW context in JS console)

googleyolo.js

/*
Simulate GoogleYolo Signup

Inject library
Steal [client ID](https://developers.google.com/identity/one-tap/web/get-started#get_your_google_api_client_id)
from publisher site (trigger google login, then copy from URL of popup)
Then use this snippet to trigger auto-sign-up popup:
*/
var elem = document.createElement('script');
elem.src = 'https://smartlock.google.com/client';
document.head.appendChild(elem);

const hintPromise = googleyolo.hint({
  supportedAuthMethods: ['https://accounts.google.com'],
  supportedIdTokenProviders: [
    {
      uri: 'https://accounts.google.com',
      clientId: 'YOUR_GOOGLE_CLIENT_ID'
    }
  ]
});

/*
Simulate GoogleYolo Signin

Inject library
Steal [client ID](https://developers.google.com/identity/one-tap/web/get-started#get_your_google_api_client_id)
from publisher site (trigger google login, then copy from URL of popup)
Then use this snippet to trigger auto-sign-up popup (make sure you had logged in before):
*/
var elem = document.createElement('script');
elem.src = 'https://smartlock.google.com/client';
document.head.appendChild(elem);

const retrievePromise = googleyolo.retrieve({
  supportedAuthMethods: [
    'https://accounts.google.com',
    'googleyolo://id-and-password'
  ],
  supportedIdTokenProviders: [
    {
      uri: 'https://accounts.google.com',
      clientId: 'YOUR_GOOGLE_CLIENT_ID'
    }
  ]
});

paymentrequest.js

/*
Payment API

Bring up Payment API Screen
*/
const details = {
  total: { label: 'Donation', amount: { currency: 'USD', value: '55.00' } },
  displayItems: [
    {
      label: 'Original donation amount',
      amount: { currency: 'USD', value: '65.00' }
    },
    {
      label: 'Friends and family discount',
      amount: { currency: 'USD', value: '-10.00' }
    }
  ]
};

const methodData = [
  {
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard'],
      supportedTypes: ['debit', 'credit']
    }
  }
];

new PaymentRequest(methodData, details, {
  requestPayerName: true,
  requestPayerPhone: true,
  requestPayerEmail: true,
  requestShipping: true
}).show();

serviceworker.js

/*
Service Worker

Check/show subscription state
Make sure to run in context of service worker in JS console
Endpoint/Subscription process is described [here](https://developers.google.com/web/fundamentals/codelabs/push-notifications/#subscribe_the_user)
*/
self.registration.pushManager.getSubscription().then(subscription => {
  console.log(subscription);
});

/*
Subscribe user
Make sure to run in context of service worker in JS console
Endpoint/Subscription process is described [here](https://developers.google.com/web/fundamentals/codelabs/push-notifications/#subscribe_the_user)
This is nice, as it will also show the permission popup etc.
Get an application key as described [here](https://developers.google.com/web/fundamentals/codelabs/push-notifications/#get_application_server_keys)
*/
const subscribeParams = { userVisibleOnly: true };
const applicationServerPublicKey = 'YOUR_APPLICATION_KEY';
const applicationServerKey = new TextEncoder('utf-8').encode(
  applicationServerPublicKey
);
subscribeParams.applicationServerKey = applicationServerKey;
reg.pushManager.subscribe(subscribeParams);

/*
Bring up notification
Make sure to run in context of service worker in JS console
See [here](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#Parameters) for possible parameters
*/
const title = 'Push Codelab';
const options = {
  body: 'Yay it works.',
  icon: 'http://www.memefaces.com/static/images/memes/179.jpg',
  badge: 'http://www.memefaces.com/static/images/memes/179.jpg',
  image: 'http://www.memefaces.com/static/images/memes/179.jpg',
  tag: 123456,
  renotify: true
};

self.registration.showNotification(title, options);

/*
Inject Push Event
Analyse the pub’s push event handler beforehand to see what params and data they expect with the push event payload
This can also be done via DevTools application tab in Chrome Canary
*/
new Promise((resolve, reject) => {
  const obj = JSON.stringify({
    Message: '{"title": "Martin Test","id": "167589970"}'
  });
  const fakePushEvent = new PushEvent('push', { data: obj });

  fakePushEvent.waitUntil = promise => {
    promise.then(resolve, reject);
  };

  self.dispatchEvent(fakePushEvent);
}).then(() => {});

/*
Inject Fetch Event
Find more ways to trigger sw events [here](https://medium.com/dev-channel/testing-service-workers-318d7b016b19#37d8)
*/
const event = new FetchEvent('fetch', {
  request: new Request('/index.html')
});

self.dispatchEvent(fakeventePushEvent);

/*
Print out content of cached resources
To verify what resource cached (e.g. dynamic stuff like json)
Make sure to choose the [appropriate method](https://developer.mozilla.org/de/docs/Web/API/Response#Methods) depending on content type
*/
caches.open('CACH_NAME_AS_SEEN_IN_APP_TAB').then(cache => {
  cache
    .match('manifest.json', {})
    .then(response => response.json())
    .then(data => {
      console.log(data);
    });
});

webappmanifest.js

/*
Manifest

Inject Manifest
Auto-create manifest via pwabuilder.com
Copy&Paste JSON
Convert to data-uri via [this site](https://dopiaza.org/tools/datauri/index.php)
*/
const uri = 'INSERT_DATA_URL_HERE';
var elem = document.createElement('link');
elem.rel = 'manifest';
elem.href = uri;
document.head.appendChild(elem);