No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Example
Your First Progressive Web App
1. Introduction






Last Updated: 2019-04-30

What makes a web app, a Progressive Web App?

Progressive Web Apps provide an installable, app-like experience on desktop and mobile that are built and delivered directly via the web. They’re web apps that are fast and reliable. And most importantly, they’re web apps that work in any browser. If you're building a web app today, you're already on the path towards building a Progressive Web App.



This is an multi-level unordered list

  • Level 1

  • Level 2

  • Level 2

  • Level 3

  • Level 1

  • Level 2

  • Level 1

  • Level 2

  • Level 2



Fast & Reliable

Every web experience must be fast, and this is especially true for Progressive Web Apps. Fast refers to the time it takes to get meaningful content on screen, and provide an interactive experience in less than 5 seconds.



And, it must be reliably fast. It’s hard to stress enough how much better reliable performance is. Think of it this way: the first load of a native app is frustrating. It’s gated by an app store and a huge download, but once you get to a point where the app is installed, that up-front cost is amortized across all app starts, and none of those starts have a variable delay. Each application start is as fast as the last, no variance. A Progressive Web App must deliver this reliable performance that users have come to expect from any installed experience.



Installable

Progressive Web Apps can run in a browser tab, but are also installable. Bookmarking a site just adds a shortcut, but an installed Progressive Web App looks and behaves like all of the other installed apps. It launches from the same place as other apps launch. You can control the launch experience, including a customized splash screen, icons and more. It runs as an app, in an app window without an address bar or other browser UI. And like all other installed apps, it’s a top level app in the task switcher.



Remember, it’s critical that an installable PWA is fast and reliable. Users who install a PWA expect that their apps work, no matter what kind of network connection they’re on. It’s a baseline expectation that must be met by every installed app.



Mobile & Desktop

Using responsive design techniques, Progressive Web Apps work on both mobile and desktop, using a single code base between platforms. If you’re considering writing a native app, take a look at the benefits that a PWA offers.



What you’ll build

In this codelab, you're going to build a weather web app using Progressive Web App techniques. Your app will:

  • Use responsive design, so it works on desktop or mobile.

  • Be fast, using a service worker to precache the app resources (HTML, CSS, JavaScript, images) needed to run, and cache the weather data at runtime to improve performance.

  • Be installable, using a web app manifest and the beforeinstallprompt event to notify the user it’s installable.









Note: To simplify this codelab, and explain the fundamentals of providing an offline experience, we’re using vanilla JavaScript. In a production app, we strongly recommend using tools like Workbox to build your service worker. It removes many of the sharp edges and dark corners you may run into.





What you’ll learn

  • How to create and add a web app manifest

  • How to provide a simple offline experience

  • How to provide a full offline experience

  • How to make your app installable



This codelab is focused on Progressive Web Apps. Non-relevant concepts and code blocks are glossed over and are provided for you to simply copy and paste.



What you’ll need

  • A recent version of Chrome (74 or later)PWAs are just web apps, and work in all browsers, but we’ll be using a few features of the Chrome DevTools to better understand what’s happening at the browser level, and use it to test the install experience.









NameDescriptionDefault
overrides
unknown
{}
onPageChange
unknown
() => {}
initialPage
unknown
0
iframeSourceUrls
unknown
[]
Stories
Base Web
2. Getting set up
Duration: 2:00



Get a key for the Dark Sky API



Our weather data comes from the Dark Sky API. In order to use it, you’ll need to request an API key. It’s easy to use, and free for non-commercial projects.



Register for API Key







Verify your API key is working properly

To test that your API Key is working properly, make an HTTP request to the DarkSky API. Update the URL below to replace DARKSKY_API_KEY with your API key. If everything works, you should see the latest weather forecast for New York City.



Copy
https://api.darksky.net/forecast/DARKSKY_API_KEY/40.7720232,-73.9732319







Get the code

We’ve put everything you need for this project into a Git repo. To get started, you’ll need to grab the code and open it in your favorite dev environment. For this codelab, we recommend using Glitch.



Strongly Recommended: Use Glitch to import the repo

Using Glitch is the recommended method for working through this codelab.



  • Open a new browser tab and go to https://glitch.com.

  • If you don’t have an account, you’ll need to sign up.

  • Click New Project, then Clone from Git Repo.

  • Clone https://github.com/googlecodelabs/your-first-pwapp.git and click OK.

  • Once the repo has loaded, edit the .env file, and update it with your DarkSky API key.

  • Click the Show Live button to see the PWA in action.

    • 

    Alternative: Download code & work locally

    If you want to download the code and work locally, you’ll need to have a recent version of Node, and code editor setup and ready to go. 

    

    

    

    Download source code

    

  • Unpack the downloaded zip file.

  • Run npm install to install the dependencies required to run the server.

  • Edit server.js and set your DarkSky API key.

  • Run node server.js to start the server on port 8000.

  • Open a browser tab to http://localhost:8000  

    •