PWA | Google Codelabs :: Web

Templates (HTML/CSS/JS)

• Responsive Web Design | @ Google | @ W3schools

• W3.CSS | Reference | Templates

  W3.CSS is a components-based framework (w3pro.css);
  16KB/5KB; color theme adds 2KB/1KB; includes Normalize.css .

  • Forms

See optimal lengths (lengths.optimal.ods)
of words/chars/time per context.

Lighthouse Audit

• Usage:
  • @ Chrome > Dev Tools > Audit
    

  • @ npm

    npm install -g lighthouse
    lighthouse $_URL
    

• Score categories:
  
  • Performance
    
  • PWA
    
    • Page load time @ 3G
      
    • HTTP 200 @ offline
      
    • HTTPS & Redirect HTTP to HTTPS
      
    • Fallback content @ no JS
      
    • Address bar match brand color:
      <meta name="theme color">
      
  • Accessibility
    
  • Best Practices
    
    • HTTPS, HTTP2, and errors to console.log()
      
  • SEO
    

Build Tools

See Frontend.BuildTools (