A PWA directory, focusing on collecting PWA best practices and examples.
JavaScript HTML CSS
Latest commit 2d75a2d Feb 7, 2017 @juliantoledo juliantoledo committed on GitHub Merge pull request #333 from GoogleChrome/lighthouse-fixes
Fixes for running Lighthouse
Permalink
Failed to load latest commit information.
config fix gitignore Dec 21, 2016
controllers Fixes a problem with the update task Feb 6, 2017
img Improve README contents (cont.) Sep 27, 2016
lib Fixes for running Lighthouse Feb 7, 2017
middlewares Adds push notifications to Gulliver Dec 8, 2016
models Fix review comments Jan 18, 2017
public Directly claim clients, don't wait for caches to be cleared Jan 10, 2017
test Fixes a problem with the update task Feb 6, 2017
third_party Improve error handling for #282 Dec 14, 2016
views Add preconnect to improve page load speed Jan 19, 2017
.babelrc add missing npm modules Dec 13, 2016
.eslintignore Remove helmet and set scp manually. Sep 28, 2016
.eslintrc.json Change all var to let Sep 20, 2016
.gitignore Rename messaging service worker generator task name Dec 13, 2016
.travis.yml set firebase auth in travis Dec 21, 2016
FAQ.md Create a FAQ Oct 3, 2016
LICENSE first commit Jul 13, 2016
README.md improve config handling Dec 21, 2016
app.js Simplify backlink Jan 6, 2017
app.yaml Rollback to vm: true in app.yaml Jan 6, 2017
cron.yaml Added tests for Task Controller Oct 10, 2016
firebase-messaging-sw-generator.js Improve code for firing push notifications Dec 14, 2016
firebase-messaging-sw.tmpl Generate firebase-messaging-sw from a template Dec 13, 2016
index.yaml Change Lighthouse query to fetch most recent item Sep 26, 2016
package.json Remove mocha reporter selection (#324) Jan 9, 2017
rollup.config.js Adds push notifications to Gulliver Dec 8, 2016
tsconfig.json Build gulliver.js (ES5) from gulliver.es6.js Sep 28, 2016

README.md

Gulliver

Gulliver is a directory of Progressive Web Apps.

Contents

In Gulliver's landing page you can browse the set of currently registered PWAs as depicted in the following landing page snapshot:

Screenshot

If you click on a particular PWA, Gulliver takes you to a detail page showing the results of an evaluation done on that specific PWA using the Lighthouse PWA Analyzer tool (Details page #1), and a view of the associated web app manifest file for the application (Details Page #2):

Details Page #1 Details Page #2

Gulliver itself has been implemented as a PWA; therefore it is designed to work well on any kind of device, including desktop web browsers (see landing page), and on mobile devices (see details page).

FAQ

Visit our FAQ Page

Requirements

Gulliver was built using the ExpressJS web framework for Node.js, and uses the Google Cloud Platform (GCP) for computing and storage services.

The following components are required to run the project (tested on macOS):

  1. NodeJS (version ~6.0.0). A JavaScript runtime built on Chrome's V8 JavaScript engine. (How to verify? Run node --version.)

  2. Google Cloud SDK. A set of tools for the Google Cloud Platform (GCP) that you can use to access the Google Compute Engine and the Google Cloud Storage, which are two components of GCP used by Gulliver. (How to verify? Run gcloud --version.)

  3. Memcached. A distributed memory object caching system. (How to verify? Run memcached (the command should appear to hang), and then telnet localhost 11211 in a separate terminal. In the telnet window, typing version it should report the memcached version. If you don't have it, see these instructions to install memcached.)

In addition, you will need to set up a GCP project, and configure OAuth:

  1. Create a Google Cloud Platform project. A GCP project forms the basis of accessing the GCP. (How to verify? Run gcloud info and check that the Account and Project properties are what you expect. Use gcloud init to configure gcloud if you don't have one already.)

  2. Get the OAuth client id and client secret associated with this project. (How to verify? There's no automatic way, but see Creating a Google API Console project and client ID for how to create one. Make sure you list http://localhost:8080 as one of the Authorized JavaScript origins.)

Finally (and optionally), you need a Firebase project, and the Firebase Cloud Messaging "Server key" and "Sender ID":

  1. Create a Firebase project.

  2. Get Firebase Cloud Messaging "Server key" and "Sender ID" associated with this project. Select "Project settings" and then "Cloud Messaging". The URL should be of the form https://console.firebase.google.com/project/$FIREBASE_PROJECT/settings/cloudmessaging. (How to verify? There's no automatic way, but the "Server key" should be a long string of >100 characters, and the "Sender ID" a >10 digit number.)

Running Gulliver

  1. Clone the GitHub repository: git clone https://github.com/GoogleChrome/gulliver.git

  2. Switch into the project directory: cd gulliver

  3. Create indexes for the Google Cloud Datastore: gcloud preview datastore create-indexes index.yaml

  4. (Optional) Deploy cron jobs for scheduled PWA updates: gcloud app deploy cron.yaml

  5. Install Memcached and run it on localhost:11211. Check these installation instructions for guidance.

  6. Run npm install to install dependencies.

  7. Configure your project either via a config file or environment variables (which override the corresponding keys in the config file). To create a config file, copy the sample config and adjust the values accordingly:

$ cp config/config.example.json config.json
$ vim config/config.json
  1. Start Gulliver via npm start.

  2. Gulliver should now be running at http://localhost:8080.

Running Tests

To verify that everything is working properly you can run the project's tests:

  1. npm test to run lint + tests + coverage report.
  2. npm run mocha to run all the tests only.
  3. npm run coverage to run tests + coverage report.

Lighthouse PWA Analyzer

Gulliver reports an evaluation of the "progressiveness" of each registered PWA. This evaluation is done by Lighthouse, which is a tool that runs a set of checks validating the existence of the features, capabilities, and performance that should characterize a PWA. You can learn more about Lighthouse in the GitHub repository, or in this video.

References

To find out more about what PWAs are and how to go about incorporating the principles of PWAs into the development of your applications, check the following references which provide introductory information and references:

License

See LICENSE for more.

Disclaimer

This is not a Google product.