Bagikan melalui

Membuat dan mendistribusikan aplikasi web progresif

  • Artikel

Gunakan Studio desain Power Pages untuk mengkonfigurasi PWA (aplikasi web progresif). Anda dapat mengaktifkan atau menonaktifkan kemampuan PWA. Anda dapat menyesuaikan pengaturan PWA dan bersiap untuk membuat paket aplikasi untuk dipublikasikan ke toko perangkat masing-masing jika Anda mau.

  1. Tuju Power Pages.

  2. Pilih situs Anda, dan kemudian pilih edit.

  3. Di studio desain, pilih Atur ruang kerja , lalu pilih aplikasi web progresif.

    Luncurkan aplikasi web progresif dari Atur ruang kerja.

  4. Klik Aktifkan PWA.

    Aktifkan aplikasi web progresif dari Atur ruang kerja.

Branding aplikasi Anda

Anda dapat membuat PWA bermerek Anda sendiri dengan menggunakan pilihan penyesuaian untuk mengubah nama aplikasi, halaman mulai, warna, dan banyak lagi.

Catatan

Di perangkat iOS, ikon untuk PWA akan ditampilkan sebagai gambar kecil dan layar percikan yang disesuaikan tidak akan ditampilkan.

  1. Di studio desain, pilih aplikasi web progresif.

  2. Perbarui pengaturan PWA berikut ini untuk situs Anda.

    Pengaturan Keterangan
    Titel Nama portal PWA yang muncul di perangkat seluler dan di toko aplikasi.
    Description Deskripsi PWA yang muncul di perangkat seluler dan di app store.
    Halaman awal aplikasi Halaman awal untuk situs saat dibuka melalui PWA.
    Latar belakang layar pembuka Warna latar belakang untuk layar percikan saat PWA dimuat.
    Ikon aplikasi Ikon untuk aplikasi yang muncul di perangkat seluler dan di app store.
    Catatan: Mendukung format .jpg, .jpeg, .png dengan ukuran unggahan maksimum 5 MB. Ukuran ikon harus 512 × 512 piksel.

    Catatan

    Bergantung pada browser Anda, mungkin perlu beberapa saat untuk mencerminkan perubahan Anda. Setelah menyesuaikan PWA, pilih pratinjau untuk mengosongkan cache situs Anda.

Menentukan Perilaku offline

PWA menawarkan dukungan untuk pengalaman navigasi yang lancar saat perangkat yang digunakan offline atau tidak terhubung ke Internet. Anda dapat memilih halaman dalam situs Anda yang tersedia secara offline (baca-saja), dan halaman pesan untuk kemampuan portal lainnya yang tidak diaktifkan untuk akses offline.

Mengkonfigurasi halaman offline untuk PWA portal

  1. Di studio desain, di Ruang kerja Siapkan , pilih Aplikasi web progresif.

  2. Dalam Pengaturan lainnya, pilih Definisikan halaman offline.

    Memilih halaman untuk mode offline.

  3. Pilih halaman yang Anda ingin dapat diakses pengguna saat menggunakan PWA secara offline.

    Mengelola halaman offline.

Catatan

Saat mengkonfigurasi akses offline untuk halaman PWA, pastikan untuk mempertimbangkan pembatasan penyimpanan untuk perangkat pengguna. Bila kebutuhan penyimpanan untuk akses PWA offline melebihi penyimpanan yang tersedia pada perangkat, seluruh portal tidak akan tersedia untuk akses offline. Sebaiknya uji pengalaman pengguna dalam akses offline dan hanya membuat cache halaman yang akan paling membantu dan penting bagi pengguna Anda. Ingatlah bahwa halaman offline hanya dapat menampilkan informasi; halaman yang terhubung ke Microsoft Dataverse yang berisi formulir untuk diisi atau menjalankan kueri tidak akan berfungsi saat offline.

Konfigurasikan halaman pesan offline

Saat perangkat offline, halaman yang Anda konfigurasikan sebagai halaman pesan offline akan muncul saat pengguna mencoba mengakses halaman yang tidak diaktifkan untuk akses offline.

  1. Di studio desain, pilih ruang kerja Halaman.

  2. Pilih Halaman offline default.

  3. Sesuaikan halaman.

Catatan

  • Anda tidak dapat mengubah bidang Judul atau URL Sebagian ("/halaman default-offline") untuk halaman offline. Halaman offline default akan ditampilkan kepada pengguna jika halaman offline tidak ada.
  • Bergantung pada browser Anda, mungkin perlu beberapa saat untuk mencerminkan perubahan Anda. Setelah menyesuaikan pengalaman PWA offline, pilih pratinjau untuk mengosongkan cache situs Anda.

Menguji situs dalam mode offline

Setelah mengaktifkan halaman offline, Anda dapat menggunakan perangkat seluler dalam mode offline dan menelusuri berbagai halaman yang diaktifkan untuk akses offline.

  1. Telusuri situs Anda dengan menggunakan browser web pada perangkat seluler dalam mode online.

  2. Pilih Tambahkan ke Layar beranda atau pilihan serupa. Contohnya, di perangkat Android, pilihannya mungkin + Tambah ke>layar Aplikasi.

    Menambahkan PWA ke halaman beranda pada perangkat seluler.

    Catatan

    Tindakan ini mengunduh halaman portal yang telah diaktifkan untuk penelusuran offline. Proses ini mungkin sedikit lama, tergantung pada bandwidth jaringan dan ukuran halaman yang dipilih untuk penelusuran offline.

  3. Aktifkan mode offline di perangkat seluler Anda.

  4. Buka portal Anda dari layar Beranda. Anda akan melihat notifikasi di bagian atas yang mengingatkan Anda bahwa Anda menjelajah dalam mode offline. Jika Anda memilih halaman apa pun yang tidak diaktifkan untuk penjelajahan offline, pesan offline akan muncul.

    Halaman hanya baca dalam mode offline untuk aplikasi PWA.Tidak tersambung ke halaman internet di aplikasi PWA.

Distribusikan aplikasi Anda

Anda dapat mendistribusikan aplikasi dengan menggunakan browser atau melalui toko aplikasi.

Distribusikan aplikasi Anda dengan menggunakan browser

Setelah portal diaktifkan sebagai PWA, pengguna Anda dapat menyematkan situs Power Pages sebagai aplikasi ke layar awal pada perangkat mereka. Opsi ini didukung di semua platform (Android, iOS, Chromebook, dan Windows) selain semua faktor bentuk (seluler, desktop, dan tablet).

Grafik berikut mengilustrasikan pengalaman pengguna menambahkan portal ke layar beranda dengan menggunakan browser yang menginstal portal sebagai PWA.

Urutan gambar, gambar pertama menunjukkan portal terbuka di browser pada perangkat seluler. Gambar berikutnya menunjukkan perintah menu Tambahkan ke layar Beranda. Pada gambar berikutnya, pengguna diminta untuk menginstal aplikasi. Gambar terakhir menunjukkan aplikasi dengan latar belakang dan branding khususnya, beroperasi sebagai aplikasi seluler asli.

Android dan iOS masing-masing menawarkan metode yang berbeda untuk instalasi berbasis browser.

Distribusikan aplikasi Anda melalui bursa aplikasi

Aplikasi web progresif juga dapat didistribusikan melalui toko aplikasi untuk Android,, iOS dan Windows. Distribusi ini dilakukan dengan membuat paket aplikasi dan menerbitkan aplikasi ke toko aplikasi masing-masing. Untuk membuat paket aplikasi, kami bermitra dengan PWABuilder, yang menyediakan platform untuk menghasilkan paket aplikasi untuk berbagai toko aplikasi.

Untuk membuat paket aplikasi, buka Menyiapkan ruang kerja di studio desain. Dalam Paket aplikasi, pilih Buat paket aplikasi.

Membuka PWA Builder untuk membuat paket aplikasi di portal Studio.

Ini membawa Anda ke situs web PWA Builder di mana Anda dapat membuat paket aplikasi untuk berbagai toko aplikasi. Paket yang Anda buat dengan menggunakan Pembuat PWA berisi:

  • Paket aplikasi untuk PWA untuk digunakan di bursa aplikasi masing-masing.

  • Dokumen langkah demi langkah tentang cara mempublikasikan aplikasi.

Untuk rincian lebih lanjut, buka pusat sumber daya PWA.

Untuk iOS, PWABuilder menyediakan dukungan untuk membuat paket toko aplikasi. Untuk informasi lebih lanjut, lihat paket untuk App Store.

Untuk Windows, lihat paket untuk Microsoft Store.

Pertimbangan lain untuk Android

Untuk Android platform, Anda juga dapat memperbarui Android sertifikat dengan opsi Perbarui Android sertifikat .

Item menu di portal Studio untuk memperbarui sertifikat Android.

Perbarui judul dan SHA-256 sertifikat untuk memperbarui file tautan aset digital (assetlinks.json) yang membuktikan kepemilikan PWA Anda.

Memperbarui rincian sertifikat Android.

Baca juga

Ringkasan situs sebagai aplikasi
web progresif Gambaran Umum Aplikasi Web Progresif (PWA)
Membuat dan mendistribusikan aplikasi web progresif (video)