aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/window/onbeforeinstallprompt/index.html
blob: e2243375f79a4b963a6040fa9da32d73718dc44d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
---
title: Window.onbeforeinstallprompt
slug: Web/API/Window/onbeforeinstallprompt
tags:
  - Window.onbeforeinstallprompt
  - beforeinstallprompt
translation_of: Web/API/Window/onbeforeinstallprompt
---
<p>{{ ApiRef() }}</p>

<p><code><strong>Window.onbeforeinstallprompt</strong></code> 属性是一个事件处理程序, 用于处理一个{{event("beforeinstallprompt")}}, 当一个Web清单存在时,它将在移动设备上发送,但是在提示用户将网站保存到主屏幕之前。</p>

<h2 id="句法">句法</h2>

<pre class="syntaxbox">window.addEventListener("beforeinstallprompt", function(event) { ... });

window.onbeforeinstallprompt = function(event) { ...};</pre>

<h2 id="范例">范例</h2>

<p>The following example uses the beforeinstallprompt function to verify that it is an appropriate time to display an installation prompt to the user. If it is not, the event is redispatched.</p>

<pre class="brush: js">let isTooSoon = true;
window.addEventListener("beforeinstallprompt", function(e) {
  if (isTooSoon) {
    e.preventDefault(); // Prevents prompt display
    // Prompt later instead:
    setTimeout(function() {
      isTooSoon = false;
      e.prompt(); // Shows prompt
    }, 10000);
  }

  // The event was re-dispatched in response to our request
  // ...
});</pre>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(45.0)}} [1]</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatNo() }}</td>
   <td>{{CompatChrome(45.0)}} [1]</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{CompatChrome(45.0)}} [1]</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Behind the flagchrome://flags/#bypass-app-banner-engagement-checks</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Manifest', '#onbeforeinstallprompt-attribute', 'Window.onbeforeinstallprompt')}}</td>
   <td>{{Spec2('Manifest')}}</td>
   <td>Initial specification.</td>
  </tr>
 </tbody>
</table>

<h2 id="也可以看看">也可以看看</h2>

<ul>
 <li>{{domxref("BeforeInstallPromptEvent.prompt")}}</li>
 <li>{{domxref("BeforeInstallPromptEvent")}}</li>
</ul>