web.dev

https://web.dev/articles
Admin
web.dev is Google's educational resource platform providing articles, guides, and courses on web...
Tokens:431,386
Snippets:6,181
Trust Score:10
Update:4 months ago
Show doc for...
Tokens:
Raw
### Set up Node.js Server with Express

Source: https://web.dev/articles/codelab-text-compression

Basic Express server setup to serve static files from the 'public' directory. Ensure Node.js and Express are installed.

```javascript
const express = require('express');

const app = express();

app.use(express.static('public'));

const listener = app.listen(process.env.PORT, function() {
  console.log('Your app is listening on port ' + listener.address().port);
});

```

--------------------------------

### Handle Install Button Click

Source: https://web.dev/articles/codelab-make-installable

Trigger the install prompt by calling `prompt()` on the saved `beforeinstallprompt` event when the install button is clicked. This handler logs the user's choice and hides the install button.

```javascript
butInstall.addEventListener('click', async () => {
  console.log('👍', 'butInstall-clicked');
  const promptEvent = window.deferredPrompt;
  if (!promptEvent) {
    // The deferred prompt isn't available.
    return;
  }
  // Show the install prompt.
  promptEvent.prompt();
  // Log the result
  const result = await promptEvent.userChoice;
  console.log('👍', 'userChoice', result);
  // Reset the deferred prompt variable, since
  // prompt() can only be called once.
  window.deferredPrompt = null;
  // Hide the install button.
  divInstall.classList.toggle('hidden', true);
});
```

--------------------------------

### Install Lighthouse and Puppeteer Dependencies

Source: https://web.dev/articles/lighthouse-user-flows

Installs the necessary npm packages for running Lighthouse user flow examples. Ensure Node.js version 14 or later is used.

```bash
# Default to ES modules.

```

```bash
echo '{"type": "module"}' > package.json

```

```bash
# Init npm project without the wizard.

```

```bash
npm init -y

```

```bash
# Dependencies for these examples.

```

```bash
npm install lighthouse puppeteer open

```

--------------------------------

### Initial Request Example

Source: https://web.dev/articles/user-preference-media-features-headers

An example of an initial HTTP request from a client to a server.

```bash
GET / HTTP/2
Host: example.com
```

--------------------------------

### Basic Web App Manifest

Source: https://web.dev/articles/add-manifest

A typical manifest file includes the app's name, icons, and start URL. This example demonstrates the core structure and common properties.

```json
{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-vector.svg",
      "type": "image/svg+xml",
      "sizes": "512x512"
    },
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "id": "/?source=pwa",
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's the weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's the weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720",
      "form_factor": "narrow"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "720x540",
      "form_factor": "wide"
    }
  ]
}
```

--------------------------------

### Install mkcert (Quick Reference)

Source: https://web.dev/articles/how-to-use-local-https

Installs mkcert using Homebrew. This is a prerequisite for generating local certificates.

```bash
brew install mkcert

```

--------------------------------

### Copy webpkgserver Configuration Example

Source: https://web.dev/articles/signed-exchanges-webpackager

Create the main configuration file by copying the provided example. This file, `webpkgserver.toml`, will be modified to suit your testing environment.

```shell
cp ./webpkgserver.example.toml ./webpkgserver.toml
```

--------------------------------

### Install Lighthouse

Source: https://web.dev/articles/use-lighthouse-for-performance-budgets

Install the command line version of Lighthouse v5+ to use the performance budget feature.

```bash
npm install -g lighthouse

```

--------------------------------

### Listen for beforeinstallprompt Event

Source: https://web.dev/articles/customize-install?hl=es

Listen for the `beforeinstallprompt` event to intercept the browser's default installation prompt. Save the event to trigger the custom installation flow later and update the UI to inform the user that the PWA can be installed.

```javascript
// Initialize deferredPrompt for later use.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevents the mini-infobar from appearing on mobile
  e.preventDefault();
  // Save the event so it can be triggered later
  deferredPrompt = e;
  // Update the UI to notify the user that your PWA can be installed
  showInstallPromotion();
  // Optionally, send analytics event to know if the install promotion was displayed
  console.log(`'beforeinstallprompt' event was fired.`);
});

```

--------------------------------

### Verify webpkgserver Installation

Source: https://web.dev/articles/signed-exchanges-webpackager

Checks if the webpkgserver binary has been installed correctly by displaying its help information.

```bash
./webpkgserver --help

```

--------------------------------

### Configure Server Start Command

Source: https://web.dev/articles/lighthouse-ci

Specify the command to start your application's server for Lighthouse CI to use during testing.

```javascript
collect: {
  startServerCommand: 'npm run start',
}

```

--------------------------------

### Basic MediaSource API Example

Source: https://web.dev/articles/media-streaming-basics

Illustrates how to set up a MediaSource and SourceBuffer to stream video data. This example requires video data to be appended to the buffer.

```javascript
const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

```

--------------------------------

### Install Lighthouse CI CLI

Source: https://web.dev/articles/lighthouse-ci

Install the Lighthouse CI command-line interface globally using npm.

```bash
npm install -g @lhci/cli

```

--------------------------------

### Trigger In-App Install Prompt

Source: https://web.dev/articles/customize-install

This code demonstrates how to trigger the PWA installation prompt when a user clicks an install button. It hides the in-app promotion, shows the browser's install dialog, and logs the user's choice.

```javascript
buttonInstall.addEventListener('click', async () => {
  // Hide the app provided install promotion
  hideInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice;
  // Optionally, send analytics event with outcome of user choice
  console.log(`User response to the install prompt: ${outcome}`);
  // We've used the prompt and can't use it again, throw it away
  deferredPrompt = null;
});

```

--------------------------------

### Server-Timing Header Example

Source: https://web.dev/articles/optimize-ttfb

Example of a Server-Timing header with two metrics, including descriptions and durations.

```http
Server-Timing: db;desc="Database";dur=121.3, ssr;desc="Server-side Rendering";dur=212.2
```

--------------------------------

### Install Lighthouse Bot

Source: https://web.dev/articles/using-lighthouse-bot-to-set-a-performance-budget

Install Lighthouse Bot as a development dependency in your project using npm.

```bash
npm i --save-dev https://github.com/ebidel/lighthousebot

```

--------------------------------

### Start Nginx and Generate SXG

Source: https://web.dev/articles/how-to-set-up-signed-http-exchanges

After configuring Nginx, start the server and then use `curl` to request an SXG. The output will be saved as an `.sxg` file, which can then be inspected.

```bash
cd /opt/nginx/sbin
sudo ./nginx
curl -H "Accept: application/signed-exchange;v=b3" https://website.test/ > index.html.sxg
less index.html.sxg
sxg1-b3...https://website.test/...(omit)

```

--------------------------------

### Install mkcert on macOS

Source: https://web.dev/articles/how-to-use-local-https

Installs mkcert and nss (for Firefox) using Homebrew.

```bash
brew install mkcert
brew install nss # if you use Firefox

```

--------------------------------

### Install and Use Lighthouse Node CLI

Source: https://web.dev/articles/lighthouse-whats-new-6

Install the Lighthouse Node CLI globally using npm. This allows you to run Lighthouse audits from your command line.

```bash
npm install -g lighthouse && lighthouse https://yoursite.com --view
```

--------------------------------

### Start webpkgserver

Source: https://web.dev/articles/signed-exchanges-webpackager

Execute this command to launch the webpkgserver. Successful startup is indicated by specific log messages, such as 'Listening at 127.0.0.1:8080'.

```shell
./webpkgserver
```

--------------------------------

### Log Service Worker Installation

Source: https://web.dev/articles/codelab-service-workers

This snippet logs a message when the service worker's install event is triggered. It's part of the initial service worker setup.

```javascript
self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});
```

--------------------------------

### Get a list of installed related apps

Source: https://web.dev/articles/get-installed-related-apps

Call the `navigator.getInstalledRelatedApps()` method to retrieve a promise that resolves with an array of installed related apps. This method is asynchronous and may not be available in all browsers.

```javascript
const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

```

--------------------------------

### Get the version of an installed Android app

Source: https://web.dev/articles/get-installed-related-apps

Find and retrieve the version number of a specific installed related Android app using its package ID. This one-liner uses `find` to locate the app in the results.

```javascript
const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

```

--------------------------------

### Example key information file content

Source: https://web.dev/articles/media-encryption

This example shows the content of a key information file, including a sample key URI, file path, and the private key (or IV).

```text
https://example.com/keys/media.key
/path/to/media.key
6143b5373a51cb46209cfed0d747da66
```

--------------------------------

### Travis CI Configuration

Source: https://web.dev/articles/using-lighthouse-bot-to-set-a-performance-budget

Example .travis.yml file for a Node.js project. It specifies the Node.js version, installs dependencies, and runs webpack.

```yaml
language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

```

--------------------------------

### Service Worker Update Example

Source: https://web.dev/articles/service-worker-lifecycle

This service worker example demonstrates versioned caching by opening a new cache ('static-v2') and adding a resource to it during installation. It also shows how to clean up old caches during activation and how to intercept fetch requests to serve cached assets.

```javascript
const expectedCaches = ['static-v2'];

self.addEventListener('install', event => {
  console.log('V2 installing…');

  // cache a horse SVG into a new cache, static-v2
  event.waitUntil(
    caches.open('static-v2').then(cache => cache.add('/horse.svg'))
  );
});

self.addEventListener('activate', event => {
  // delete any caches that aren't in expectedCaches
  // which will get rid of static-v1
  event.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys.map(key => {
        if (!expectedCaches.includes(key)) {
          return caches.delete(key);
        }
      })
    )).then(() => {
      console.log('V2 now ready to handle fetches!');
    })
  );
});

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);

  // serve the horse SVG from the cache if the request is
  // same-origin and the path is '/dog.svg'
  if (url.origin == location.origin && url.pathname == '/dog.svg') {
    event.respondWith(caches.match('/horse.svg'));
  }
});

```

--------------------------------

### Convert to 720p WebM

Source: https://web.dev/articles/resolution

Use this command to convert a media file to a 720p resolution WebM format. Ensure FFmpeg is installed and you are starting from the highest resolution source file.

```bash
/media # ffmpeg -i glocken.mov -b:v 350k -b:a 64k -s 1280x720 glocken_3g_720p.webm
```

--------------------------------

### Listen for beforeinstallprompt Event

Source: https://web.dev/articles/codelab-make-installable

Capture the `beforeinstallprompt` event to enable the installation of your web app and stash the event for later use. This handler also unhides the install button.

```javascript
window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent the mini-infobar from appearing on mobile.
  event.preventDefault();
  console.log('👍', 'beforeinstallprompt', event);
  // Stash the event so it can be triggered later.
  window.deferredPrompt = event;
  // Remove the 'hidden' class from the install button container.
  divInstall.classList.toggle('hidden', false);
});
```

--------------------------------

### Convert to 720p MP4

Source: https://web.dev/articles/resolution

Use this command to convert a media file to a 720p resolution MP4 format. Ensure FFmpeg is installed and you are starting from the highest resolution source file.

```bash
/media # ffmpeg -i glocken.mov -b:v 350k -b:a 64k -s 1280x720 glocken_3g_720p.mp4
```

--------------------------------

### Initialize Bubblewrap Project

Source: https://web.dev/articles/using-a-pwa-in-your-android-app

Use this command to bootstrap a new Android app project by providing the URL of your Web Manifest. Ensure you have Node.js and npm installed.

```bash
npx @bubblewrap/cli init --manifest=https://pwa-directory.appspot.com/manifest.json
```

--------------------------------

### PowerShell Command to Get Appx Package Family Name

Source: https://web.dev/articles/get-installed-related-apps

Execute this PowerShell command to retrieve the Package Family Name for your installed Windows app. This name is required for the `windows-app-web-link` configuration file.

```powershell
Get-AppxPackage | Select-Object PackageFamilyName

```

--------------------------------

### Run Lighthouse with budget path

Source: https://web.dev/articles/use-lighthouse-for-performance-budgets

Execute Lighthouse with the --budget-path flag to specify the location of your budget configuration file.

```bash
lighthouse https://example.com --budget-path=./budget.json

```

--------------------------------

### Listen for PWA Installation Event

Source: https://web.dev/articles/customize-install

Use the 'appinstalled' event listener to detect when a PWA has been successfully installed, regardless of the installation method.

```javascript
window.addEventListener('appinstalled', () => {
  // Hide the app-provided install promotion
  hideInstallPromotion();
  // Clear the deferredPrompt so it can be garbage collected
  deferredPrompt = null;
  // Optionally, send analytics event to indicate successful install
  console.log('PWA was installed');
});
```

--------------------------------

### Install webpack-bundle-analyzer

Source: https://web.dev/articles/monitor-and-analyze

Install the webpack-bundle-analyzer package as a development dependency.

```bash
npm install webpack-bundle-analyzer --save-dev

```

--------------------------------

### Install webpack-dashboard

Source: https://web.dev/articles/monitor-and-analyze

Install the webpack-dashboard package as a development dependency.

```bash
npm install webpack-dashboard --save-dev

```

--------------------------------

### Start Nginx and Test SXG

Source: https://web.dev/articles/how-to-set-up-signed-http-exchanges

Starts the Nginx service and makes a request to a test domain to retrieve an SXG file. Then, it displays the content of the retrieved file.

```bash
sudo systemctl start nginx.service
curl -H"Accept: application/signed-exchange;v=b3" https://website.test/ > index.html.sxg
cat index.html.sxg
```

--------------------------------

### Install Nginx SXG Module Debian Package

Source: https://web.dev/articles/how-to-set-up-signed-http-exchanges

Installs the Nginx SXG filter module from a Debian package. This requires a specific Nginx version to be installed first.

```bash
sudo apt install -y nginx=1.15.9-0
wget https://github.com/google/nginx-sxg-module/releases/download/v0.1/libnginx-mod-http-sxg-filter_1.15.9-0ubuntu1.1_amd64.deb
sudo dpkg -i libnginx-mod-http-sxg-filter_1.15.9-0ubuntu1.1_amd64.deb
```

--------------------------------

### Check FFmpeg Installation

Source: https://web.dev/articles/codelab-replace-gifs-with-video

Verify that FFmpeg is installed and accessible in the terminal by checking its path.

```bash
which ffmpeg

```

```bash
/usr/bin/ffmpeg

```

--------------------------------

### Create Multiple Object Stores with Various Key Definitions

Source: https://web.dev/articles/indexeddb

Demonstrates creating three object stores ('people', 'notes', 'logs') with different primary key configurations (keyPath, autoIncrement, or both).

```javascript
import {openDB} from 'idb';

async function createStoresInDB () {
  const dbPromise = await openDB('test-db2', 1, {
    upgrade (db) {
      if (!db.objectStoreNames.contains('people')) {
        db.createObjectStore('people', { keyPath: 'email' });
      }

      if (!db.objectStoreNames.contains('notes')) {
        db.createObjectStore('notes', { autoIncrement: true });
      }

      if (!db.objectStoreNames.contains('logs')) {
        db.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });
      }
    }
  });
}

createStoresInDB();

```

--------------------------------

### Webpack Build Output Example

Source: https://web.dev/articles/use-long-term-caching

Example of Webpack build output showing separate main and vendor bundles. This indicates successful code splitting and dependency extraction.

```bash
$ webpack
Hash: ac01483e8fec1fa70676
Version: webpack 3.8.1
Time: 3816ms
                        Asset      Size  Chunks             Chunk Names
 ./main.00bab6fd3100008a42b0.js   82 kB       0  [emitted]  main
./vendor.d9e134771799ecdf9483.js  47 kB       1  [emitted]  vendor

```

--------------------------------

### Install bundlesize

Source: https://web.dev/articles/monitor-and-analyze

Install the bundlesize package as a development dependency to enable bundle size verification.

```bash
npm install bundlesize --save-dev

```

--------------------------------

### Configure http-server for HTTPS

Source: https://web.dev/articles/how-to-use-local-https

Starts the http-server with HTTPS enabled, specifying the certificate and key files. Replace placeholders with your actual file paths.

```bash
http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem

```

--------------------------------

### Install and Run Lighthouse Node CLI

Source: https://web.dev/articles/lighthouse-whats-new-6

Use these commands to install the Lighthouse Node CLI globally and run an audit on a specified URL. This is useful for automated testing and integration into CI/CD pipelines.

```bash
npm install -g lighthouse
```

```bash
lighthouse https://www.example.com --view
```

--------------------------------

### Shaka Packager Dump Stream Info Example

Source: https://web.dev/articles/media-application-basics

Use this command to display detailed characteristics of the audio and video streams within a media file. It's useful for verifying codecs, resolution, and duration.

```bash
packager input=glocken.mp4                       --dump_stream_info
```

--------------------------------

### Dockerfile for Media Tools

Source: https://web.dev/articles/media-application-basics

This Dockerfile sets up an environment with Shaka Packager and FFmpeg. It uses multi-stage builds to copy the Shaka Packager binary and then installs FFmpeg.

```dockerfile
FROM google/shaka-packager:release-v2.4.3 as packager
FROM jrottenberg/ffmpeg:4.3.2-alpine38
COPY --from=packager /usr/bin /usr/bin
ENTRYPOINT  ["sh"]

```

--------------------------------

### React Development Build Example

Source: https://web.dev/articles/decrease-frontend-size

React loads a development build with warnings when NODE_ENV is not 'production'.

```javascript
// react/index.js
if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

// react/cjs/react.development.js
// …
warning$3(
    componentClass.getDefaultProps.isReactClassApproved,
    'getDefaultProps is only used on classic React.createClass '
    + 'definitions. Use a static property named `defaultProps` instead.'
);
// …

```

--------------------------------

### Create Object Store with Existence Check

Source: https://web.dev/articles/indexeddb

This example demonstrates how to safely create an object store by first checking if it already exists. This prevents errors if the store is created multiple times.

```javascript
import {openDB} from 'idb';

async function createStoreInDB () {
  const dbPromise = await openDB('test-db1', 1, {
    upgrade (db) {
      console.log('Creating a new object store...');

      // Checks if the object store exists:
      if (!db.objectStoreNames.contains('people')) {
        // If the object store does not exist, create it:
        db.createObjectStore('people');
      }
    }
  });
}

createStoreInDB();

```

--------------------------------

### Node.js Express.js Example for Sec-CH-Prefers-Color-Scheme

Source: https://web.dev/articles/user-preference-media-features-headers

This Node.js example demonstrates how to handle the `Sec-CH-Prefers-Color-Scheme` client hint header in an Express.js application.

```javascript
app.get("/", (req, res) => {
  // Tell the client the server accepts the `Sec-CH-Prefers-Color-Scheme` client hint…
  res.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server's response will vary based on its value…
  res.set("Vary", "Sec-CH-Prefers-Color-Scheme");
  // …and that the server considers this client hint a _critical_ client hint.
  res.set("Critical-CH", "Sec-CH-Prefers-Color-Scheme");
  // Read the user's preferred color scheme from the headers…
  const prefersColorScheme = req.get("sec-ch-prefers-color-scheme");
  // …and send the adequate HTML response with the right CSS inlined.
  res.send(getHTML(prefersColorScheme));
});

```
Tokens:
Raw