Angular - Jak utworzyć trwały/stały przycisk "Dodaj do ekranu głównego" w mojej aplikacji internetowej, tak jak Google Contribute

Question

Jak utworzyć stały/stały przycisk "Dodaj do ekranu głównego" w mojej aplikacji internetowej, podobnie jak Google Przyczynić się? (patrz zdjęcie poniżej)

Tło: Jest to aplikacja Angular v5 z usługą serwisową PWA i manifest.json wszystkie ustawienia. Po wylądowaniu w aplikacji pojawi się baner zachęcający użytkowników do Dodaj do ekranu głównego. Wszystko działa dobrze.

Jak mieć przycisk w mojej aplikacji internetowej, jak Google Contribute (patrz obrazek poniżej)?

Answer 1

Można utworzyć ParentComponent które obejmują swoją przycisku.

Następnie rozszerz (dziedzicz) każdy nowy komponent do tego ParentComponent.

Answer 2

position: sticky? należy dodać ten przycisk poza routerem, aby pozostał niezaznaczony w zależności od widoku? nie wiem dokładnie, co masz na myśli. jeśli spróbujesz opisać to nieco więcej, mogę pomóc więcej.

Answer 3

Naprawdę nie ma standardu i API do tego. Mimo to, coś można jeszcze zrobić.

Jak określono tutaj:

https://developers.google.com/web/fundamentals/app-install-banners/

Jeśli aplikacja spełnia określone kryteria, Chrome automatycznie wyświetla banner dla użytkownika.

Has a web app manifest file with: 
    a short_name (used on the home screen) 
    a name (used in the banner) 
    a 192x192 png icon (the icon declarations must include a mime type of image/png) 
    a start_url that loads 
Has a service worker registered on your site. 
Is served over HTTPS (a requirement for using service worker). 
Meets a site engagement heuristic defined by Chrome (this is regularly being changed). 

Jako alternatywę dla iOS, proponuję następujące biblioteki:

http://cubiq.org/add-to-home-screen (https://github.com/cubiq/add-to-homescreen)

Answer 4

Można to osiągnąć przez ng-content. Powiedzmy, że mamy CardComponent, W card.component.html możemy mieć to:

<div class="card"> 
    <ng-content></ng-content> 
</div> 

w naszym ContriobuteComponent, mamy:

<card> 
    <div class="card-block"> 
    <a href="#" class="btn btn-primary">Add to Home Screen</a> 
    <h2>{{username | uppercase }}</h2> 
    </div> 
</card> 

Zawartość w div będzie wstrzykiwany do ng-content. Podobnie w ReviewsComponent można wstrzykiwać różne treści.

Answer 5

Dodaj przycisk Dodaj do ekranu głównego w aplikacji app.component.html. Użyj stylizacji, aby ustawić ją zgodnie z potrzebami.

na przykład, jeśli masz

<router-outlet></router-outlet> 

zmienić na

 <button class = "add-to-home-screen" 
      (click) = "addToHomeScreenClicked()"> add to home screen</button> 
     <router-outlet></router-outlet> 

Answer 6

PERSONNALY Dodam go do aplikacji komponentu lub utworzyć komponent poza routerem i będę go wyświetlić w stały blok div. Czy potrzebujesz pomocy w aspekcie kątowym lub html/css?Dla kątowej w aplikacji komponentu

<app-fixedFav [inputFav]="favList"></app-fixedNav> 
<app-guide (addToFav)="updateFavList($event)"></app-guide> 

Następnie w swoim przewodniku, gdy ktoś Dodaj miejsce do ulubionych emitują listy ulubionych z krytym EventEmitter i uruchomić funkcję aktualizacji w komponentu aplikacji. Następnie w swojej konsoli nawigacyjnej utwórz dane wejściowe, takie jak w moim przykładzie, lub składnik ViewChild w aplikacji, aby zaktualizować zawartość stałą.