|
/* |
|
*/ |
|
|
|
/* |
|
// 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); |
