Skip to content

Commit 38be041

Browse files
malchatamalchata
authored
Lighthouse pwa docs migration (GoogleChrome#2157)
* Migrates English version of the Lighthouse PWA audit docs. * Migrates Spanish translation of Lighthouse PWA docs. * Adds Japanese translation of Lighthouse PWA audit docs. * Goofed up migration of Japanese audits, starting over. * Properly migrated the Japanese translation of PWA audit docs this time. * Added the Korean translation for Lighthouse PWA audit docs. * Adds Portugese translations of Lighthouse PWA audit docs. * Migrates the Russian translation of Lighthouse PWA audit docs. * Adds the Chinese translation of the Lighthouse PWA audit docs. * Removes backticks in titles since they don't render in monospace font.
1 parent 3b65054 commit 38be041

File tree

84 files changed

+3697
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+3697
-0
lines changed

‎site/_data/docs/lighthouse/pwa/toc.yml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
- title: i18n.docs.pwa.topics.fast_and_reliable
2+
sections:
3+
- url: /docs/lighthouse/pwa/load-fast-enough-for-pwa/
4+
- url: /docs/lighthouse/pwa/works-offline/
5+
- url: /docs/lighthouse/pwa/offline-start-url/
6+
- title: i18n.docs.pwa.topics.installable
7+
sections:
8+
- url: /docs/lighthouse/pwa/is-on-https/
9+
- url: /docs/lighthouse/pwa/service-worker/
10+
- url: /docs/lighthouse/pwa/installable-manifest/
11+
- title: i18n.docs.pwa.topics.pwa_optimized
12+
sections:
13+
- url: /docs/lighthouse/pwa/redirects-http/
14+
- url: /docs/lighthouse/pwa/splash-screen/
15+
- url: /docs/lighthouse/pwa/themed-omnibox/
16+
- url: /docs/lighthouse/pwa/content-width/
17+
- url: /docs/lighthouse/pwa/viewport/
18+
- url: /docs/lighthouse/pwa/without-javascript/
19+
- url: /docs/lighthouse/pwa/apple-touch-icon/
20+
- url: /docs/lighthouse/pwa/maskable-icon-audit/
21+
- title: i18n.docs.pwa.topics.additional_items_to_manually_check
22+
sections:
23+
- url: /docs/lighthouse/pwa/pwa-cross-browser/
24+
- url: /docs/lighthouse/pwa/pwa-page-transitions/
25+
- url: /docs/lighthouse/pwa/pwa-each-page-has-url/

‎site/_data/docs/lighthouse/toc.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,6 @@
77
- url: /docs/lighthouse/performance/
88
title: i18n.docs.performance.intro
99
description: i18n.docs.performance.overview
10+
- url: /docs/lighthouse/pwa/
11+
title: i18n.docs.pwa.intro
12+
description: i18n.docs.pwa.overview

‎site/_data/i18n/docs/pwa.yml‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
intro:
2+
en: PWA audits
3+
es: Auditorias de las PWA
4+
ja: PWA の監査
5+
ko: PWA 감사
6+
pt: Auditorias de PWA
7+
ru: PWA-аудиты
8+
zh: PWA 审核
9+
intro_description:
10+
en: Measure if your site is fast, reliable and installable.
11+
es: Miden si su sitio web es rápido, confiable e instalable.
12+
ja: あなたのサイトの高速性、信頼性、インストール可能性を測定します。
13+
ko: 사이트가 빠르고 안정적이며 설치 가능한지 측정합니다.
14+
pt: Meça se o seu site é rápido, confiável e instalável.
15+
ru: Проверьте свой сайт на предмет скорости, надежности и возможности установки.
16+
zh: 衡量您的网站是否迅速、可靠且可安装。
17+
overview:
18+
en: These checks validate the aspects of a Progressive Web App.
19+
es: Estas revisiones validan las características de una aplicación web progresiva.
20+
ja: これらを確認することにより、プログレッシブウェブアプリの様々な側面を検証することができます。
21+
ko: 이러한 검사는 프로그레시브 웹 앱의 다양한 측면을 확인합니다.
22+
pt: Essas verificações validam os aspectos de uma Aplicação Web Progressiva (PWA).
23+
ru: Эти тесты позволяют проверить различные аспекты прогрессивного веб-приложения.
24+
zh: 这些检查可以验证渐进式 Web 应用的各个方面。
25+
topics:
26+
fast_and_reliable:
27+
en: Fast and reliable
28+
es: Rápida y confiable
29+
ja: 高速性と安定性
30+
ko: 빠르고 안정적
31+
pt: Rápido e confiável
32+
ru: Скорость и надежность
33+
zh: 快速且可靠
34+
installable:
35+
en: Installable
36+
es: Instalable
37+
ja: インストール可能性
38+
ko: 설치 가능
39+
pt: Instalável
40+
ru: Возможность установки
41+
zh: 可安装
42+
pwa_optimized:
43+
en: PWA optimized
44+
es: PWA optimizada
45+
ja: PWA 最適化
46+
ko: PWA 최적화
47+
pt: Otimizado para PWA
48+
ru: Оптимизация для PWA
49+
zh: 已优化的 PWA
50+
additional_items_to_manually_check:
51+
en: Additional items to manually check
52+
es: Elementos adicionales para revisar manualmente
53+
ja: 手動で確認する場合の追加項目
54+
ko: 수동으로 확인할 추가 항목
55+
pt: Itens adicionais para verificar manualmente
56+
ru: Дополнительные пункты для ручной проверки
57+
zh: 其他需要手动检查的项目

‎site/_includes/content/lighthouse-pwa/scoring.njk‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{% Aside 'note' %}
2+
In the Lighthouse report UI the full PWA badge is given when you pass all of the
3+
audits in all of the PWA subcategories (**Fast and reliable**, **Installable**, and **PWA optimized**).
4+
{% endAside %}

‎site/_includes/content/reliable/workbox.njk‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{% Aside 'success' %}
2+
[Workbox](/docs/workbox/) is the recommended approach for adding
3+
service workers to websites because it automates a lot of
4+
boilerplate, makes it easier to follow best practices, and
5+
prevents subtle bugs that are common when using the low-level
6+
`ServiceWorker` API directly.
7+
{% endAside %}

‎site/_static/images/project/lighthouse-pwa.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎site/en/docs/lighthouse/pwa/apple-touch-icon/index.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
layout: 'layouts/doc-post.njk'
3+
title: Does not provide a valid apple-touch-icon
4+
description: |
5+
Learn how to specify what icon your Progressive Web App displays on iOS home screens.
6+
codelabs: codelab-apple-touch-icon
7+
date: 2019-08-27
8+
updated: 2019-09-19
9+
---
10+
11+
When iOS Safari users add [Progressive Web Apps (PWAs)](https://web.dev/progressive-web-apps/#make-it-installable) to
12+
their home screens, the icon that appears is called the *Apple touch icon*.
13+
You can specify what icon your app should use by including a
14+
`<link rel="apple-touch-icon" href="/example.png">` tag in the `<head>` of your
15+
page. If your page doesn't have this link tag, iOS generates an icon by taking a screenshot of
16+
the page content. In other words, instructing iOS to download an icon results in a more polished
17+
user experience.
18+
19+
## How the Lighthouse Apple touch icon audit fails
20+
21+
[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
22+
flags pages without a `<link rel="apple-touch-icon" href="/example.png">`
23+
tag in the `<head>`:
24+
25+
<figure>
26+
{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/mXGs4XSr4DXMxLk536wo.png", alt="Does not provide a valid apple-touch-icon", width="800", height="95" %}
27+
</figure>
28+
29+
{% Aside %}
30+
A `rel="apple-touch-icon-precomposed"` link passes the audit, but it has been
31+
obsolete since iOS 7. Use `rel="apple-touch-icon"` instead.
32+
{% endAside %}
33+
34+
Lighthouse doesn't check whether the icon actually exists or whether the icon is
35+
the correct size.
36+
37+
{% include 'content/lighthouse-pwa/scoring.njk' %}
38+
39+
## How to add an Apple touch icon
40+
41+
1. Add `<link rel="apple-touch-icon" href="/example.png">` to the `<head>` of your page:
42+
43+
```html/4
44+
<!DOCTYPE html>
45+
<html lang="en">
46+
<head>
47+
…
48+
<link rel="apple-touch-icon" href="/example.png">
49+
…
50+
</head>
51+
…
52+
```
53+
54+
1. Replace `/example.png` with the actual path to your icon.
55+
56+
{% Aside 'codelab' %}
57+
Check out the [Add an Apple touch icon to your Progressive Web App](https://web.dev/codelab-apple-touch-icon)
58+
codelab to see how adding an Apple touch icon creates a more polished user experience.
59+
{% endAside %}
60+
61+
To provide a good user experience, make sure that:
62+
63+
- The icon is 180x180&nbsp;pixels or 192x192&nbsp;pixels
64+
- The specified path to the icon is valid
65+
- The background of the icon is not transparent
66+
67+
## Resources
68+
69+
- [Source code for **Does not provide a valid `apple-touch-icon`** audit][source]
70+
- [Discover what it takes to be installable](https://web.dev/install-criteria)
71+
- <a href="https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/" rel="noreferrer">Use Apple Touch Icon</a>
72+
73+
[a2hs]: https://support.apple.com/guide/shortcuts/run-shortcuts-from-the-ios-home-screen-apd735880972/ios#apd175362e63
74+
[source]: https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/apple-touch-icon.js

‎site/en/docs/lighthouse/pwa/content-width/index.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
layout: 'layouts/doc-post.njk'
3+
title: Content is not sized correctly for the viewport
4+
description: |
5+
Learn how to size your web page content to fit on mobile screens.
6+
date: 2019-05-04
7+
updated: 2019-09-19
8+
---
9+
10+
The viewport is the part of the browser window
11+
in which your page's content is visible.
12+
When your page's content width is smaller or larger than the viewport width,
13+
it may not render correctly on mobile screens.
14+
For example, if the content width is too large,
15+
content may be scaled down to fit, making text difficult to read.
16+
17+
## How the Lighthouse content width audit fails
18+
19+
[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
20+
flags pages whose width isn't equal to the width of the viewport:
21+
22+
<figure>
23+
{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/y8JKlbJTu7ERetHUGuaA.png", alt="Lighthouse audit showing content not correctly sized for viewport", width="800", height="98" %}
24+
</figure>
25+
26+
The audit fails if `window.innerWidth` does not equal `window.outerWidth`.
27+
28+
{% include 'content/lighthouse-pwa/scoring.njk' %}
29+
30+
## How to make your page fit on mobile screens
31+
32+
This audit is a roundabout way of determining
33+
if your page is optimized for mobile devices.
34+
See Google's
35+
[Responsive Web Design Basics](https://developers.google.com/web/fundamentals/design-and-ux/responsive/)
36+
for an overview of how to create a mobile-friendly page.
37+
38+
You can ignore this audit if:
39+
40+
- Your site does not need to be optimized for mobile screens.
41+
- The content width of your page is intentionally smaller or larger than the
42+
viewport width.
43+
44+
## Resources
45+
46+
- [Source code for **Content is not sized correctly for the viewport** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/content-width.js)
47+
- [Responsive Web Design Basics](https://developers.google.com/web/fundamentals/design-and-ux/responsive/)

‎site/en/docs/lighthouse/pwa/index.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
layout: 'layouts/project-landing.njk'
3+
title: 'PWA Audits'
4+
description: 'These checks validate the aspects of a Progressive Web App.'
5+
project_key: lighthouse/pwa
6+
---

‎site/en/docs/lighthouse/pwa/installable-manifest/index.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
layout: 'layouts/doc-post.njk'
3+
title: Web app manifest does not meet the installability requirements
4+
description: |
5+
Learn how to make your Progressive Web App installable.
6+
codelabs:
7+
- codelab-make-installable
8+
date: 2019-05-04
9+
updated: 2022-01-25
10+
---
11+
12+
Installability is a core requirement of [Progressive Web Apps (PWAs)](https://web.dev/progressive-web-apps/#make-it-installable).
13+
By prompting users to install your PWA, you allow them to add it to their home screens.
14+
Users who add apps to home screens engage with those apps more frequently.
15+
16+
A [web app manifest](https://web.dev/add-manifest/) includes key pieces of information
17+
required to make your app installable.
18+
19+
## How the Lighthouse web app manifest audit fails
20+
21+
[Lighthouse](https://developers.google.com/web/tools/lighthouse/)
22+
flags pages that don't have a [web app manifest](https://web.dev/add-manifest/)
23+
that meets minimum requirements for installability:
24+
25+
<figure>
26+
{% Img src="image/tcFciHGuF3MxnTr1y5ue01OGLBn2/039DlaixA4drrswBzSra.png", alt="Lighthouse audit showing user can't install the web app from their home screen", width="800", height="98" %}
27+
</figure>
28+
29+
If a page's manifest doesn't include the following properties,
30+
it will fail the audit:
31+
- A [`short_name`](https://developer.mozilla.org/docs/Web/Manifest/short_name)
32+
or [`name`](https://developer.mozilla.org/docs/Web/Manifest/name) property
33+
- An [`icons`](https://developer.mozilla.org/docs/Web/Manifest/icons)
34+
property that includes a 192x192&nbsp;px and a 512x512&nbsp;px icon
35+
- A [`start_url`](https://developer.mozilla.org/docs/Web/Manifest/start_url) property
36+
- A [`display`](https://developer.mozilla.org/docs/Web/Manifest/display)
37+
property set to `fullscreen`, `standalone`, or `minimal-ui`
38+
- A [`prefer_related_applications`](https://developers.google.com/web/fundamentals/app-install-banners/native)
39+
property set to a value other than `true`.
40+
41+
{% Aside 'caution' %}
42+
A web app manifest is _necessary_ for your app to be installable,
43+
but it isn't _sufficient_. To learn how to meet all the requirements
44+
for installability, see the
45+
[Discover what it takes to be installable](https://web.dev/progressive-web-apps/#make-it-installable) post.
46+
{% endAside %}
47+
48+
{% include 'content/lighthouse-pwa/scoring.njk' %}
49+
50+
## How to make your PWA installable
51+
Make sure your app has a manifest that meets the criteria above.
52+
See [Make it installable](/docs/lighthouse/pwa/#installable) for more information
53+
about creating a PWA.
54+
55+
## How to check that your PWA is installable
56+
57+
### In Chrome
58+
59+
When your app meets the minimum requirements for installability,
60+
Chrome fires a `beforeinstallprompt` event
61+
that you can use to prompt the user to install your PWA.
62+
63+
{% Aside 'codelab' %}
64+
Learn how to make your app installable in Chrome
65+
with the [Make it installable](https://web.dev/codelab-make-installable) codelab.
66+
{% endAside %}
67+
68+
### In other browsers
69+
Other browsers have different criteria for installation
70+
and for triggering the `beforeinstallprompt` event.
71+
Check their respective sites for full details:
72+
- [Edge](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps#requirements)
73+
- [Firefox](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Add_to_home_screen#How_do_you_make_an_app_A2HS-ready)
74+
- [Opera](https://dev.opera.com/articles/installable-web-apps/)
75+
- [Samsung Internet](https://hub.samsunginter.net/docs/ambient-badging/)
76+
- [UC Browser](https://plus.ucweb.com/docs/pwa/docs-en/zvrh56)
77+
78+
## Resources
79+
80+
- [Source code for **Web app manifest does not meet the installability requirements** audit](https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/installable-manifest.js)
81+
- [Add a web app manifest](https://web.dev/add-manifest/)
82+
- [Discover what it takes to be installable](https://web.dev/progressive-web-apps/#make-it-installable)
83+
- [Web App Manifest](https://developer.mozilla.org/docs/Web/Manifest)
84+
- [Does not use HTTPS](/docs/lighthouse/pwa/is-on-https/)

0 commit comments

Comments
 (0)