Nilalaman
- Ang pag-akyat ng PWAs
- Ang mga PWA na kumikilos ngayon
- Pag-install
- Offline at agarang paglunsad
- Karanasan sa unang klase
- Mga tindahan ng app
- Pagsasama sa platform
- Mga hamon sa disenyo at UX
- Ang taon ng PWAs
Tulad ng pagtugon ng disenyo ng web na nagsara ng agwat sa pagitan ng mga desktop at mobile site ilang taon na ang nakakalipas, ang mga progresibong diskarte sa web app ay kasalukuyang nagsasara ng puwang sa pagitan ng web at mundo ng app. Sa mga karanasan ng gumagamit mula sa desktop hanggang sa mga mobile app na mabilis na nagko-convert, tila na parang isang mas masinop, mas mahusay na internet ay umuusbong - kahit na hindi maiwasang walang ilang mga makabuluhang pagbabago sa pinagbabatayan nitong genetic code.
- Paano bumuo ng isang Progressive Web App
Malinaw na mayroong ilang mga makabuluhang pumipiling presyon na hinihimok ito. Una sa lahat, ang paglikha ng mga katutubong app para sa bawat angkop na lugar ay hindi kinakailangang isang mahusay na paggamit ng mga mapagkukunan: ang mga gumagamit ay nagtapos sa daan-daang malalaking apps na nasasayang ang bandwidth at mahalagang disk space at ang mga kumpanya ay gumastos ng malaking pera sa paglikha ng mga app lamang para sa kanila na iwan. pagkatapos ng kanilang unang bersyon. At ang karamihan sa mga app na ito ay hinihimok lamang ng nilalaman ng web: impormasyon na nagmumula sa mga serbisyo sa web o isang sistema ng pamamahala ng nilalaman.
Ang kahulugan ng isang progresibong web app ay hindi kongkreto. Ang PWA ay isang web app lamang na gumagamit ng maraming mga bagong API at kakayahan sa web platform na gumagamit ng progresibong pagpapahusay upang mag-alok ng isang mala-app na karanasan sa bawat platform na may parehong base ng code. Ito ay higit pa sa isang hanay ng mga pinakamahusay na kasanayan at paggamit ng API na lumilikha ng mahusay na karanasan na tulad ng app para sa iyong mga gumagamit, kaya't hindi ito tulad ng mayroon ka o walang PWA; mas katulad sa iyong site na higit pa o mas mababa sa PWA.
Magsisimula ka na bang magtayo ng isang bagong site? Subukang gumamit ng isang tagabuo ng website. At tiyaking nakukuha mo ang suporta na kailangan mo mula sa isang disenteng serbisyo sa web hosting. O para sa isang bagay na bahagyang naiiba, tingnan ang aming gabay sa pinakamahusay na cloud storage.
Ang pag-akyat ng PWAs
Habang ang pangalang PWA ay nilikha noong 2015 sa artikulong Escaping Tabs Nang Hindi Nawawala ang aming Kaluluwa ni Alex Russell na nagtatrabaho sa Google para sa koponan ng Chrome, ang kanilang paglalakbay ay hindi talaga nagsimula doon. Dati mayroon kaming Mga Aplikasyon ng HTML (HTAs), na nilikha ng Microsoft noong 1999, kasama ang maraming iba pang mga platform ng web app mula sa Nokia, BlackBerry at iba pang mga kumpanya. Pagkatapos, noong 2007, ipinakita ni Steve Jobs kung ano ang nasa oras na tanging paraan upang lumikha ng mga app para sa orihinal na iPhone: PWAs, kahit na may ibang pangalan. Nagsimula roon ang Chrome, pinagbuti ang mga API makalipas ang ilang taon at naimbento ang pangalan ng PWA.
Sa napakaraming mga nakaraang karanasan na nabigo na sinusubukan na magdala ng nilalaman ng web sa mundo ng mga app, bakit sa palagay namin gagana ito ngayon? Pangunahin, nasa mga kumpanya na nagtatrabaho ngayon at nagtataguyod ng mga teknolohiya sa likod ng mga PWA, tulad ng Microsoft, Google, Apple at Mozilla, upang pangalanan ngunit iilan. Gayundin, ang pagganap ng web platform ay umabot sa isang punto kung saan walang pinaghihinalaang pagkakaiba kapag inihambing mo ang isang mahusay na dinisenyo na PWA sa isang katutubong app. Ang mga kundisyong iyon ay hindi pa umiiral noon at iyon ang isang kadahilanan na nagpasya ang komunidad ng web na ang oras ay dumating para sa mga PWA.
Ang mga PWA na kumikilos ngayon
Ngayon ang mga PWA ay ganap na gumagana at mai-install sa:
- Android na may karamihan sa mga browser, na may Chrome na nag-aalok ng pinakamahusay na karanasan
- iOS na may Safari
- Mga Chromebook
- Ang Windows 10 mula sa Microsoft Store
- Ang mga tampok na telepono na may KaiOS - isang tinidor mula sa Firefox OS - kasalukuyang magagamit para sa milyon-milyong mga gumagamit higit sa lahat sa India
Darating din ang suporta sa macOS, Windows at Linux sa pamamagitan ng Chrome sa huling bahagi ng taong ito. Magagamit ito ngayon bilang isang pang-eksperimentong watawat na 'Desktop PWA' kung nais mong subukan ito ngayon. Ang pag-install sa Windows sa Edge nang walang paggamit ng tindahan ay darating din sa paglaon, kahit na walang natukoy na tukoy na time frame.
Kung binasa mo ulit ang listahan, maaari mong makita ang bawat platform na mayroon o malapit nang magkaroon ng suporta para sa ganap na mai-install na PWAs sa mga susunod na buwan. At dahil ang isang PWA ay isang website lamang na may mga tampok sa itaas na isasaaktibo sa mga katugmang browser lamang, masasabi nating tugma ito sa lahat ng mga browser mula sa pangunahing pagpapaandar nito.
Gayundin, ang mga PWA ay kasalukuyang nabubuo mula sa karamihan ng mga CLI para sa iba't ibang mga balangkas, kasama ang Angular 6+ CLI, React Lumikha ng App, PWA Starter Kit mula sa Polymer at Preact CLI. Sa wakas, ang koponan ng Ionic Framework ay may ideya ng Capacitor, isang bukas na mapagkukunan na kapalit ng Cordova na ginagawang posible ang mga katutubong PWA sa bawat store ng app.
Pag-install
Ang isa sa mga kritikal na aspeto ng isang PWA ay ang pag-install ng app. Ginagawa ang prosesong ito sa dalawang opsyonal na hakbang: ang pag-download at offline na imbakan ng mga file ng app at pag-install ng icon sa OS. Dahil ang parehong mga hakbang ay opsyonal, maaari kang mag-alok ng isang offline na karanasan sa browser o maaari kang mag-alok ng isang icon nang walang offline na pag-install. Ngunit ang isang tunay na PWA ay dapat na may kasamang pareho: dapat itong ihatid sa TLS sa ilalim ng HTTPS at magpapasya ang gumagamit kung gagamitin nila ito sa browser o sa loob ng mismong naka-install na icon.
Offline at agarang paglunsad
Ang utak ng isang PWA ay ang manggagawa sa serbisyo, isang file na JavaScript na naka-install sa aparato ng gumagamit na responsable sa pag-download ng mga file ng app, na itinatago ang mga ito sa isang cache at pagkatapos ay naghahatid sa kanila kung kinakailangan. Kapag na-install ang service worker, kumikilos ito tulad ng isang network proxy para sa bawat mapagkukunan na kailangan ng web app: maaari itong magpasya na kunin ito mula sa network o ihatid ito mula sa lokal na cache, na ginagawang magagamit ang app na offline at magagamit din sa lamang isang pares ng milliseconds kahit na ang gumagamit ay may koneksyon, gumagaya sa isang paglunsad ng katutubong app.
Upang mai-install ang isang manggagawa sa serbisyo, kakailanganin na isama ng iyong dokumento sa HTML ang isang bagay tulad ng:
kung ('serviceWorker' sa navigator) navigator.serviceWorker.register ("sw.js");
I-install nito ang file na "sw.js" sa mga aparato ng mga gumagamit para sa kasalukuyang folder sa kasalukuyang domain - isang konsepto na kilala bilang saklaw. Matapos itong mai-install, ang mga susunod na pagbisita sa anumang URL sa loob ng saklaw nito ay pamahalaan ng manggagawa sa serbisyo na iyon.
Sabihin nating mayroon tayong PWA na may apat na mga file: index.html, app.js, app.css at logo.png. Ang unang bagay ay i-install ang mga file na iyon sa cache sa sw.js file.
const mapagkukunan = ["index.html", "app.js", "app.css", "logo.png"]; sarili addEventListener ("install", event => {event. waitUntil (cache.open ("myPWAcache") .tapos (cache => cache.addAll (mapagkukunan));});
Pagkatapos para sa PWA na laging maihatid mula sa cache, kailangan naming makinig para sa kaganapan ng pagkuha sa loob ng service worker at magpasya ang patakaran sa cache na gagamitin, tulad ng cache muna sa sumusunod na snippet.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). pagkatapos (res => res);
Sa kasong ito, sa tuwing mai-access ng gumagamit ang PWA (kapwa mula sa isang browser o mula sa isang naka-install na icon), makukuha ng engine ang mga file mula sa cache. Ang isang kalamangan sa mga PWA kumpara sa mga katutubong app ay hindi kailangang i-download muli ng mga aparato ang lahat ng mga file kapag may pagbabago, ang file lamang na nagbago gamit ang isang transparent na proseso. Gayundin, maaari pa rin kaming mag-download ng mga bahagi ng app kapag hiniling.
Ngunit ang hamon ay paano mo malalaman kung aling mga file ang na-update sa server upang mapalitan mo sila sa cache? Kung hindi mo nais na sumulat ng isang mababang antas ng manggagawa sa serbisyo upang pamahalaan ito, maaari mong gamitin ang open-source na library ng Workbox, na makakatulong sa iyo sa pagbuo ng manggagawa sa serbisyo at paghahayag ng mga mapagkukunan upang ma-update ang naka-install na pakete.
Magkaroon ng kamalayan na ang mga file ng iyong PWA ay tatanggalin kung mayroong presyon ng imbakan sa aparato, maliban kung humiling ka ng Persistent Storage kung magagamit:
kung ('imbakan' sa navigator && 'magpumilit' sa navigator.storage) navigator.storage.persist ();
Sa Chrome at karamihan sa mga browser ng Android, hindi makagamit ang iyong app ng higit sa limang porsyento ng magagamit na puwang; sa iOS 50MiB (malapit sa 50MB) bawat host lamang; sa Edge ay variable ito ayon sa kabuuang laki ng memorya at sa Windows Store, ito ay walang limitasyong.
Karanasan sa unang klase
Mayroon kaming utak at oras na ngayon para sa puso: mahayag ang web app. Ang layunin ng paggawa ng isang website sa isang PWA ay hindi lamang upang matiyak na ito ay mabilis na magagamit o habang offline ngunit upang paganahin ito upang magkaroon ng sarili nitong icon sa OS at mag-alok ng isang ganap na nakapag-iisang karanasan tulad ng anumang iba pang naka-install na app.
Ang manifest ay isang JSON file na tumutukoy sa metadata para sa PWA na ginamit ng isang browser o isang app store upang matukoy ang pag-uugali sa pag-install.
Tinutukoy ng file ang maraming mga katangian bilang metadata para sa iyong PWA. Basahin ng bawat OS ang mga katangiang ito at susubukan ang makakaya upang maitugma ang karanasan na gusto mo. Halimbawa, babasahin ng Android ang 'display: standalone' at lilikha ng isang normal na karanasan sa app. Gamit ang 'display: minimal-ui' lilikha ito ng isang karanasan sa isang nakikitang URL at sertipiko ng TLS - kapaki-pakinabang para sa mga apps na sensitibo sa seguridad. Gamit ang 'display: fullscreen' lumilikha ito ng ganap na nakaka-engganyong mga app nang walang status bar o nakikitang back button. Tinutukoy ng isang hanay ng mga icon at kulay kung paano hahanapin ng mga splash screen o mga title bar ang window ng iyong app.
Mayroong ilang mga manifest generator, tulad ng Web App Manifest Generator o PWA Builder na magpapalaki rin sa laki para sa iyo sa iba't ibang mga resolusyon kung magbigay ka ng isang mataas na resolusyon (minimum na 512 na mga pixel).
Kapag mayroon ka ng manifest file na naka-link sa iyong dokumento sa HTML, mai-install ng mga gumagamit ang app gamit ang iba't ibang mga diskarte depende sa browser, karaniwang tinatawag na Idagdag sa Home Screen, I-install o Idagdag lang. Kung ang iyong PWA ay ma-crawl ng Bing, awtomatikong idaragdag ito ng Microsoft sa Microsoft Store kaya't mai-install ito ng mga gumagamit ng Windows 10 mula doon.
Sa ilang mga operating system, ang iyong PWA ay may kakayahang makuha ang mga link. Nangangahulugan ito na pagkatapos mai-install ng gumagamit ang app, ang anumang URL sa loob ng saklaw ng iyong manifest ay bubuksan sa loob ng mga hangganan ng iyong app at hindi sa browser, hindi mahalaga kung lilitaw ito sa browser o iba pang mga app tulad ng WhatsApp, Facebook o isang email.
Kung pumasa ka sa mga kinakailangan sa PWA na tinutukoy namin dito, ang ilang mga platform ay mag-aalok ng badge ng ambient (isang maliit na icon na karaniwang nasa URL bar na tumutukoy na ang web ay mai-install) o isang banner ng web app. Kung gusto mo, maaari ka ring magdagdag ng iyong sariling pasadyang pindutang Mag-install gamit ang sumusunod na snippet:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // ay magpapakita ng pag-install na katutubong prompt})
Kung naka-install ang PWA, ang kaganapan na 'na-install' ay i-fired sa window object upang masubaybayan mo ang mga stats na nakikinig para dito.
Mga tindahan ng app
Isa sa mga pangunahing pakinabang ng pag-install mula sa isang browser ay ang pag-iwas sa proseso ng pag-apruba ng store-store o pagbabayad upang maging isang publisher. Dumarating iyon sa halatang mga pakinabang, tulad ng instant na pag-publish, paglikha ng mga pribadong app para sa mga kumpanya o app na hindi dapat tanggapin sa mga tindahan.
Ngunit ang ilang mga kumpanya ay nais na nasa tindahan. Hanggang ngayon, ang tanging tindahan na opisyal na tumatanggap ng PWAs ay ang Windows Store at ang kaiOS Store. Sa kasamaang palad, sa mga tool tulad ng Capacitor (kasalukuyang nasa Alpha) o PWA Builder, maaari kaming lumikha at mag-sign ng mga katutubong package para sa iba pang mga platform.
Mayroong ilang mga PWA na nai-publish sa Google Play Store, tulad ng Twitter Lite at Google Maps Go, na kasalukuyang nasa ilalim ng pasadyang pagpapatupad. Mag-aalok ang Chrome ng solusyon mula sa Chrome 68 sa pamamagitan ng mga pinagkakatiwalaang aktibidad sa web. Mula sa puntong iyon, makakalikha kami ng isang Android package (APK) na may launcher sa aming PWA at mai-upload ito sa tindahan. Para sa Microsoft Store sa Windows 10, ang site na PWA Builder ay kasalukuyang tumutulong sa pagbuo ng isang pakete ng APPX Windows 10. Gamit ang isang web view, maaari kang manu-manong lumikha ng isang iOS app para sa App Store ngunit maging maingat sa mga alituntunin ng store.
Pagsasama sa platform
Sa pamamagitan ng pagpapatupad ng mga progresibong diskarte sa pagpapahusay, magagawa mong gumamit ng maraming mga tampok, kabilang ang mga push notification, pag-access ng camera at mikropono, geolocation, sensor, pagbabayad, pagbabahagi ng mga dayalogo at offline na imbakan. Ang lahat ng mga tampok na ito ay direktang tumatakbo sa loob ng modelo ng seguridad ng browser, kabilang ang mga dayalogo sa pahintulot.
Maaari din kaming makipag-usap sa iba pang mga app sa pamamagitan ng mga scheme ng URI, tulad ng pagbubukas ng Twitter, YouTube o WhatsApp sa pamamagitan ng kanilang mga URL o pasadyang URI, tulad ng whatsapp: //.
Sa wakas, kapag lumilikha ng mga katutubong PWA na nai-publish sa tindahan gamit ang Capacitor o sa Microsoft Store, magagawa naming mag-tulay sa mga katutubong API na magbibigay-daan sa amin na magpatupad ng halos anumang katutubong code. Kasama sa pagsasama na iyon sa Windows 10 ang pag-access sa hardware ngunit kasama rin ang pagsasama sa OS, na nag-aalok ng mga pagpipilian tulad ng Pin to Start. Halimbawa, hinahayaan ka ng Twitter PWA na i-pin ang sinumang gumagamit sa iyong start screen.
Mga hamon sa disenyo at UX
Ang pagdidisenyo ng mga PWA ay may natatanging mga hamon, kaya mahalaga na gugugol ng ilang oras sa pagsasaliksik, pagsubok hangga't maaari at isasaalang-alang ang sumusunod:
- Inaasahan ng mga gumagamit ang mga karanasan na tulad ng app.
- Bago pa rin ang proseso ng pag-install, kaya kailangan naming gumawa ng labis na pagsisikap upang ipaliwanag kung paano i-install ang app.
- Ang pag-update ng app sa background nang walang pakikipag-ugnay ng gumagamit ay mahusay ngunit nagdaragdag din ito ng ilang mga hamon para sa UX.
- Sa desktop, ang tumutugong disenyo ng web ay tumatagal ng isang bagong hangganan dahil ang mga window ng PWA ay maaaring maliit, mas maliit kaysa sa isang mobile viewport. Nangangahulugan ito na kailangan naming lumikha ng mga tukoy na view o maliit na widget para sa format na ito, tulad ng nakikita sa Chrome OS ngayon.
- Ang mga push notification ay dapat na magdagdag ng halaga sa gumagamit lamang, kaya matutong magtanong sa tamang sandali at huwag sayangin ang pagkakataong magpadala ng mga mensahe na hindi kapaki-pakinabang o kawili-wili.
- Kailangan naming mag-disenyo para sa pagganap ng web at para sa offline na pag-access.
Ang taon ng PWAs
Sa pagdaragdag ng iOS at desktop sa taong ito, ang PWAs ay saanman ngayon. Ngunit kailangan nating tandaan na ang kanilang paglalakbay ay nagsisimula pa lamang, kaya asahan ang madalas na mga pagbabago at tiyaking panatilihing nai-update ang iyong sarili sa pinakabagong mga diskarte at ideya upang maihatid ang isang mahusay na karanasan ng gumagamit habang umuusbong ang platform.
Ang artikulong ito ay orihinal na na-publish sa isyu 308 ng neto, ang pinakamabentang magazine sa buong mundo para sa mga web designer at developer. Bilhin ang isyu 308 dito o mag-subscribe dito.
