krystian1988 - dodatki do PHPFusion » krystian1988 » Ogólne
 Drukuj temat
Strona w PF jako aplikacja na smartfonie
Apis
Wyżej  #1 Drukuj posta
Dodany dnia 18.11.2022 11:31
Nasza strona postawiona na skrypcie Fusion 8 i 9 po wybraniu w przeglądarce smartfona funkcji "dodaj do ekranu głównego" będzie zachowywać się jak każda inna aplikacja. Zostanie dodana do ekranu ikonka, po kliknięciu której otworzy się nasza strona bez konieczności uruchamiania przeglądarki internetowej. Domyślnie jednak pojawi się na naszym ekranie ikona PHPFusion i i taki opis, choć po kliknięciu otworzy się nasza strona.

Aby ta opcja działała prawidłowo - musimy wykonać kilka czynności.

Po pierwsze: musimy zmienić zestaw ikon w folderze images/favicons i zastapić ikony PHPFusion własnymi. Najlepiej w tym celu użyć generatora online - https://realfavicongenerator.net/ - który oprócz potrzebnych ikon wygeneruje też potrzebne nam inne pliki. Oczywiście najpierw trzeba przygotować swój plik graficzny, który zostanie użyty jako obraz naszej ikony w kwadratowym polu o rozmiarach 512 x 512 pikseli. To ważne, bo m.in. potrzebna jest ikona w tym rozmiarze.

Po drugie: Wygenerowany plik pobieramy, zapisujemy i rozpakowujemy. Za pomocą edytora tekstowego (np. Notepad++) otwieramy plik site.webmanifest, który wygląda tak:
Kod źródłowyPobierz kod źródłowy  

{

    "name": "",

    "short_name": "",

    "icons": [

        {

            "src": "/android-chrome-192x192.png",

            "sizes": "192x192",

            "type": "image/png"

        },

        {

            "src": "/android-chrome-512x512.png",

            "sizes": "512x512",

            "type": "image/png"

        }

    ],

    "theme_color": "#ffffff",

    "background_color": "#ffffff",

    "display": "standalone"

}

i edytujemy go umieszczając w odpowiednich miejscach nazwę naszej strony i jej opis jak u mnie:
Kod źródłowyPobierz kod źródłowy  

{

    "name": "Żegluga śródlądowa",

    "short_name": "Żegluga",

    "description": "Oficjalny serwis informacyjny polskiej żeglugi śródlądowej",

    "icons": [

        {

            "src": "android-chrome-192x192.png",

            "sizes": "192x192",

            "type": "image/png"

        },

           {

            "src": "android-chrome-512x512.png",

            "sizes": "512x512",

            "type": "image/png"

        },   

    ],

    "theme_color": "#ffffff",

    "background_color": "#ffffff",

    "display": "standalone"

}

Po trzecie: teraz cała zawartość musi zostać przeniesiona do katalogu images/favicons na serwerze

PHPFusion 7 również można w ten sposób zmodyfikować, ale musimy wykonać troszkę więcej. Poza wykonaniem powyższych operacji (należy najpierw utworzyć folder images/favicons na serwerze, bo w PF 7 go nie ma) trzeba dodać w sekcji <head> informacje skąd mają być pobierane dane aplikacji oraz ikony:

Kod źródłowyPobierz kod źródłowy  

<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">

<link rel="manifest" href="images/favicons/site.webmanifest">

<link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#262626">

<meta name="msapplication-TileColor" content="#262626">


Powodzenia!
Edytowane przez Apis dnia 18.11.2022 15:21
---
Jeśli wydaje ci się, że wiesz wszystko - masz rację: wydaje ci się...
 
krystian1988
Wyżej  #2 Drukuj posta
Dodany dnia 19.11.2022 16:58
Na pewno się wielu to przyda Uśmiech
--------------------------------------------
Pozdrawiam krystian1988.
 
WWW
Przejdź do forum: