Skip to content

Instantly share code, notes, and snippets.

@tomayac

tomayac/#intro.md

Last active December 18, 2022 07:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tomayac/ebe078ab867a1ef91d017b450ac63936 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tomayac/ebe078ab867a1ef91d017b450ac63936 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tomayac revised this gist Nov 17, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions googleyolo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    /*
    Simulate OpenYolo Signup
    Simulate GoogleYolo Signup
    Inject library
    Steal [client ID](https://developers.google.com/identity/one-tap/web/get-started#get_your_google_api_client_id)
    @@ -21,7 +21,7 @@ const hintPromise = googleyolo.hint({
    });

    /*
    Simulate OpenYolo Signin
    Simulate GoogleYolo Signin
    Inject library
    Steal [client ID](https://developers.google.com/identity/one-tap/web/get-started#get_your_google_api_client_id)
  2. tomayac revised this gist Nov 17, 2017. 2 changed files with 8 additions and 8 deletions.
    12 changes: 6 additions & 6 deletions serviceworker.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ Service Worker
    Check/show subscription state
    Make sure to run in context of service worker in JS console
    Endpoint/Subscription process is described here
    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);
    @@ -12,9 +12,9 @@ self.registration.pushManager.getSubscription().then(subscription => {
    /*
    Subscribe user
    Make sure to run in context of service worker in JS console
    Endpoint/Subscription process is described here
    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
    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';
    @@ -27,7 +27,7 @@ reg.pushManager.subscribe(subscribeParams);
    /*
    Bring up notification
    Make sure to run in context of service worker in JS console
    See here for possible parameters
    See [here](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#Parameters) for possible parameters
    */
    const title = 'Push Codelab';
    const options = {
    @@ -61,7 +61,7 @@ new Promise((resolve, reject) => {

    /*
    Inject Fetch Event
    Find more ways to trigger sw events here
    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')
    @@ -72,7 +72,7 @@ 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 depending on content type
    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
    4 changes: 2 additions & 2 deletions webappmanifest.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,10 +4,10 @@ Manifest
    Inject Manifest
    Auto-create manifest via pwabuilder.com
    Copy&Paste JSON
    Convert to data-uri via this site
    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);
    document.head.appendChild(elem);
  3. tomayac revised this gist Nov 17, 2017. 3 changed files with 132 additions and 0 deletions.
    35 changes: 35 additions & 0 deletions paymentrequest.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    /*
    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();
    84 changes: 84 additions & 0 deletions serviceworker.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@
    /*
    Service Worker
    Check/show subscription state
    Make sure to run in context of service worker in JS console
    Endpoint/Subscription process is described here
    */
    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
    This is nice, as it will also show the permission popup etc.
    Get an application key as described here
    */
    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 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
    */
    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 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);
    });
    });
    13 changes: 13 additions & 0 deletions webappmanifest.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    /*
    Manifest
    Inject Manifest
    Auto-create manifest via pwabuilder.com
    Copy&Paste JSON
    Convert to data-uri via this site
    */
    const uri = 'INSERT_DATA_URL_HERE';
    var elem = document.createElement('link');
    elem.rel = 'manifest';
    elem.href = uri;
    document.head.appendChild(elem);
  4. tomayac revised this gist Nov 17, 2017. 1 changed file with 9 additions and 143 deletions.
    152 changes: 9 additions & 143 deletions googleyolo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,9 @@
    /*
    */
    Simulate OpenYolo Signup
    /*
    // Simulate OpenYolo Signup
    Inject library
    Steal client ID from publisher site (trigger google login, then copy from URL of popup)
    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');
    @@ -20,12 +19,13 @@ const hintPromise = googleyolo.hint({
    }
    ]
    });
    /*
    Simulate OpenYolo Signin (from go/yolo-web-code)
    Inject library

    /*
    Simulate OpenYolo Signin
    Steal client ID from publisher site (trigger google login, then copy from URL of popup)
    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');
    @@ -43,138 +43,4 @@ const retrievePromise = googleyolo.retrieve({
    clientId: 'YOUR_GOOGLE_CLIENT_ID'
    }
    ]
    });
    /*
    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();
    /*
    Service Worker
    Check/show subscription state
    Make sure to run in context of service worker in JS console
    Endpoint/Subscription process is described here
    */
    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
    This is nice, as it will also show the permission popup etc.
    Get an application key as described here
    */
    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 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
    */
    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 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);
    });
    });

    /*
    Manifest
    Inject Manifest
    Auto-create manifest via pwabuilder.com
    Copy&Paste JSON
    Convert to data-uri via this site
    */
    const uri = 'INSERT_DATA_URL_HERE';
    var elem = document.createElement('link');
    elem.rel = 'manifest';
    elem.href = uri;
    document.head.appendChild(elem);
    });
  5. tomayac renamed this gist Nov 10, 2017. 1 changed file with 0 additions and 0 deletions.
    0 intro.md → #intro.md
    View file
    File renamed without changes.
  6. tomayac revised this gist Nov 10, 2017. No changes.
  7. tomayac revised this gist Nov 10, 2017. 2 changed files with 6 additions and 2 deletions.
    0 snippets.js → googleyolo.js
    View file
    File renamed without changes.
    8 changes: 6 additions & 2 deletions intro.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,17 @@
    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.
    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

    Later on run snippet by:

    - Open Command menu again
    - Run snippet via ! operator
    (For SW snippets select SW context in JS console)
  8. tomayac revised this gist Nov 10, 2017. 2 changed files with 13 additions and 13 deletions.
    13 changes: 13 additions & 0 deletions intro.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    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)
    13 changes: 0 additions & 13 deletions snippets.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,17 +1,4 @@
    /*
    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)
    */

    /*
  9. tomayac created this gist Nov 10, 2017.
    193 changes: 193 additions & 0 deletions snippets.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,193 @@
    /*
    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)
    */

    /*
    // Simulate OpenYolo Signup
    Inject library
    Steal 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 OpenYolo Signin (from go/yolo-web-code)
    Inject library
    Steal 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'
    }
    ]
    });
    /*
    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();
    /*
    Service Worker
    Check/show subscription state
    Make sure to run in context of service worker in JS console
    Endpoint/Subscription process is described here
    */
    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
    This is nice, as it will also show the permission popup etc.
    Get an application key as described here
    */
    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 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
    */
    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 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);
    });
    });

    /*
    Manifest
    Inject Manifest
    Auto-create manifest via pwabuilder.com
    Copy&Paste JSON
    Convert to data-uri via this site
    */
    const uri = 'INSERT_DATA_URL_HERE';
    var elem = document.createElement('link');
    elem.rel = 'manifest';
    elem.href = uri;
    document.head.appendChild(elem);