amp-app-banner
Componen amp-app-banner menyediakan antarmuka pengguna minimal untuk banner posisi tetap lintas platform yang menunjukkan ajakan bertindak untuk menginstal aplikasi. Khususnya, banner amp-aplikasi berfungsi di dalam penampil AMP, seperti korsel Top Stories di Google Search. Di luar penampil AMP, banner aplikasi asli akan ditampilkan seperti banner amp-aplikasi di Safari di iOS dan Chrome di Android.
Cara Penambahannya
Masukan komponen amp-app-banner tepat di bawah pembukaan <head>
Deklarasikan aplikasi iOS di metadata. Ini memungkinkan Safari untuk juga membangun banner pemasangan aplikasi.
Aplikasi Android harus dinyatakan dalam manifes aplikasi web. Ini juga akan mengaktifkan banner instalasi aplikasi asli dan Chrome dan Android.
Tautan dalam pada aplikasi Anda dihitung berdasarkan tautan kanonik AMP Anda. Di sini kami menautkan ke artikel di Media karena kami tidak memiliki aplikasi asli AMP by Example.
Penggunaan dasar
Penguat amp-app-banner Itu dapat sepenuhnya dikustomisasi oleh pengembang, selama tingginya tidak melebihi 100px. Elemen antarmuka pengguna yang diperlukan dari sebuah tombol dengan atribut [open-button], yang mengaktifkan instalasi aplikasi tidak membuka deep-link jika aplikasi sudah diinstal.
Demo
Banner aplikasi khusus muncul di pemirsa AMP. Tindakan banner membuka URL kanonik dokumen sebagai tautan yang dalam di dalam aplikasi:
dan jika aplikasi tidak diinstal, tindakan banner menunjukkan aplikasi di Play Store / App Store:
Pruebas
Amplifier amp-app-banner hanya akan ditampilkan di browser yang tidak menyediakan banner instalasi aplikasi mereka sendiri. Ini berarti bahwa Chrome di Android atau Safari di iOS tidak akan menampilkan amplifier amp-app-banner, tetapi banner pemasangan asli. Untuk mencoba amp-aplikasi-banner Anda dapat membuka halaman ini:
- Pada perangkat seluler : di browser tanpa banner pemasangan asli, misalnya, Firefox di Android atauChrome en iOS.
- Di atas meja: di mode emulasi perangkat seluler append #webview=1 ke URL halaman. Pilihan lainnya adalah menggunakan agen pengguna khusus dalam mode emulasi seluler, misalnya:
Cara Penambahannya
Masukan komponen amp-app-banner tepat di bawah pembukaan <head>
<script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js"></script>
Deklarasikan aplikasi iOS di metadata. Ini memungkinkan Safari untuk juga membangun banner pemasangan aplikasi.
<meta name="apple-itunes-app" content="app-id=828256236, app-argument=medium://p/9ea61abf530f">
Aplikasi Android harus dinyatakan dalam manifes aplikasi web. Ini juga akan mengaktifkan banner instalasi aplikasi asli dan Chrome dan Android.
<link rel="manifest" href="/amp-app-banner-manifest.json">
Tautan dalam pada aplikasi Anda dihitung berdasarkan tautan kanonik AMP Anda. Di sini kami menautkan ke artikel di Media karena kami tidak memiliki aplikasi asli AMP by Example.
<link rel="canonical" href="https://medium.com/google-developers/how-to-avoid-common-mistakes-when-publishing-accelerated-mobile-pages-9ea61abf530f">
Penggunaan dasar
Penguat amp-app-banner Itu dapat sepenuhnya dikustomisasi oleh pengembang, selama tingginya tidak melebihi 100px. Elemen antarmuka pengguna yang diperlukan dari sebuah tombol dengan atribut [open-button], yang mengaktifkan instalasi aplikasi tidak membuka deep-link jika aplikasi sudah diinstal.
Contohnya <amp-app-banner layout="nodisplay" id="banner"> <div id="banner-logo"> <amp-img src="https://cdn-images-1.medium.com/max/50/1*JLegdtjFMNgqHgnxdd04fg.png" width="50" height="43" layout="fixed"></amp-img> </div> <div id="banner-text">Learn more about AMP in the Medium App.</div> <div id="banner-action"> <button class="ampstart-btn mr1 caps" open-button>View in app</button> </div> </amp-app-banner>
Demo
Banner aplikasi khusus muncul di pemirsa AMP. Tindakan banner membuka URL kanonik dokumen sebagai tautan yang dalam di dalam aplikasi:
dan jika aplikasi tidak diinstal, tindakan banner menunjukkan aplikasi di Play Store / App Store:
Pruebas
Amplifier amp-app-banner hanya akan ditampilkan di browser yang tidak menyediakan banner instalasi aplikasi mereka sendiri. Ini berarti bahwa Chrome di Android atau Safari di iOS tidak akan menampilkan amplifier amp-app-banner, tetapi banner pemasangan asli. Untuk mencoba amp-aplikasi-banner Anda dapat membuka halaman ini:
- Pada perangkat seluler : di browser tanpa banner pemasangan asli, misalnya, Firefox di Android atauChrome en iOS.
- Di atas meja: di mode emulasi perangkat seluler append #webview=1 ke URL halaman. Pilihan lainnya adalah menggunakan agen pengguna khusus dalam mode emulasi seluler, misalnya:
Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) CriOS/51.000.21 Mobile/13B143 Safari/601.1