Last active
December 18, 2022 07:22
-
-
Save tomayac/ebe078ab867a1ef91d017b450ac63936 to your computer and use it in GitHub Desktop.
Snippet repository
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment