PWA: Progressive Web All-the-things

Paul Kinlan
Available in: English (Original) Deutsch Español Français 日本語 मानक हिन्दी русский язык tiếng Việt தமிழ்

PWA. Aplikasi Web Progresif. Frances Berriman dan Alex Russell menciptakan istilah “aplikasi web progresif” pada tahun 2015 dengan apa yang saya pikir adalah posting mani “Progresif Web Apps: Escaping Tabs Tanpa Kehilangan Jiwa Kita”.

3 tahun kemudian, kami telah melalui perjalanan panjang. Dari sekumpulan teknologi lepas - Pekerja Layanan, Manifes, Tambah ke Homescreen, Push Web - yang semula hanya diterapkan di satu mesin browser, hingga merek yang telah mulai melekat di industri dengan bisnis dan pengembang, dan semua yang utama vendor browser menerapkan mayoritas tumpukan ‘PWA’.

Kami sekarang punya app direktori, alat yang membantu kami memahami kira-kira berapa banyak PWA yang ada di alam liar, dan sejumlah studi kasus yang mengagumkan tentang manfaat dari PWA] (3). Tapi apa yang mendefinisikan PWA? Frances dan Alex memunculkan daftar sifat-sifat ini:

Responsive: to fit any form factor
Connectivity independent: Progressively-enhanced with Service Workers to let them work offline
App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions
Fresh: Transparently always up-to-date thanks to the Service Worker update process
Safe: Served via TLS (a Service Worker requirement) to prevent snooping
Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications
Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store
Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.

Yang penting, uraian ini menandai saat di mana kami semua sedikit lebih jelas tentang bagaimana kami ingin melihat web dan kami punya alat yang membantu kami memahami jika situs kami adalah ‘PWA’ atau tidak. Alex bahkan melangkah lebih jauh dan mendefinisikan beberapa aspek teknis yang membuat ‘PWA’ sebuah PWA.

Dengan hiperbola dari posting ini, mengapa tidak semua orang membangun hal-hal ini? Yah, itu bisa sulit. Sangat keras. Kami meminta pengembang dan bisnis untuk melakukan banyak hal. Dalam beberapa kasus yang berfokus pada AppShell dapat berupa arsitektur ulang lengkap dari sebuah situs, dalam kasus lain ‘AppShell’ bukanlah arsitektur yang benar. Dan dalam banyak kasus, nilai atau narasi tidak selalu jelas.

Saya cukup beruntung dapat berbicara langsung dengan bisnis dan pengembang tentang kekhawatiran mereka di web, khususnya hal-hal yang telah saya dengar bisnis dan pengembang katakan tentang PWA, adalah:

We’ve got our site… but we are also making a PWA.

— Many B2B sites we spoke (actually, I saw this a lot in India)

Menarik. Apakah mereka berbeda? Seringkali tidak, tapi PWA adalah ‘hal’ yang mereka dengar dan itu produk lain untuk diluncurkan. Mirip seperti situs m * adalah versi mobile dari situs desktop, PWA dapat menjadi hal lain yang harus mereka luncurkan.

I’ve got a PWA. It just does Push notifications.

— Too many people.

Wah. Itu bukan PWA, itu hanya menggunakan teknologi yang dimiliki oleh aplikasi asli.

I’m only building a blog… it’s not a PWA

— Many bloggers we spoke to.

Hmmm. Ini adalah kasus yang jelas bahwa kami belum dapat mengartikulasikan mengapa penting bagi situs konten untuk melakukan perpindahan.

I don’t care about making it installable.. I don’t need a Service Worker.

— Many publishers we spoke to.

Hah. Orang mengaitkan App dengan instal, dan pemikiran bahwa situs atau pengalaman harus bertindak seperti pemasangan Aplikasi akan membuat sebagian orang lepas dari konsep secara keseluruhan. Pada 2015 ada diskusi yang sangat menarik tentang wortel yang saya sarankan untuk Anda singkirkan.

I don’t need an app on desktop. I just need users to click ‘checkout’

— Many retailers we spoke to.

Baik. Itu sangat jelas. Nilai untuk pengguna atau bisnis tidak ada, dan itu cukup untuk menghentikan bisnis yang memprioritaskan sifat-sifat PWA.

Progressive Web Apps are just better sites.

— Many developers we speak to.

Sebenarnya saya mendengar ini banyak dari banyak pengembang web yang hebat.

Saya mendorong Anda untuk memeriksa tulisan-tulisan Jeremy Keith yang untuk sementara telah mendorong ‘PW’ di PWA untuk waktu yang lama dan dalam pembicaraan baru-baru ini mengatakan sesuatu yang serupa:

There’s a common misconception that making a Progressive Web App means creating a Single Page App with an app-shell architecture. But the truth is that literally any website can benefit from the performance boost that results from the combination of HTTPS + Service Worker + Web App Manifest.

— Jeremy Keith. “Any Site can be a Progressive Web App

Perasaan pribadi saya adalah bahwa setiap orang benar-benar terpaku pada A dalam PWA: ‘App’. Keberhasilan dan kegagalan merek konsep; ‘Aplikasi’ ada dalam nama, ‘Aplikasi’ ada dalam kesadaran banyak pengguna dan bisnis, jadi asosiasi cukup jelas.

Agar benar-benar jelas, saya dan banyak orang lain di seluruh tim kami mendorong keras istilah ‘Aplikasi’ dalam konteks PWA, khususnya dalam kaitannya dengan bersaing dengan pengalaman asli Mobile. Andrew Betts ‘posting memiliki ringkasan yang baik terhadap posisi asli kami, dan sementara saya tidak berpikir kami salah, kami kehilangan kesempatan untuk membantu cerita yang lebih luas khususnya di sekitar faktor-faktor bentuk yang tidak begitu berorientasi pada seluler .

Saya sering bertanya kepada pemirsa ini ketika kami berbicara tentang Toko Web Chrome. Apakah Gmail merupakan aplikasi atau situs? Aplikasi, itu Mudah. Apakah Twitter merupakan aplikasi atau situs? Aplikasi .. apakah itu? Jika saya hanya membaca konten, itu masih terasa seperti situs web. Apakah Wikipedia adalah sebuah aplikasi atau situs? Sebuah situs, tentu saja; apakah itu? Sebagai editor, itu terasa seperti alat.

Pada akhirnya, saya pikir itu tidak terlalu penting jika situs adalah aplikasi atau aplikasi adalah sebuah situs. Orang dapat dan memang membuat segala sesuatu di web: ‘aplikasi’, game, kumparan VR, toko ritel atau hanya ‘situs’ tradisional, dan itu bisa untuk kasus penggunaan tertentu - media, hiburan, penerbitan, utilitas, perdagangan …

Jika Anda mengesampingkan definisi asli PWA, dengan pengecualian ‘installability’ (lihat ‘bag of carrots’), saya tidak berpikir ada yang bisa membantah bahwa jika pengembang meningkatkan situs mereka di salah satu poin yang direferensikan Alex pengguna mendapatkan pengalaman yang lebih baik, dan ketika pengguna mendapatkan pengalaman yang lebih baik, mereka menghargai web semakin banyak orang yang memiliki keterlibatan yang berarti dengan web dan tetap menggunakan web. Jadi bagaimana kita bisa menerapkan narasi PWA dengan cara yang setiap bisnis dan pengembang tahu apa yang harus mereka fokuskan?


Saya telah memikirkan pivot kecil berdasarkan tantangan yang kami lihat di industri, dan saya sudah mencoba memprioritaskan pentingnya di mana pengembang dan bisnis dapat memfokuskan upaya mereka. (Catatan: Saya mungkin menyalurkan BizKin)

Kami ingin bisnis dan pengembang sukses dengan memanfaatkan kemampuan unik web yang memungkinkan mereka untuk: Menjangkau sebagian besar pengguna mereka dengan mengklik tombol; Pertahankan pengguna mereka dengan menghadirkan pengalaman terbaik mereka di perangkat dengan satu set kode; dan untuk terlibat secara berarti dengan pengguna mereka dengan membangun hubungan langsung dan memiliki dengan mereka.

Saya sudah mencoba mengartikulasikan ini sebagai seperangkat prinsip yang harus dirasakan pengguna saat menggunakan web. Pengalaman Anda seharusnya: DITEMUKAN, AMAN, CEPAT, HALUS, DAPAT DIANDALKAN, BERARTI

Jadikan Dapat Ditemukan: Memungkinkan pengguna menemukan pengalaman Anda. Web terbuat dari tautan dan halaman. Idealnya setiap halaman dan negara harus memiliki tautan dalam sehingga siapa pun dapat dikirim ke situs mana pun, baik itu agregator, pesan, email, atau papan iklan. Konten harus disajikan sehingga perender apa pun dapat membacanya.

Jadikan Aman: Pengguna dan pemilik konten dapat mempercayai pengalaman yang dibangun di web, melindungi identitas, kerahasiaan, dan integritas data.

Jadikan Cepat: Setelah pengguna memiliki tautan ke situs Anda, maka pada saat mereka mengetuknya, mereka berada dalam pengalaman Anda dan dapat mulai menggunakannya terlepas dari jaringan atau perangkat yang dimiliki pengguna.

Jadikan Halus: Ketika pengguna berada di situs Anda, pengalaman tersebut responsif dan interaktif untuk semua gerakan pengguna. Animasi terasa halus dan tajam, umpan balik instan, menggulir lembut, navigasi instan. Idealnya jika Anda memikirkan kinerja web dalam hal RAIL, Anda berfokus pada ‘RAI’.

Jadikan Itu Dapat Dipercaya: Pengguna situs Anda merasakan beberapa gangguan mungkin saat dihadapkan dengan jaringan atau perangkat yang tidak dapat diandalkan. Pengalaman harus berfungsi dan responsif di mana pun pengguna berada.

Jadikan itu Bermakna: Anda harus memberikan nilai dan memenuhi kebutuhan pengguna Anda melalui pengalaman berkualitas tinggi yang memberikan nilai. Ini bisa tampak cukup mengembang, tetapi Dion Almaer menggambarkannya dengan baik. Fokusnya adalah benar-benar tentang situs Anda yang memenuhi kebutuhan pengguna, baik itu hiburan, menghaluskan pembelian, kemajuan pengetahuan atau penyelesaian tugas yang cepat. Ini semua tentang UX.

Pengalaman modern yang memenuhi tujuan utama ini ** cepat, andal, aman, dan lancar **. Ini menjadi semakin lebih ** mampu ** menggunakan API modern dan sangat ** ditemukan ** dengan memanfaatkan jangkauan web terbuka dan inti dari itu. PWA secara alamiah harus memenuhi masing-masing “tujuan prinsip” ini berdasarkan harapan pengguna dan terus membangun pengalaman karena semakin banyak teknologi dan kemampuan yang masuk. Namun demikian seharusnya pengalaman modern di web saat ini ….

Aplikasi Web Progresif - Web Progresif Semua-hal.

Di sinilah saya ingin mendorong PWA selama tahun depan. Apa yang kamu pikirkan?

Terima kasih kepada Harleen Batra.

{{ }}

{{ }}

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium