Building a Progressive Web App (PWA) with Polymer Tutorial

A quick tutorial showing you how to build a PWA with Polymer CLI and using Vaadin Elements.
Source: github.com/vaa...
Get started with Polymer: www.polymer-pr...
Vaadin Elements: vaadin.com/ele...

[@tonykempson4331]

Great tutorial. Thank you! Please publish more if you have the time.

[@smatthews1999]

Hey Marcus. I just wanted to say thanks for this tutorial. Polymer seems like an awesome library. Unfortunately the people at google seems to be too busy (holding summits, and evangelizing) to come up with some simple straightforward instruction based on the recent toolset (like you did).... so thanks. I hope you do more. I would specifically like to see how to fill out the data in this app from a backend api, but then populate from cache once the network is shut off. I started on something using 'iron-ajax' and 'app-storage', but got lost. Docs are kind of sparse.

[@marcushellberg13]

Thanks, Sam. Good points, I'll add your ideas to my backlog! (which is unfortunately pretty long at the moment).

[@smatthews1999]

Since I wrote that I have, using your tutorial as a starting point, learned how to use service workers to cache the data coming from my api. Really enjoying the library.

[@marcushellberg13]

Cool. Did you run into any problems that you think might be worthwhile for me to make videos/tutorials about to help clarify for others?

[@smatthews1999]

Not really. I removed the localstorage stuff and added a call to my backend using iron-ajax... then I added a caching property to my sw-precache-config.js runtimeCaching: [{ urlPattern: /^http:\/\/localhost:12489\/api/, handler: 'fastest' }] What I wanted to do (but couldn't figure out) is how to update my UI with the results of the network api call, after the cache update. For example, using "fastest" as a cache option, typically the cache returns first and populates the UI. Then the network returns with any updated results and updates the cache. What I would like to hook into the network return and update the UI with any new results. Any ideas? I know I could use 'networkFirst' but I don't want to wait for the network to fail.

[@NattapongPUN]

Very great tutorial, Please kind to do more VDO for education. Thanks :-)

[@mr_thunderspank]

Marcus! You are the MAN! Great Tutorial, Can't wait to see more! What packages did you install on your atom for multi line copy and pasting and the 2 cursor inline typing . btw, would it screw anything up to use the firebase init code after the polymer init or vice versa? Id like to host with and store data with firebase.

[@greggsworld4453]

Help: When I click the Add Todo button it clears the form but doesnt add the items to the grid? Resolved: I realized I wasn't using the same grid version, i looked at the grid documentation, copied over the new html for it and it worked.

[@jemma2607]

Awesome, great tutorial! Develop a progressive web app means that we use things like push notifications, offline, local storage, right? I'm no clear about that. (Please excuse me if my english is that bad, I just make a effort)

[@DirkBarchmann]

Nice tutorial. Thanks

[@slym1875]

Awesome tut! May I know what plugin you were using for autocompletion of link rel statements? Thanks!

[@AZHARKHAN-fw5mv]

sir please make whole tutorial of polymer .

[@jjyusuf]

Having trouble even getting npm to show that terminal on my mac its in my computer but I'm stuck

[@samritijamwal492]

I am getting these 2 errors " Uncaught TypeError: Cannot read property 'forEach' of undefined " in vaadin-grid-table.html at line 496......" vaadin-grid-table.html:455 Uncaught TypeError: Cannot read property 'forEach' of null " could you plzz help me into this.thanks

[@zlatkoiliev8927]

Thanks Marcus, good tutorial, but what if I also want to add a remove button on each row, so when I click it I will be able to remove the completed task. Or maybe a check box that will mark the task as complete when checked?!?

[@marcushellberg13]

Basically what you need to do is add a renderer for that column, see cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/demo/formatting.html. Instead of creating a progress bar, you would just create a button. We are working on a 2.0 version of our grid that has a much easier declarative way of defining columns, if you want to play around with it check out cdn.vaadin.com/vaadin-core-elements/preview/vaadin-grid/demo/

[@LangChainAI]

Hej, What editor are you using? Looks very cool, an :)

[@marcushellberg13]

Andrey Mark - Atom. Although I've since switched over to using VS Code

[@LangChainAI]

Alright! A friend of me is using Atom and me VS :)

[@caboclobao]

Hi Marcus, Your tutorial is very good! Congratulations. Do you develop custom applications? I need to develop an application and I'm not taking time to study. Thank you.

[@marcushellberg13]

Indeed we do, check out vaadin.com/consulting and get in touch!

[@elhadiahmed3]

Thank you for the tutorial, do you know what would be the best option to tackle form validation with polymer ?

[@marcushellberg13]

I think that token based authentication schemes make most sense for PWA. You could look into elements.polymer-project.org/elements/google-signin or something like Stormpath, Auth0 or rolling your own with JWT.

[@karankochar4358]

marcus thankyou for this tutorial ! i am running into a problem with vaadin-grid it is just displaying a blank box ,col names are also not showing up,i cross checked my imports ,they are write

[@marcushellberg13]

Hey. Sorry, I need to record a new video to use vaadin-grid 2 API. Please check the documentation and examples for the new API here meanwhile vaadin.com/elements/-/element/vaadin-grid#demos.

[@mr_thunderspank]

github.com/vaadin/vaadin-grid/releases/tag/1.2.0-alpha1 because I am lazy.

[@charlesd4572]

Blimey could you not get the microphone further from the keys.

[@StijnHommes]

And how do you build a real app instead of a fancy website?

[@marcorosa9643]

Great tutorial! what plugin are you using for code completion for the script??

[@marcushellberg13]

Polymer Snippets: github.com/robdodson/Atom-PolymerSnippets

[@vincentyoumans]

can you do a tut using Polymer Starterkit and FIREBASE please

[@mr_thunderspank]

www.polymer-project.org/1.0/start/toolbox/deploy

[@trondnilsson4457]

Fantastisk bra

[@marcushellberg13]

Tack!

[@julianpedrodaga-ang3058]

After polymer serve --open, it redirected me to an empty page. What do we think is the issue here?

[@marcushellberg13]

Check that the URL is correct (localhost:8080). Then check if you are getting any errors in the console. Sounds like you may have forgot to run bower install.

[@tushant04]

I am in the same boat. Refresh it and you will serve with the page, assuming there is no error.

[@DrRobrez]

Have you found any tooling - atom or cli - that format custom-elements to your liking? eg indentation, etc

[@marcushellberg13]

I'm using Atom and atom-beautify (atom.io/packages/atom-beautify) mostly. I've also used IntelliJ/WebStorm, but it felt slower.

[@DrRobrez]

thanks. yeah atom-beautify is the best I could find.. but it tends to do some things I'm not too keen on in certain scenarios (jsbeautify)

[@marcushellberg13]

Yeah. I did spend some time trying to adjust the settings before I got it working (nearly) as I wanted.

[@satanas1008]

Hi Marcus, thanks for the tutorial. I have a quick question: How the hell can I close the server once it's running? xD I've noticed the "^C" command but I can't realize how to make it works. Thanks in advance!

[@marcushellberg13]

That's Ctrl-C :)

[@satanas1008]

+Marcus Hellberg great! thanks dude!

[@CarlMosca]

What about the code-completion in atom? atom polymer plugin?

[@marcushellberg13]

I'm using both polymer-snippets (github.com/robdodson/Atom-PolymerSnippets) and vaadin-elements-snippets (github.com/tehapo/atom-vaadin-elements-snippets).

[@CarlMosca]

Thank you Marcus. Nice job!!

[@AbinavSeelan]

What Atom theme are you using? =)

[@8Trails50]

He's using Atom Material theme, dark variant. atom.io/themes/atom-material-ui and atom.io/packages/atom-material-syntax-dark

[@CarlMosca]

Do you have this code posted anywhere? It appears that there are some issues with the vaadin-grid component and the items not populating. github.com/vaadin/vaadin-grid/issues/349

[@marcushellberg13]

Added source to GitHub, it's in the description. I'm guessing you are not using vaadin-grid 1.1 - with 1.0 you had to notify the grid manually when you added items. Check the bower.json file

[@CarlMosca]

Right you are, thanks again!!

[@samritijamwal492]

I am getting these 2 errors " Uncaught TypeError: Cannot read property 'forEach' of undefined " in vaadin-grid-table.html at line 496......" vaadin-grid-table.html:455 Uncaught TypeError: Cannot read property 'forEach' of null " could you plzz help me into this.thanks