Awesome PWA (Progressive Web Apps)

mantaps, ini course dari Google, ngebahas basic-basic implementasi dan teori-teori dibelakangnya [link]https://www.youtube.com/playlist?list=PLNYkxOF6rcIAdnzEsWkg0KpMn2WJwMBmN [/link]

Buat yang mau ngetest-ngetest apa aja "syarat-syarat" PWA dan apakah kita udah lolos atau udah berapa persen implementasinya di website masing-masing bisa pake tool lighthouse extensi chrome, ada detailnya nanti apa aja yang bisa diimprove https://github.com/GoogleChrome/lighthouse

Siip. Agak susah soalnya gan cari referensi yg bagus. Masih baru soalny. Kalo bisa sekolahkoding kita udah duluan ngumpulin infonya. :)

ini contoh PWA yang lebih komplek dengan save video supaya berjalan di offline dan dengan library media player dari google, ya itu Shaka Player

https://github.com/googlechrome/sample-media-pwa

Sudah mas bro ganteng. Awal saya mengenal PWA dari sini https://www.polymer-project.org/

@ardyhim mantap gan @wandifrog ga ada url yg lebih spesifik ke materi pwa gan? Itukan ke situs polymer halaman depan

Ini tambahan gan. Utk ngeliat contoh2 web yg sudah pwa

[link]https://outweb.io[/link] https://pwa.rocks

Btw, web aliexpress sama babe udah duluan pwa tuh

Sori, agak oot dikit. Bang hilman, tombol pilih jadi jawaban terbaik kalo di hp agak ganggu dikit bang, suka kepencet waktu di scroll. Mungkin minimal ada konfirmasi ya atau tidak aja bang, kalo ga geser kemana gitu. Hehehe

kemaren coba2 mau pake polymer, sygnya error melulu di laptop.. jadi belum bisa lanjutkan...

@QaiserLab setuju nggak kalo apache cordova juga disebut termasuk contoh dari project2 pwa yang ada?

Ikut nyimak, mantep bang @QaiserLab info-nya ^^ b

@panjidia995

setau sy sih, PWA jalan seperti web biasa gan

begitu web tersebut dibuka (misal di hp android), sekitar beberapa detik kemudian dia nginstall nawarin masang icon-nya ke desktop. kalau kita pilih ya, nanti di desktop kita ada icon untuk launch web tersebut layaknya launcher aplikasi native. begitu dibuka lewat icon launcher tadi tampil fullscreen seperti aplikasi native.

jadi secara umum yg sy lihat sih, dia berbentuk web biasa tapi user experience dan kemampuannya sama seperti aplikasi native gan.

tapi sy denger2 juga ionic (berbasis cordova) mau ngadopsi PWA juga. Jadi sy belum tau nih batasan PWA itu sampai dimana. Apakah aplikasi yg di build pakai cordova dapat digolongkan termasuk PWA juga atau tidak. Mungkin di aplikasi yg dibuild dengan cordova juga kita bisa nerapin service workers, namun bentuknya bukan benar2 web yg diletakan resourcenya keseleruhan di server kan.

Nih bro @QaiserLab ada fresh tutorial bikin PWA pake vue + webpack + material design

https://blog.sicara.com/a-progressive-web-application-with-vue-js-webpack-material-design-part-3-service-workers-offline-ed3184264fd1

Ente kan demen ama vuejs, kali aja pingin nyobain. Kalo sukses gua mau coba juga :D

Kak editor construct 3 itu juga apa sejenis PWA ?

Dear Coders,

Herewith I declared that We Code Competition 2017 Kuala Lumpur already

set on November until december 2017.

All information and registration info about that can be contacted by me.

Many Thanks,

Panny Ricky, S.T

Business & Development

PT eduspec Indonesia

081213146461

mungkin kurang tepat kalau cordova itu termasuk PWA. iya ionic sudah ada PWA, bisa di lihat di file manifest.json sama service-worker.js http://blog.ionic.io/announcing-pwa-support-in-ionic-2/

@rachmatsasongko ya gan, nty kalo lagi senggang :D

@wongselent

ini sih gan persyaratannya kalau menurut google: https://developers.google.com/web/updates/2015/12/getting-started-pwa

Progressive Web Apps are:

1. Progressive Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenant.

2. Responsive Fit any form factor, desktop, mobile, tablet, or whatever is next.

3. Connectivity independent Enhanced with service workers to work offline or on low quality networks.

4. App-like Use the app shell model to provide app-style navigations and interactions.

5. Fresh Always up-to-date thanks to the service worker update process.

6. Safe Served via TLS to prevent snooping and ensure content hasn’t been tampered with.

7. Discoverable Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.

8. Re-engageable Make re-engagement easy through features like push notifications.

9. Installable Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

10. Linkable Easily share via URL and not require complex installation.

perhatikan syarat nomor 3, mungkin saja banyak aplikasi web yg UX nya mirip aplikasi desktop. tapi belum tentu koneksi independen, alias kalo koneksi internet diputus si aplikasi musti bisa tetap jalan. Jadi kalau mw agan cek aplikasi construct 3 termasuk PWA apa ngga, coba berdasar syarat-syarat diatas saja.

Syarat nomor 7 juga menarik, dengan begini mungkin SSR di dalam aplikasi SPA bisa digantikan cukup dengan service workers, ga perlu terlalu mikirin lagi gmana supaya google search engine bisa menangkap konten aplikasi berbasis SPA, karena google search engine akan dapat membaca kontennya (mungkin melalui w3c manifests dan service workers)

@ardyhim

iya gan agak bingung juga aplikasi yg dibuild cordova PWA atau bukan. soalnya sy pernah denger konsep bahwa dengan adanya PWA maka ga perlu lagi ngebuild aplikasinya jadi apk android ataupun jadi aplikasi ios. Karena cukup dengan 1 web itu saja, seharusnya udah menuhi kebutuhan utk berjalan di android, ios maupun desktop (windows, linux, mac) dengan kemampuan yg sama seperti aplikasi nativenya masing-masing OS.

@ardyhim @QaiserLab

Setuju sih kurang tepat cordova dianggap sebagai project yg pwa able, dulu sering build applikasi pake cordova, dan tampilannya memang seperti web dan dia berjalan seperti app native, dan kalo merujuk ke 10 persyaratan itu ternyata nggak semua terpenuhi kalo kita menggunakan cordova. Cuman dari cordova sendiri kalo dibaca2 lagi persyaratan itu bisa terpenuhi dengan penambahan plugin2 lain yang mendukung.

Ada tanggapan lain nggak? thanks

sebenernya PWA ini kan alternativ aplikasi, salah satunya biar user ngga perlu nginstall2 app lagi sementara cordova ini kita bikin aplikasi walaupun hybrid. Jadi secara undang-undang beda sebenernya :P #CMIIW

Barusan buka web Sekolahkoding ternyata udah implementasikan Pwa ya.. nice.. Di tunggu tutorial nya mas hilman.. :)

belum mas @arepsv , cuman ngetest feturenya aja, masih belajar masalah caching yang paling efektifnya, nanti akan dishare kalo udah paham

udah nyoba app manifest bang hilman?

https://developer.mozilla.org/en-US/docs/Web/Manifest

biar nyiptain icon launcher. di chrome android udah support tuh

iyap, udah bisa dicoba, kalo main web sekolahkoding kuranglebih 2x5 menit, bakal muncul popupnya

mantaapp bang hilman.. di tunggu tutor nya :V

@hilmanrdn @QaiserLab

wah terimakasih sudah dijelasin dan makin paham :D (y)