googlearchive/pwa-from-scratch

Codelab: Building a PWA from scratch

Building a Progressive Web App from scratch in Polymer

In this codelab, you’ll build a Progressive Web App in Polymer that will let users watch videos from the Chrome developer channel. You will learn how to set up the pages, layout, routes, and an infinite list.

Progressive Web Apps

Progressive Web Apps are web applications that take advantage of new web technologies to act and feel like a native app. Progressive web apps work for every user regardless of the browser choice, they are reliable, fast and secure. However, building a Progressive Web App from scratch with such requirements can be tedious and complex. As we will see, thanks to web components, a set of W3C standards, most of the complex logic can be encapsulated in a component allowing you to build better and faster progressive web apps.

What is the Polymer App Toolbox?

The Polymer App Toolbox is a collection of web components, tools and templates for building Progressive Web Apps. The App Toolbox includes components for layout, routing, localization and storage. It also offers a very handy command line tool, the Polymer CLI, which we can use to scaffold, serve and build our app among other

What are we going to be building?

Try the app now

In this codelab, you're going to build an app to browse and watch shows from the Chrome Developer Channel.

The App toolbox will allow us to:

• Architect a component-based web app using Polymer and Web Components.
• Build the responsive layout using the app-layout components.
• Set up the routes using app-route.
• Configure the manifest.json.
• Deploy service workers automatically for offline caching.
• Build the app bundle for production.

pwa-from-scratch's Issues

App does not render in localhost environemnt

After following your tutorial, the app has not been able to render in the browser at all. I have followed each and every step and no matter what I do, all that displays in the browser is the black/gradient background and that's it.

Tutorial code not working

First timer here...

Followed all instructions to the dot.

polymer init
error 'uname' is not recognized as internal or external command,
Did not give me an option for blank template (as shown in the tutorial) instead I selected polymer 2 application

Then got the error:

bower invalid-meta for:E:\temp\test\pwa-from-scratch-master\work\bower.json
bower invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes
bower ENOGIT git is not installed or not in the PATH

Also bower-components are not created as given in the tutorial...

Wither something wrong with my computer or the tutorial is not upgraded. If the later then suggest that you mark the tutorial as obsolete. That will save everyone else some time...

Step 5: `on-click` instead of `on-tap` is being leveraged; any particular reason?

It seems Step 5 is deliberately violating leveraging on-tap semantics of dealing with click events that's seemingly often a best practice with Polymer instead of reacting to click events

Is this deliberate?

Opening the wrong page?

I'm running polymer v0.17.0 and on running polymer serve --open actually opens the URL http://localhost:8080/components/Chrome%20Developer%20Channel/ by default.

Am I doing something wrong or the tutorial needs to be updated to reflect that change?

Path is wrong

cp ../resources/show-app.html src/show-app/show-app.html
should be either

cp ../resources/show-app.html show-app/show-app.html
(run from src/)

or

cp resources/show-app.html src/show-app/show-app.html
run from the root of the project

Polymer 2.0 pwa-from-scratch

This tutorial is really cool, but with Polymer 2.0 upcoming, i would love to see this done using Polymer 2.0.

Step 5 is broken

According to the screenshot from the end of step 5, the app should still be displaying the title bar and google logo. It's not. It's displaying a blank page (with the black gradient background), at least in Chrome, with v 0.17 Polymer.

Also, I'd suggest revising the section about routing. It starts with a definition, but without an example. And ends with this claim:

---

With the current structure, the app shell will handle the following routes:

/shows/* renders
/video/* renders

The path should probably be "/show/", not "/shows/", as that's the value of the name attribute. It also doesn't explain whether it's any path that starts with "show", or has to contain the word, or how the matching is performed. And finally, no explanation is given about what show-list-page represents. Is it a page? Where is it defined?

chrome-logo.svg

The tutorial says "Next, we will inline the SVG for the Chrome logo by adding the content of the file images/chrome-logo.svg below the comment . "
However this doesn't fully explain how that is done and the chrome-logo.svg is added.

Update section 9 for serving build path

In section 9 the instructions say:
polymer serve build/bundled
but what worked for me was:
serve build/default