ebidel / polymer-gmail

Polymer 1.0 version of New Gmail app

PolyMail

PolyMail is an offline, mobile-first, web version of the new Gmail native app UI. It's built using Polymer 1.0 and Service Worker and...is a WIP.

Demo: https://poly-mail.appspot.com/   (mock data: https://poly-mail.appspot.com/?debug)

Note: the app is read only despite what the permissions popup says. Also, most of the buttons don't do anything. There's a lot of missing functionality.

Performance

TLDR: paint is ~393ms and the app loads ~1s on Chrome desktop. Motorola G - Chrome - 3G Fast connection first paint is 1.66s The full performance improvements over the Polymer 0.5 version are documented here.

Full results

===

Setup

In your local checkout, install the deps and Polymer elements

npm install

This will also run bower install for you.

Development & Building

Compile the ES6

While ES6 Classes run natively in Chrome, FF Nightly, Safari 9, and Edge, some of JS in PolyMail still requires compilation using Babel. In particular, scripts/googleapis.js uses ES6 => functions and modules (import statement) in addition to classes.

Compile the JS/CSS:

gulp

This produces a single built and concatenated dist/scripts/bundle.js and compiles the rest of the app into dist/. You're ready to run the app!

Run the app

Use any webserver you'd like. I use npm serve:

serve -p 8080

You must run from /dist

serve -p 8080 serves the root folder, but the app runs the production version from dist/. So be sure to first run gulp, then hit http://localhost:8080/dist/.

Watching files

For easier development, there's a task for rebuilding the vulcanized elements.html bundle and compiling the ES6 as you make changes:

gulp watch

Using test data

Hitting http://localhost:8080?debug will bypass Google Sign-in and use mock data for threads. Under this testing mode, you will no see custom labels in the left nav or user profile images show up on threads.

Deploying

npm run deploy

Future improvements

• Push notifications
• Reading emails in a thread
• Creating emails
• Clicking Label actually does filtering
• Pagination (currently only the first few emails are visible)
• a11y (keyboard access, tab support)
• i18n
• http2 push
• Service Worker offline support & caching
• Caching API requests
• Auto-refresh inbox
• Use Google Sign-in 2.0
• Use GMail API push notifications (docs)
• Use GMail API history feature (docs)
• Searching emails. Full gmail search (e.g. to:me from:[email protected] is supported`).

polymer-gmail's Issues

Vulcanized not found

Hello,

I'm new to polymer and am unable to start the application, it is not being finding the file 'polymer-gmail-master / vulcanized.html Failed to load resource: the server responded with a status of 404 (Not Found)' '

What does this file? where I find?

trouble building

Not sure if this is something about my environment, but 'bower install' (whether called directly, or via npm install) does not create a bower components directory, and I cannot make sense of the warning:

$ npm install
npm WARN prefer global [email protected] should be installed with -g

> [email protected] postinstall /Users/dhorton/beachdog-enterprises/beachdog-networks/git/polymer-gmail
> bower install

[{
  "level": "warn",
  "id": "invalid-meta",
  "message": "The \"name\" is recommended to be lowercase, can contain digits, dots, dashes",
  "data": {}
}]
{}

$ node --version
v6.2.2
$ npm --version
3.9.5

Polymer 1.x

@ebidel Excellent example. Any plans to upgrade this to use v1.x?

I get ENOENT error when i Vulcanize

Any idea why this would be happening? The error is:

C:\wamp\www\polymerApps\gmail1.0\elements>vulcanize -o vulcanized.html elements.html
 { [Error: ENOENT, open 'C:\wamp\www\polymerApps\gmail1.0\elements\vulcanized.html']
   errno: -4058,
   code: 'ENOENT',
   path: 'C:\\wamp\\www\\polymerApps\\gmail1.0\\elements\\vulcanized.html' }
 Error: ENOENT, open 'C:\wamp\www\polymerApps\gmail1.0\elements\vulcanized.html'
     at Error (native)

Polymer V1 app does not work in Firefox

The new version of https://poly-mail.appspot.com/ is not working with Firefox latest version (39). It cannot process https://github.com/ebidel/polymer-gmail/blob/1.0/scripts/app.js#L86-L90. May be firefox does not support link.import OR link.import.readyState ??

CC: @ebidel

Vulcanize

I see that you've vulcanized some .html as you have it in the import in the index, can you please provide the instructions to vulcanize? Thanks!

Consider moving to fastest for resources

Currently, networkFirst is the default. For slow connections, this will still be slow.

iron-selector failed to update its selection when data updating

iron-selector failed to update its selection when receive new mail https://github.com/ebidel/polymer-gmail/blob/master/index.html#L152

i have the same issue in another open source repo https://github.com/HedCET/TorrentAlert/blob/master/.polymer/linto/project-list.html#L153

@ebidel could u possible to suggest any solution ?

Pssst. Link in readme points to Google Calendar App

elements bundle not loading in IE 10/11

I'm working to a Polymer app, and I'm trying to make the page load fast by:

• loading app.js and elements.html asynchronously (with the async tag set in index.html)
• loading the WebComponents polyfill only if necessary

I had to give up on the async load of elements.html, because of Polymer's buggy behaviour (see issue 2481 and issue 2522).

But even after that, the elements.html file won't load in Internet Explorer 10/11. I had a look to this polymer-gmail project after I saw the talk at the Polymer Summit 2015, and I found the same problem: the elements.html file just doesn't get downloaded in IE10 / 11.

Any idea?

Accessibility...

Google has expertise in-house to create functional, beautiful, web-component stuff that is also accessible. It would be great if high-profile demos like these would actually take advantage of those resources to create things that work not just for sighted mouse/touchscreen users...

google+ login not work

google+ login not work on https://poly-mail.appspot.com/

gulp on fresh install complains ' Cannot find module 'jshint/src/cli'

I manually installed them, but perhaps they should be added to devDependencies in package.json?

$ npm install --save-dev jshint gulp-jshint

New version with Polymer 2.0

@ebidel Hi Eric, it there a plan of upgrading this great app with Polymer 2.0. This will be a wonderful learning source for Polymer 2 users. Thank you!

How to add to the main screen devices Android ?

How to add to the main screen devices Android ?
As you make your message add to home screen on mobile devices.
I study your code but I did not find the function can hopefully help me

––––––––
Como realizas el mensaje de agregar a pantalla principal en los dispositivos moviles.
Estudio tu código pero no encontré la función ojala me puedas ayudar