Customise “Add to home screen” banner. in AMP
3
I'm currently working on a task to customise "Add to home screen".
Our website is AMP and I'm using worker service and manifest = PWA.
I already added the AMP library and this is how I install the worker service.
AMP part.
<amp-install-serviceworker
src="/sw.js"
data-iframe-src="/pwa/sw.html"
layout="nodisplay">
</amp-install-serviceworker>
<button class="add-button"> add to homescreen </button>
sw.js
self.addEventListener('install', function (e) {
e.waitUntil(
caches.open('iprice-coupons').then(function (cache) {
return cache.addAll();
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(fetch(event.request));
// or simply don't call event.respondWith, which
// will result in default browser behaviour
});
sw.html
<!DOCTYPE html>
<html>
<head>
<title>installing service worker</title>
<script type="text/javascript">
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log('Service Worker
Registered'); });
}
// Code to handle install prompt on desktop
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
</script>
</head>
<body>
</body>
</html>
Somehow the sw.html doesn't apply it's code. The button still appear in the frontend but it's not working. On mobile it was still the default banner appear.
javascript service-worker amp-html progressive-web-apps homescreen
edited Nov 26 '18 at 7:38
Vadim Kotov
4,64663447
asked Nov 24 '18 at 6:47
ahmed mahmoud zidanahmed mahmoud zidan
609
add a comment |
3
I'm currently working on a task to customise "Add to home screen".
Our website is AMP and I'm using worker service and manifest = PWA.
I already added the AMP library and this is how I install the worker service.
AMP part.
<amp-install-serviceworker
src="/sw.js"
data-iframe-src="/pwa/sw.html"
layout="nodisplay">
</amp-install-serviceworker>
<button class="add-button"> add to homescreen </button>
sw.js
self.addEventListener('install', function (e) {
e.waitUntil(
caches.open('iprice-coupons').then(function (cache) {
return cache.addAll();
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(fetch(event.request));
// or simply don't call event.respondWith, which
// will result in default browser behaviour
});
sw.html
<!DOCTYPE html>
<html>
<head>
<title>installing service worker</title>
<script type="text/javascript">
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log('Service Worker
Registered'); });
}
// Code to handle install prompt on desktop
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
</script>
</head>
<body>
</body>
</html>
Somehow the sw.html doesn't apply it's code. The button still appear in the frontend but it's not working. On mobile it was still the default banner appear.
javascript service-worker amp-html progressive-web-apps homescreen
edited Nov 26 '18 at 7:38
Vadim Kotov
4,64663447
asked Nov 24 '18 at 6:47
ahmed mahmoud zidanahmed mahmoud zidan
609
add a comment |
3
3
3
I'm currently working on a task to customise "Add to home screen".
Our website is AMP and I'm using worker service and manifest = PWA.
I already added the AMP library and this is how I install the worker service.
AMP part.
<amp-install-serviceworker
src="/sw.js"
data-iframe-src="/pwa/sw.html"
layout="nodisplay">
</amp-install-serviceworker>
<button class="add-button"> add to homescreen </button>
sw.js
self.addEventListener('install', function (e) {
e.waitUntil(
caches.open('iprice-coupons').then(function (cache) {
return cache.addAll();
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(fetch(event.request));
// or simply don't call event.respondWith, which
// will result in default browser behaviour
});
sw.html
<!DOCTYPE html>
<html>
<head>
<title>installing service worker</title>
<script type="text/javascript">
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log('Service Worker
Registered'); });
}
// Code to handle install prompt on desktop
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
</script>
</head>
<body>
</body>
</html>
Somehow the sw.html doesn't apply it's code. The button still appear in the frontend but it's not working. On mobile it was still the default banner appear.
javascript service-worker amp-html progressive-web-apps homescreen
edited Nov 26 '18 at 7:38
Vadim Kotov
4,64663447
asked Nov 24 '18 at 6:47
ahmed mahmoud zidanahmed mahmoud zidan
609
I'm currently working on a task to customise "Add to home screen".
Our website is AMP and I'm using worker service and manifest = PWA.
I already added the AMP library and this is how I install the worker service.
AMP part.
<amp-install-serviceworker
src="/sw.js"
data-iframe-src="/pwa/sw.html"
layout="nodisplay">
</amp-install-serviceworker>
<button class="add-button"> add to homescreen </button>
sw.js
self.addEventListener('install', function (e) {
e.waitUntil(
caches.open('iprice-coupons').then(function (cache) {
return cache.addAll();
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(fetch(event.request));
// or simply don't call event.respondWith, which
// will result in default browser behaviour
});
sw.html
<!DOCTYPE html>
<html>
<head>
<title>installing service worker</title>
<script type="text/javascript">
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log('Service Worker
Registered'); });
}
// Code to handle install prompt on desktop
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
</script>
</head>
<body>
</body>
</html>
Somehow the sw.html doesn't apply it's code. The button still appear in the frontend but it's not working. On mobile it was still the default banner appear.
javascript service-worker amp-html progressive-web-apps homescreen
javascript service-worker amp-html progressive-web-apps homescreen
edited Nov 26 '18 at 7:38
Vadim Kotov
4,64663447
asked Nov 24 '18 at 6:47
ahmed mahmoud zidanahmed mahmoud zidan
609
edited Nov 26 '18 at 7:38
Vadim Kotov
4,64663447
asked Nov 24 '18 at 6:47
ahmed mahmoud zidanahmed mahmoud zidan
609
edited Nov 26 '18 at 7:38
Vadim Kotov
4,64663447
edited Nov 26 '18 at 7:38
Vadim Kotov
4,64663447
edited Nov 26 '18 at 7:38
Vadim Kotov
4,64663447
4,64663447
asked Nov 24 '18 at 6:47
ahmed mahmoud zidanahmed mahmoud zidan
609
asked Nov 24 '18 at 6:47
ahmed mahmoud zidanahmed mahmoud zidan
609
asked Nov 24 '18 at 6:47
ahmed mahmoud zidanahmed mahmoud zidan
609
609
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455857%2fcustomise-add-to-home-screen-banner-in-amp%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455857%2fcustomise-add-to-home-screen-banner-in-amp%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
