Support PWA "Add to home screen"

Open

#1,966 opened on Nov 9, 2020 10 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

browser community feature-request type-enhancement

Dominant language: TypeScript
Stars: 3k
Forks: 1.7k
Avg merge: 1d 14h
Merged PRs (30d): 669

Description

**Describe the usability problem**
MetaMask mobile has its own in-app web browser for Dapps, bringing a lot of cool features ! However I cannot add a shortcut to my home screen for PWA websites (only add them in my favorites inside the app).
I would be easier to embrace the "Add to Home screen" features on mobile so Dapp can be easily accessed from Home screen as regular mobile apps.

[Mozilla Web docs about "Add to Home screen"](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen)

**Screenshots**

|MetaMask Mobile browser| Brave Browser|
|---|---|
|![device-2020-11-09-111125](https://user-images.githubusercontent.com/12660783/98522470-683cbf00-227d-11eb-85f7-f75a4c22e371.png) | ![device-2020-11-09-111716](https://user-images.githubusercontent.com/12660783/98522469-65da6500-227d-11eb-87ba-227de34d59f7.png)|

**Expected behavior**
When visiting a PWA-enabled website e.g. https://mdn.github.io/pwa-examples/a2hs/, I should be able to add it to my home screen. (in example with the "Add to home screen" button on top left corner)

------------------------------------------------------------------------------------------------------
_filled out after submission_

**User impact | Usage frequency | Feasibility scores**
_How important is this to the user, what the user wants to accomplish | Daily, weekly, monthly | Small, medium, large_

Contributor guide

Open the contributing guide

First steps

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.

Research direction

No file, test, or entry point is named. Start by reviewing the mobile Dapp browser flow and the linked MDN Add to Home Screen guidance, then compare it with the provided PWA example. Done means a PWA-enabled site can be added to the device home screen from MetaMask Mobile.

Written by the indexing model from the issue text.

Assessment

Tech stack: react-native, typescript
Domain: mobile, web-dev
Issue type: Feature
Difficulty: 4/5
Estimated time: 3-5 days
Activity status: Stale
Clarity: Mostly clear
Newbie friendliness: 38/100