Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix readme.md and index.html for deferred-banner sample. #868

Merged
merged 3 commits into from
Oct 17, 2024
Merged

Fix readme.md and index.html for deferred-banner sample. #868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e101f1
Fix readme.md and index.html
markafoltz Oct 14, 2024
8ef1ca5
Fix timing of readme.md
markafoltz Oct 14, 2024
00f1e27
Respond to comments
markafoltz Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 6 additions & 11 deletions app-install-banner/deferred-banner/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,33 +25,28 @@
<body>
<h1>Web App Install Banner: Defer prompt of banner sample</h1>

<p>Available in <a href="https://www.chromestatus.com/features/4540065577435136">Chrome 45+ (for Android)</a></p>
<p>Available in <a href="https://www.chromestatus.com/features/6560913322672128">Chrome 45+</a></p>

<p>The <a href="https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/">web app install banner</a> will prompt the user to add your web app to the users home screen.
It will only prompt when a number of criteria have been met:
</p>

<ul>
<li>The app uses a <a href="https://developers.google.com/web/fundamentals/getting-started/primers/service-workers">service worker</a></li>
<li>The site is using HTTPS</li>
<li>The app has a manifest declared</li>
<li>The manifest has a <code>short_name</code>, 144 pixel icon and a type of 'image/png'</li>
</ul>

<p>Frequently developers want be able to control when the Add to homescreen prompt is shown to users.
This API and example shows you how you can defer the prompt until a later time, in this case when the
user clicks the button below. If the button below is disabled, Chrome has chosen now is not a good time to
show the prompt.</p>

<button id="btnSave" disabled>Click this to show the prompt</button>
<p>Frequently developers want be able to control when the install flow is shown to users.
This API and example shows you how you can defer the flow until a later time, in this
case when the user clicks the button below.</p>

<button id="btnSave" disabled>Click this to install the app</button>

<p>Below you will see the output of the example.</p>

<pre id=output></pre>

<p>For testing we encourage you to force the banner to appear by setting the chrome://flags/#bypass-app-banner-engagement-checks flag.</p>
<p>To see if this example works, come back after a few minutes and you will see the banner.</p>

<script>
window.addEventListener('load', function() {

Expand Down
14 changes: 6 additions & 8 deletions app-install-banner/deferred-banner/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
App Install Banner User Response Sample
Deferred App Install Banner Sample
===

See https://googlechrome.github.io/samples/app-install-banner/useraction-banner/index.html for a live demo.
See https://googlechrome.github.io/samples/app-install-banner/deferred-banner/index.html for a live demo.

#### Directions

#### Directions:
* Install Chrome, or another browser that supports manifest.
* Visit the demo page.

* Install Chrome, or another browser that supports Service Workers and manifest
* Visit the site over two separate days.
* Or, more usefully, enable chrome://flags/#bypass-app-banner-engagement-checks

On the second vist, you will see a message on the page that says the user either installed the app or dismissed the banner.
The browser will trigger the install flow when you click the button.