Getting started
Google Developers Logo
Github logo View Source
feedback icon Submit Feedback

Progressive Web App Dev Summit

June 20-21, Amsterdam, NL - Learn more

Your First Progressive Web App

Progressive Web Apps are experiences that combine the best of the web and the best of apps. In this step-by-step guide, you'll build your own Progressive Web App and learn the the fundamentals needed for building Progressive Web Apps, including the app shell model, how to use service workers to cache the App Shell and your key application data and more.

  1. Your First Progressive Web App
  2. Architect the App Shell
  3. Implement the App Shell
  4. Start with a Fast First Load
  5. Use Service Workers to Pre-cache the App Shell
  6. Use Service Workers to Cache Application Data
  7. Support Native Integration
  8. Deploy to a Secure Host and Celebrate!

Your first push notifications web app

In this codelab, you'll learn how to add Push Notifications to web applications. This will enable you to re-engage users with breaking news and information about new content.

  1. Your first push notifications web app
  2. Get the sample code
  3. Run a local web server
  4. Get started with Service Worker
  5. Make a project on the Google Developers Console
  6. Add a manifest
  7. Subscribe to Push Notifications
  8. Send a request from the command line for GCM to push a message
  9. Send a push notification request using XHR (Ajax)
  10. Show a notification
  11. Handle notification clicks
  12. Unsubscribe from notifications
  13. Congratulations

Your first offline web app

Service workers are background scripts that open the door to rich offline functionality that would normally require a native application. Learn how to integrate a service worker into an existing application to make it work offline.

  1. Your first offline web app
  2. Get the sample code
  3. Run the sample app
  4. Test the app
  5. Build the starter app
  6. Register a Service Worker on the site
  7. Install the Site Assets
  8. Intercept the web page requests
  9. Congratulations

Your first multi-device site

The web is accessible on a huge range of devices, from small-screen phones to big-screen televisions. Each device presents its own benefits and constraints. As a web developer, you are expected to support a full ranges of devices.

  1. Your first multi-device site
  2. Create your content and structure
  3. Make it responsive

Principles of site design

Google and AnswerLab undertook a study examining how users interact with a diverse set of mobile sites. The goal was to answer the question, 'What makes a good mobile site?'

  1. Principles of site design
  2. Home page and site navigation
  3. Site search
  4. Commerce and conversion
  5. Form entry
  6. Usability and form factor

Start your site with Web Starter Kit

Sometimes the hardest part of a new project is getting started. Web Starter Kit gives you a solid base with a range of tools to help you along the development process.

  1. Start your site with Web Starter Kit
  2. Development phases
  3. Set up Web Starter Kit

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Terms of Service.