# PWAs with Polymer: a checklist

DevFeed: [PWAs with Polymer: a checklist](<https://devfeed.tech/articles/pwas-with-polymer-a-checklist-35537.md>)

Original publisher: [Read original article](<https://meowni.ca/posts/polymer-pwa-checklist/>)

Author: Monica Dinculescu

Published: 2017-07-26T00:00:00Z

Content type: tutorial

Language: en

Sources: [Monica Dinculescu](<https://devfeed.tech/sources/monica-dinculescu.md>)

Topics: [PWA](<https://devfeed.tech/topics/pwa.md>), [Web app](<https://devfeed.tech/topics/webapp.md>), [Web Components](<https://devfeed.tech/topics/web-components.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>), [Caching](<https://devfeed.tech/topics/caching.md>)

Tags: [cli](<https://devfeed.tech/tags/cli.md>), [components](<https://devfeed.tech/tags/components.md>), [html](<https://devfeed.tech/tags/html.md>), [pwa](<https://devfeed.tech/tags/pwa.md>), [web-app](<https://devfeed.tech/tags/web-app.md>)

## AI overview

A practical checklist for turning a Polymer-based web app into a progressive web app. It covers generating icons, adding a manifest, bundling with Polymer CLI, registering a Service Worker, handling first paint and fallback content, and rendering without JavaScript. The article also describes a case study showing how these steps improved a Lighthouse score.

## Source excerpt

The Meownica Web App Workflow™ goes like this: Write bad code until the file is too long Refactor that code into some web components Repeat steps 1-2 until done Realize you forgot to do the PWA dance, so your app is scoring 45 on Lighthouse Make it into a PWA by doing basically the same steps every time. I'm not joking about step 5. It's all a bunch of fairly simple boilerplate and party tricks, that I copy paste from a couple of apps. This time I decided to make them into a checklist. This checklist is keen on the polymer cli, because I usually write apps that use Polymer. If you don't, you can replace the polymer cli with your favourite bundler/service-worker generator! If you just want the checklist, here it is. If you want to see how I made this checklist and how the Lighthouse score improved as I checked more items off, jump to the case-study! Checklist Step by step 1. 📝 Add a manifest.json 2. 🏃 Bundle with the Polymer CLI 3. 🤖 Add a Service Worker 4. 🎨 Fix first paint 🆗 🆒 Checklist generate icons (sizes: 48x48, 96x96, 144x144, 192x192, 512x512) [example] add a manifest.json [example] add the rest of the manifesty things to your index.html [example] add the polymer cli: npm install -g polymer-cli add a polymer.json [example] run polymer build register your Service Worker [example]. If you have a complicated app setup or caching strategy, you might want to generate a sw-precache-config.js file. add fallback content while your main element is updating [example]. As a general rule, I try to match this fallback content very closely to what the first paint of the element will actually be, so that there's no visual jank make sure that your page renders something without JavaScript [example] Provided your app isn't outrageously big (think: the only thing that will make loading 10MB of JavaScript up front better, is not loading 10MB of JavaScript), this should help put you somewhere in the green scores on Lighthouse. Step by step So, here's the post-game analysis of wh