koddr / a2hs.js

📲 A useful modern JavaScript solution that helps your website users to add (install) a progressive web application (PWA) to the Home Screen of their mobile iOS devices.

Hello, everyone! 👋

My name is Vic Shóstak. I'm a Software Engineer with excellent UX/UI knowledge and over 13 years of practical experience.

Technical expertise

In more than 13 years of successful work in the IT industry, my technology stack has changed many times, but the technical expertise has always remained at the highest level. I think it's important, not just to write clean code and make a supported infrastructure or create a wonderful UI design, but to look for the root of the problem in the task at hand.

Currently, I'm working in the following stack:

• Backend
  • Go, Python
  • PostgreSQL, SQLite
  • Nginx
• Frontend
  • htmx
  • Alpine.js
  • Vue.js, Nuxt 3
  • Tailwind CSS, daisyUI
  • Bun, Vite
• Tools
  • GitHub Actions
  • Docker, podman
  • GoReleaser, Templ

Awesome GitHub repos

My current active project is:

Other projects:

• A self-hosted solution for repository statistics https://github.com/koddr/wonderful-readme-stats
• Create Go App CLI: https://github.com/create-go-app/cli
• The Go Snippet Library: https://github.com/koddr/gosl
• JSON to CSV parser: https://github.com/koddr/json2csv
• CSV to API parser: https://github.com/koddr/csv2api
• Yet Another Task Runner (yatr): https://github.com/koddr/yatr
• Go template for my next project: https://github.com/koddr/template-go
• Go tutorials and code examples

With my active support:

• Fiber: https://github.com/gofiber/fiber
• Asynq: https://github.com/hibiken/asynq

Dev.to blog

I write useful articles on my Dev.to blog about developer tips and tricks and Open Source projects.

GitHub stats

Thank you!

If you want to give GitHub star to any of my projects, I would be very grateful! 🥰

a2hs.js's Issues

Add to IONIC/VUE PWA

Overview of the problem

Hi, thanks for sharing this resources.

In my App, I'm import this library modified for my project, and not work,I think the reason is the lack of the return method
You can modifying this project for PWA?
thanks!

Screenshots

I have thus modified the library to be able to import

const AddToHomeScreen = function(settings = {}) {
....
....
....
...
....
export default AddToHomeScreen;

Steps to Reproduce

Configuration

• Browser:
• OS/Device:
• a2hs.js:

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

demostration don't work

Hi! Very nice idea, but https://1wa.co/ don't work and I can't look live demonstration.
it turns out I can not see how it works on a real device. it's a pity

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

Live demo on ios not working

Overview of the problem

I was trying to live demo on my upgraded iOS device, and I cannot see the banner

Screenshots

Steps to Reproduce

1. Ios devise in private mode
2. Url specified for live demo
3. Go

Configuration

• Browser: safari
• OS/Device: IOS 13 latest version
• a2hs.js: do not know

can't build

cd a2hs.js && npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint-plugin-promise
npm ERR!   dev eslint-plugin-promise@"^6.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint-plugin-promise@"^4.2.1 || ^5.0.0" from [email protected]
npm ERR! node_modules/eslint-config-standard
npm ERR!   dev eslint-config-standard@"^16.0.3" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint-plugin-promise
npm ERR!   peer eslint-plugin-promise@"^4.2.1 || ^5.0.0" from [email protected]
npm ERR!   node_modules/eslint-config-standard
npm ERR!     dev eslint-config-standard@"^16.0.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/apple/.npm/_logs/2023-11-09T17_03_43_562Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/apple/.npm/_logs/2023-11-09T17_03_43_562Z-debug-0.log

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

Please, release it

Could you coordinate your code with this to get a generic method?

`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', () => {
// 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;
});
});
});`

This code makes a simple button on the page of my site to install the application on some devices, but not on safari or iOS.
It's attractive in its simplicity, that's why I use it

PWA A2HS is inconsistent between browsers and the experience is awful

At first, let me tell you that this is a possible enhancement discussion for the library, and not a problem with it - at all!

Overview of the problem

To provide some context on this issue before pointing out what I would like to see (and contribute to of course):

Nowadays every browser seems to tackle the A2HS issue on their own way.

1. Apple being Apple and totally disregarding PWAs is the main bottleneck. Service Workers have just been recently implemented in Service Workers (iOS Safari). From the looks of a discussion I've read on it doesn't look they will be implementing it anything soon.
2. Firefox is not clear about their intentions and are postponing the decision to an unknown future until PWAs have a clearer future view. They are testing out possible callouts/popups in Beta/Dev versions.
3. Chrome, Edge and Samsung Browser do have this functionality fully working. Why them 3? Because all are based on Chromium.

The reluctance of these browsers who haven't yet implemented any kind of attention grabber for the existence of an installable PWA is due the mess they realized that was made when developers could start asking for permission to send Notifications without any precondition at all.

That quickly led to an "usual" awful UX in a huge amount of existing websites that were constantly spamming you in each visit asking you to enable Notifications. A plague just like the cookies policy bar that has invaded the web the past year.

Fast-forwarding to today, Chrome does implement beforeinstallprompt but seems to be the only one interested in implementing it. Therefore, one more time, it causes some inconsistency for us the developers and for our users.

At the current state, we have no way to provide an uniform way of delivering a PWA install to our website visitors and we want to make that experience painless.

I think we may agree that everyone who develops a PWA should be able to efficiently provide an installation method for every user without fighting each and every browser, being able to deliver the most consistent installation experience possible.

What can we do?

In my opinion, we could try to make a customizable bottom bar (similar what the library currently does) but supporting Firefox and iOS cases, offering custom instructions to the user on how to proceed.

The view I had for this was something similar to the following:

(source: https://web.dev/customize-install/)

This, with the addition of the PWA App Icon would promote the installation of a PWA, allowing the developer to present a good benefit for the installation and an actionable "Install" button that would have an higher CTR than the current bar.

Clicking "Install" would differ based on the browser.

Chrome: As we are able to catch the Chrome's own incentive callout, we can save the triggered event and trigger the Add to Home Screen ourselves once we press the Install button. All good.

Firefox and iOS: As there is some uncertainty in these browsers, what I would suggest is that once the "Install" button is clicked, a popup would appear with different instructions according to each browser, possibly with accompanying images (customizable by the developer) to guide the user on how to install the PWA in their browser. If we wanted, we could as well abstract this and just call a callback function and each developer would implement it in the way they want to, however that would leave the burden to the developer to identify the disparities between every browser and eventually changing every guide according to them.

I am aware that the purpose of the library is to mainly help adding a PWA - at this time only on iOS -, but in my view, we could all benefit so much from this and do the job no one seems to care enough in browser development.

Let me know your thoughts!

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.

Dependabot can't parse your package-lock.json

Dependabot couldn't parse the package-lock.json found at /package-lock.json.

The error Dependabot encountered was:

Dependabot::DependencyFileNotParseable

View the update logs.