In fetch-api-lab/app/test/test.html Line:71 error is a string so

assert.ok(error.message.indexOf('File not found'),
          'bad responses throw error that contains response.statusText');

is a TypeError is it cannot read property indexOf of undefined which is breaking all subsequent tests.

Removing message.indexOf from the assert.ok prevents the error.

Web Push course refers to missing TODOs in the code of js/main.js: for example, 2.5, 2.6, 5.1.

These can be inferred by developers, but can also create some confusion on where to place the code snippets.

In Course 4.1, Step 6, Process Javascript
When we need to install the gulp-babel.
The command is given as
npm install --save-dev gulp-babel babel-core babel-preset-env

But there is a warning given when installing
"[email protected] requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself. "
And this would prevent our "gulp processJs" work.
We would get error: "Error: Cannot find module '@babel/core'"

In order to fix the error, we need to install the babel-core and babel-preset-env as peer dependencies with the command:
npm install --save-dev @babel/core

Corresponding issue in Gulp-Babel

I feel the readme folder is not detailed enough for those that want to contribute to Open Source for the first time. So, I want to add ways to contribute. Thank you

After running the server, when I open the browser I have the following error.

delete: new workbox.expiration.Plugin() and use new ExpirationPlugin(config)
line 30
https://github.com/google-developer-training/pwa-training-labs/blob/master/sw-precache-workbox-lab/solution/app/sw.js

https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-expiration.ExpirationPlugin

best regards Tjark

The Codelabs link in the readme 404's https://codelabs.developers.google.com/dev-pwa-training/. Is there an updated link?

In Section 2 (Get Set Up) of Chapter 3 (Scripting the service worker), the tutorial mentions the following:

test/ folder contains files for testing your progress

The test/ folder was removed in #26. This is a minor issue, but it may cause confusion.

In the article you write about sw but the comment on "An unknown error occurred when fetching the script. service-worker.js Failed to load resource: net::ERR_CONNECTION_REFUSED. " @ https://codelabs.developers.google.com/codelabs/pwa-workbox/#4

Awesome and i think the best article about pwa that I have read yet!

In the first README file the link to the gitbook leads to a 404 page:
Gitbook

cd offline-quickstart-lab/app
npm install
node server.js
Error: Cannot find module '.../PWA/pwa-training-labs/server.js'
node -v
v11.10.0

In the promises-lab section the files are capitalized however the fetchFlag function receive the file names in lower case.

Summary

In the current version of Chrome: 76.0 users the developer can choose to update service worker file after a reload with that in mind it would be nice to update the instructions for updating the service workers' file.

Screenshot

Proposed update

In the tutorial Web Apps 05.0: Caching files with the service worker, at the page 4. Serve files from the cache, you have two links caches.match that point to the cache.match and not to the cacheS.match documentation.

https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker#serving_files_from_the_cache

Cache then network example.

var networkDataReceived = false;

startSpinner();

// fetch fresh data
var networkUpdate = fetch('/data.json').then(function(response) {
  return response.json();
}).then(function(data) {
  networkDataReceived = true;
  updatePage(data);
});

// fetch cached data
caches.match('/data.json').then(function(response) {
  if (!response) throw Error("No data");
  return response.json();
}).then(function(data) {
  // don't overwrite newer network data
  if (!networkDataReceived) {
    updatePage(data);
  }
})
.catch(function() {
  // we didn't get cached data, the network is our last hope:
  return networkUpdate;
})
.catch(showErrorMessage) // never called, because previous catch swallows thrown error
.then(stopSpinner()); // stopSpinner called immediately, should be `then(stopSpinner)`.

See comments for last 2 lines of above snippet

If there is better place to report this problem, please let me know. I'll move it.

The instructions (progressive-web-apps-ilt-codelabs.pdf) for service-worker-lab mention navigating to app/test/test-registered.html but this doesn't seem to exist.

Same problem with cache-api-lab

Hi,

I was working on the lab exercises for Developing Progressive Web Apps 03.1: Promises
on MacOS (High Sierra, version: 10.13.6). It appears that the following test will fail on MacOS

    QUnit.test('flagChain (finished in section 3)', (assert) => {
      const done = assert.async();
      app.flagChain('invalid input')
      .then(r => {
        const domImages = document.getElementsByTagName('img');
        assert.ok(domImages.length > 0, 'appends image to DOM');
        done();
      }).catch(e => {
        assert.ok(false, 'catches rejections');
        done();
      });
    });

I suspect that the reason was due to the fallback function returning the following in lowercase

  function fallbackName() {
    return 'chile.png';
  }

but the images in the test folder are in uppercase

This causes Express to be unable to locate the file since the Fetch API call will pass imageName which is from fallbackName.

  function fetchFlag(imageName) {
    return fetch('flags/' + imageName); // fetch returns a promise
  }

This might be OS related as I was not able to test on Windows or Linux. Will it be a good idea to rename the files in the Test folder to be lowercase. I could get the test to pass by doing that. And it keeps the names consistent with those in the /app/flags folder as well. I will be happy to create the PR if this is the accepted solution

Working with IndexedDB lab:

Uncaught TypeError: indexedDB.webkitGetDatabaseNames is not a function
Source: /indexed-db-lab/app/test/test.html:48

function checkDb() { var dbExists = false; // Webkit only works in Chrome return promisifyRequest(indexedDB.webkitGetDatabaseNames())

indexedDB.webkitGetDatabaseNames() is a deprecated feature
https://www.chromestatus.com/features/5725741740195840

Good morning,

I just started taking the Developing Progressive Web Apps training course; On runnng the command http-server -p 8080 -a localhost -c 0 inside the responsive-design-lab/app/ I got this error: Corrupted Content Error: The site at http://localhost:8080/ has experienced a network protocol violation that cannot be repaired.. I've cleared the site data and unregistered all serivce workers buit the error still persist.
Please advise on a forward in resolving it.

Thank you.

Summary

In the offline quickstart lab it is mentioned that the file that contains all the service worker code is named sw.js when the file is named service-worker.js. Is there a repo where I can make a PR to update it? @samdutton @DavidScales.

Screenshots

Hi, I just in codelab : Integrating Analytics in the section 8. Using analytics in the service worker. In this section the student can try experiment with push notification. Here's is the detail

Test service worker

But, I didn't see the action or button to test push notification in google analytics lab page
No push notification button in google analytics page

Thanks.

In section 3.3 Add objects to the object store, when I press the Add products button, the items didn't save in the IndexedDB and comes error in my console like picture below.

In IndexedDB > couches-n-things > products:

I hope this issue can be solved ASAP. Thanks a lot team.