googlechrome / samples Goto Github PK

View Code? Open in Web Editor NEW

5.8K 356.0 2.4K 65.69 MB

A repo containing samples tied to new functionality in each release of Google Chrome.

Home Page: https://www.chromestatus.com/samples

License: Apache License 2.0

JavaScript 32.52% HTML 61.73% CSS 2.24% Ruby 0.01% C 0.09% Python 1.78% SCSS 0.06% Svelte 1.57%

samples's People

Contributors

Stargazers

Watchers

Forkers

pearlchen-old jeffposnick kenjibaheux jcambry kleopatra999 pwnall codeberg30 rahmanusta robincamdsphd lagden dimasik9081 kublaj wibblymat olegskl huynt553 addyosmani ragingwind unbug athaller hansenfreddy dsueiro maiakangalova cesarwbr fu4k6pingu jguang paulkinlan helgest sbrundage81 tbishop105 nitronaj whitebaek thesobek brittanydionigi chrisdavidmills opatinowebrtc isorna surma-dump powerlinxjetfire lholmquist kohei-takata kangxu punkajkumar milworm lecaoquochung vibhoo chunywang 2braincells2go bathtimefish domenic gabrielduque xiaohuli gadesandhya bklinker mikewest tcelestino ls-website thanawatsuj snowindy sam0hack muto777 lizhimin99 marrriva owencm bionicclick martinsv smorrowatwork librain-ankur junsukekomuro msroot luisleao tetestorm rsousaj ljinkai srameshr nornag gautamkashyap84 elvijsb3 khieu zinedinshiqin gaudeamus visrey ronakdaya-zz disco satoshidark iwpl-projects wanderview maitret maechabin mfitzhenry erlendr js-frameworks oliversweb sofdroid hdvianna nekoaisle zioneum michellebai iamtechaddict wirachmat zoiodev

samples's Issues

Add Array.prototype.includes sample

@jeffposnick Do you mind if I take over this simple one?

Externalize JS (and CSS?) files

Moving the discussion from #206

The benefits would be that it's generally a best practice, and it would make it easier to run ESLint and JSCS against the .js files directly, without having to extract them from the generated HTML. Now that we're on a Jekyll build for the site, we have a lot more flexibility.

The drawbacks would be that the View Source... experience is arguably worse for developers who want to learn about new features in context, since they'd have to match up what's going on with an external JavaScript file with the rest of the content on the main page.

The drawback might be mitigated by inlining the entire external .js file's source on the main page wrapped in a <div class="hightlight">, like we're currently doing for explicitly tagged snippets of the inline JavaScript source.

There's also the topic of whether we should do the same for CSS files. There are a handful of samples out there just demonstrate CSS functionality.

Create a cache-then-network example using window.caches

Thinking a bit more about use cases for window.caches that don't involve service workers (see #103), I remembered that the cache-then-network example that @jakearchibald describes could make for a good standalone example.

Sample for Web Application Manifest

This is a placeholder issue for us to write a sample for the Web App Manifest demonstrating usage. Mounir recently landed this. Although not yet in a public build, Chrome Android will use the Web Manifest for the "Add to homescreen" feature.

Spec: http://w3c.github.io/manifest/

Rough samples:

manifest.json

{
  "name": "2048 app",
  "icons": [{
        "src": "icon/lowres",
        "sizes": "64x64",
        "type": "image/webp"
      }, {
        "src": "icon/hd_small",
        "sizes": "64x64"
      }, {
        "src": "icon/hd_hi",
        "sizes": "128x128",
        "density": "2"
      }],
  "start_url": "/index.html",
  "display": "fullscreen",
  "orientation": "landscape"
}

index.html

<!doctype>
<html>
<title>My app</title>

<!-- Startup configuration -->
<link rel="manifest" href="manifest.json">

Intent to Ship:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/EbAMnvBUU80

Commits:

https://chromium.googlesource.com/chromium/src/+/b225ae560fea0648b61fad36b5972221a7f5c47d
https://chromium.googlesource.com/chromium/src/+/f60720832599bc7306d9e37e3cef5ceee4c224ce
https://chromium.googlesource.com/chromium/src/+/96297a73c48ff299e45eac62b967a8e333569602
https://chromium.googlesource.com/chromium/src/+/9317a291b84457b9a8feb8ecd94d0593bb0fff9b

we can construct Response with string.

https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/mock-responses/service-worker.js#L31

first argument of Response constructor is a BodyInit and, this defined like this.

typedef (Blob or BufferSource or FormData or URLSearchParams or USVString) BodyInit;

so we can send JSON.stringify ed string of object without wrapping Blob.
at least, chrome canary 42 works fine with it.

SW Sample: Returning Mock Data

It should demonstrate basic registration, and then an onfetch handler that returns hardcoded data in response to requests that match specific criteria.

An example would be intercepting all requests for a specific API call and instead of fetch()ing them, returning a hardcoded JSON document.

(This would be useful within the context of unit testing code that relies on API responses.)

SW Sample: Using PostMessage

It should demonstrate basic registration, and then have the client page send specific requests to the SW script via postMessage() on the client page/the onmessage handler in the SW script.

For the purposes of this example they could be simple strings that are echoed back, but in the real world a useful case would be to send a request from the client page to the SW to cache a URL or to update some sort of SW configuration.

SW: Ensure consistent capitalization

Reminder to scrub all the samples to use consistent capitalization—they're "service worker(s)", not "Service Worker(s)" or "ServiceWorker(s)".

SW Sample: Caching of Selective Resources

It should demonstrate basic registration, and then an onfetch handler that selectively caches responses based on multiple criteria:

Request URL pattern (e.g. only cache URLs hosted on example.com)
Response MIME type (e.g. only cache image/* resposnes). Subsequent requests for the same URL are served from the cache.
Any other ideas?

Until the native Caches API is available, it should use https://github.com/coonsta/cache-polyfill

Post Message Example SW Uses a Port to Communicated with Client Instead of postMessage()

Either explain why a port was used or change the demo to use postMessage().

Sample for ES6 Spread calls

https://chromium.googlesource.com/v8/v8/+/74c381221c93253bbee513aa2539d93269303b8b

Landed behind a flag for now, but we can write a sample and unflag when it goes stable. Code from tweet if useful at all.

Spread (call and array) (ES6) sample

See https://www.chromestatus.com/feature/6031334694715392

GCM Message Failing in Push Example Failing to Reach the Service Worker

This sample: https://github.com/GoogleChrome/samples/tree/gh-pages/push-messaging-and-notifications

I've double-checked this.

I've added -v to the curl command and confirmed that GCM is returning 200 OK. I've put a break point in the first line of onpush and confirmed that it's never reached.

SW: Illustrate cache cleanup/versioning

None of the existing service worker examples illustrate how to properly version the caches and clean up old caches. They should be updated to do that.

Object.assign sample

Object.assign() now makes it easy for developers to clone or merge objects by copying all the values of enumerable properties from one or more source objects to a target object.

media-hover-pointer sample

in the demo https://googlechrome.github.io/samples/media-hover-pointer/ it reads

if a user is on a tablet with a connected a mouse, 'any-pointer' will be satisfied. If the mouse is then removed, the browser will report 'any-pointer' as none.

Maybe I'm misunderstanding the spec, but why would/should any-pointer be none once the mouse is removed? wouldn't the fact that the touchscreen interface is still present count as a pointer device?

Touch.rotationAngle sample

See https://www.chromestatus.com/feature/4639728380936192

ES6 Array methods sample

See https://www.chromestatus.com/feature/6732923508097024

Templatize as much as possible

There's an enormous amount of boilerplate HTML (and some JS + CSS) that used in every sample. I'm guilty of encouraging a copy/paste model that got us to this point.

Moving to a model in which we took advantage of GitHub's Jekyll support and abstracted away most of the boilerplate into a shared template would make a lot of sense. Samples that needed to do something that didn't fit into the template would still have the flexibility to commit a full set of HTML + JS + CSS.

I think it would also be possible to automate generating an index page as part of this process, closing #37

Add to homescreen now supports splashscreen color and theme color

prefetch example should return the promise from addAll()

event.waitUntil won't currently wait for all assets to attempt to cache.

Its a subtle issue, but essentially a large number or big assets may hit a condition where the SW is terminated in the background.

Returning the addAll promise should fix this:

samples/service-worker/prefetch/service-worker.js

Line 50 in 8a2d266

cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {

image-rendering-pixelated pixel size

The page states it's using a 1x1 pixel, but is actually using a 2x2 pixel PNG.

Rework the templates to simplify logging from multiple JS snippets

It would be preferable to have something more flexible than a single output area at the top that all the JS snippets log to.

See the discussion at #163

googlechrome.github.io needs landing page

That lists all the samples.

SW Sample: Service Worker URL Parameters

It should demonstrating registration in which data from the client page is encoded as a URL parameter appended to the SW script URL. The SW then deserializes that URL parameter data and makes use of it.

An example would be a client page that passes in a list of URLs that should be prefetched, as an alternative to a hardcoded a list of prefetch URLs within the SW's oninstall handler.

SW Sample: Returning Fallback Data

It should demonstrate basic registration, and then an onfetch handler that returns default data when the fetch() request fails.

A potential example would be to fetch() an API call that will always fail (such as a YouTube Data API v3 request that omits an API key and returns a HTTP 403) and return a fallback JSON document in its place.

Use eslint to standardize on JS code style

It's been suggested in the past (by @gauntface I believe) to include a top-level jscs configuration in this repo. It might be difficult to automatically enforce the styles, but including a reference that folks could opt into would do some good.

SW Sample: Registration with Immediate Replacement

It should demonstrate standard registration with a technique for immediately elevating the installing SW to be the controlling SW. (I think this would entail forcing the page to refresh, but it would be good to confirm the best practice first.)

App Install Banner issue

I've launched the app install banner sample pages on Chrome for Android 44.0.2 (tried the latest Dev + Beta builds from the Play store). After enabling chrome://flags/#bypass-app-banner-engagement-checks and relaunching Chrome, I still don't see any banner.

Any ideas? Note: I'm not signed into Chrome, is this a requirement?

/cc @PaulKinlan

innerText being used instead of textContent in a couple of places

Specifically, here: https://github.com/GoogleChrome/samples/search?utf8=%E2%9C%93&q=innerText

A+ that it works in Chrome regardless, but for those of us creepin' via FF...we'd sure <3 textContent instead.

SW Sample: Basic Pass-through Caching

It should demonstrate basic registration, and then an onfetch handler that automatically caches all responses. Subsequent requests for the same URL are served from the cache.

Until the native Caches API is available, it should use https://github.com/coonsta/cache-polyfill

Create Related Applications Sample

SW Sample: storing data

I have a session token in my page that I want to use in my SW.

I'm using postMessage to send it to the SW and then plan on using IDB to store it there.

A small sample that stores bits of (non-response) data persistently would be pretty nice, imho.

SW Sample: Prefetching Resources During Registration

It should demonstrate standard registration and prefetching/caching a list of URLs within the oninstall handler.

generators directory should have es-6 on the end of the directory name

https://github.com/GoogleChrome/samples/tree/gh-pages/generators a lot of the other es-6 feature end in es-6.

cc @jeffposnick

Merge https://github.com/GoogleChrome/web-audio-samples into /web-audio

It might be a good idea to merge these repos at some point in the future.

cc @addyosmani @cwilso

Ideas for Push API recipes

Registration (Google Cloud Console, manifest file, need to register from document first, sending data to their server)
Sending a simple message (Perhaps a very simple back-end example for sending something to GCM, similar to what Matt is using)
Receiving a message (The "onpush" event, why no payload, using fetch())
Displaying a notification (Why? Good practices for engaging users (icon + title + body), store data in IDB, maybe "tag" hack?)
Handling a notificationclick even (focusing or opening windows)

These are following a sync with Peter a week or so ago. We've since opted to ship a single larger sample in #79, but these could still be useful to explore when time allows.

ES6 TypedArray methods sample

See https://www.chromestatus.com/feature/4919908559224832

Use Web Starter Kit as the placeholder baseline.

At minimum I would suggest we go for the minimal options in https://github.com/google/web-starter-kit/blob/master/app/basic.html, if not the full layout options in https://github.com/google/web-starter-kit/blob/master/app/index.html.

basic.html support would just mean a few minor new additions atm. cc @PaulKinlan

Deferred prompt of Add to Homescreen

Create a battery status API demo

Update App Banner examples

Need to include:

Cancelable example
User response example (did they install or not)
Shuffle the examples around to make it easier to navigate.

Problem:

serviceWorker is never ready if you do a "hard reload" (shift-reload icon) or "empty cache and hard reload"
Chrome version 44.0.2403.39 beta-m (64-bit)

Test: try it at https://widgetsign.com/chrome_samples/push-messaging-and-notifications/
Fault: the button is never enabled if you do a shift-reload.

Arrow functions (ES6) sample

See https://www.chromestatus.com/feature/5047308127305728

Beacon Sample incorrectly states it is behind a flag in Chrome 37

It was, it is not anymore.