PWAs: ຍິນດີຕ້ອນຮັບການປະຕິວັດມືຖື

ເນື້ອຫາ

• ຈຸດປະສົງຂອງ PWAs
• PWAs ໃນການປະຕິບັດງານໃນມື້ນີ້
• ການຕິດຕັ້ງ
• ອອບໄລແລະເປີດຕົວທັນທີ
• ປະສົບການໃນຊັ້ນ ໜຶ່ງ
• ຮ້ານແອັບ
• ການເຊື່ອມໂຍງເວທີ
• ການອອກແບບແລະສິ່ງທ້າທາຍ UX
• ປີຂອງ PWAs

ຄືກັນກັບການອອກແບບເວັບທີ່ຕອບສະ ໜອງ ໄດ້ປິດຊ່ອງຫວ່າງລະຫວ່າງ desktop ແລະເວັບໄຊທ໌ເທິງມືຖືເມື່ອສອງສາມປີກ່ອນ, ເຕັກນິກການໃຊ້ web ທີ່ກ້າວ ໜ້າ ກໍ່ ກຳ ລັງປິດຊ່ອງຫວ່າງລະຫວ່າງເວັບແລະໂລກ app ຢູ່. ດ້ວຍປະສົບການຂອງຜູ້ໃຊ້ຕັ້ງແຕ່ desktop ຈົນເຖິງໂປແກຼມມືຖືທີ່ປ່ຽນເປັນຢ່າງໄວວາ, ມັນເບິ່ງຄືວ່າເປັນມືດມົວ, ອິນເຕີເນັດທີ່ມີປະສິດທິພາບຫຼາຍ ກຳ ລັງວິວັດທະນາການ - ເຖິງແມ່ນວ່າແນ່ນອນບໍ່ໄດ້ໂດຍບໍ່ມີການປ່ຽນແປງທີ່ ສຳ ຄັນຕໍ່ລະຫັດພັນທຸ ກຳ ຂອງມັນ.

• ວິທີການສ້າງໂປແກຼມ Progressive Web App

ປາກົດຂື້ນວ່າມີຄວາມກົດດັນທີ່ມີການເລືອກຫລາຍທີ່ ສຳ ຄັນໃນການຂັບເຄື່ອນສິ່ງນີ້. ກ່ອນອື່ນ ໝົດ, ການສ້າງແອັບ native ພື້ນເມືອງ ສຳ ລັບທຸກໆ niche ບໍ່ ຈຳ ເປັນຕ້ອງມີການ ນຳ ໃຊ້ຊັບພະຍາກອນທີ່ມີປະສິດທິພາບ: ຜູ້ຊົມໃຊ້ສິ້ນສຸດລົງດ້ວຍໂປແກຼມໃຫຍ່ຫລາຍຮ້ອຍແຫ່ງທີ່ສູນເສຍແບນວິດແລະພື້ນທີ່ດິດທີ່ມີຄ່າແລະບໍລິສັດໃຊ້ເງິນຢ່າງຫລວງຫລາຍເພື່ອສ້າງແອັບ apps ພຽງແຕ່ໃຫ້ພວກເຂົາຖືກປະຖິ້ມ ຫຼັງຈາກລຸ້ນ ທຳ ອິດຂອງພວກເຂົາ. ແລະສ່ວນໃຫຍ່ຂອງໂປແກຼມເຫຼົ່ານີ້ແມ່ນພຽງແຕ່ຖືກກະຕຸ້ນໂດຍເນື້ອຫາຂອງເວັບ: ຂໍ້ມູນທີ່ມາຈາກການບໍລິການເວັບຫຼືລະບົບການຄຸ້ມຄອງເນື້ອຫາ.

ຄໍານິຍາມຂອງແອັບ web ທີ່ມີຄວາມກ້າວ ໜ້າ ທາງເວັບບໍ່ແມ່ນຄວາມຈິງ. PWA ແມ່ນພຽງແຕ່ແອັບ is ເວັບທີ່ໃຊ້ APIs ໃໝ່ ແລະຄວາມສາມາດຫຼາຍຢ່າງໃນເວທີເວບໄຊທ໌ໂດຍໃຊ້ການປັບປຸງທີ່ກ້າວ ໜ້າ ເພື່ອສະ ເໜີ ປະສົບການທີ່ຄ້າຍຄືກັບແອັບ on ໃນທຸກໆແພລະຕະຟອມທີ່ມີລະຫັດດຽວກັນ. ມັນເປັນຊຸດຂອງການປະຕິບັດທີ່ດີທີ່ສຸດແລະການ ນຳ ໃຊ້ API ທີ່ສ້າງປະສົບການທີ່ຄ້າຍຄືກັບແອັບ for ທີ່ດີເລີດ ສຳ ລັບຜູ້ໃຊ້ຂອງທ່ານ, ສະນັ້ນມັນບໍ່ຄືກັບວ່າທ່ານມີຫລືບໍ່ມີ PWA; ມັນຄ້າຍຄືວ່າເວັບໄຊທ໌ຂອງເຈົ້າແມ່ນ PWA ຫຼາຍຫລື ໜ້ອຍ.

ທ່ານ ກຳ ລັງຈະເລີ່ມຕົ້ນສ້າງເວັບໄຊທ໌ ໃໝ່ ບໍ? ພະຍາຍາມໃຊ້ຜູ້ສ້າງເວັບໄຊທ໌້. ແລະໃຫ້ແນ່ໃຈວ່າທ່ານໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ທີ່ທ່ານຕ້ອງການຈາກບໍລິການໂຮດຕິ້ງທີ່ ເໝາະ ສົມເຊັ່ນກັນ. ຫຼື ສຳ ລັບບາງສິ່ງບາງຢ່າງທີ່ແຕກຕ່າງກັນເລັກ ໜ້ອຍ, ເບິ່ງຄູ່ມືຂອງພວກເຮົາກ່ຽວກັບການເກັບຮັກສາຟັງທີ່ດີທີ່ສຸດ.

ຈຸດປະສົງຂອງ PWAs

ໃນຂະນະທີ່ຊື່ PWA ຖືກສ້າງຂື້ນໃນປີ 2015 ໃນບົດຂຽນ Escaping Tabs ໂດຍບໍ່ມີການສູນເສຍຈິດວິນຍານຂອງພວກເຮົາໂດຍ Alex Russell ເຮັດວຽກຢູ່ Google ສຳ ລັບທີມງານ Chrome, ການເດີນທາງຂອງພວກເຂົາບໍ່ໄດ້ເລີ່ມຕົ້ນຕົວຈິງແລ້ວ. ພວກເຮົາເຄີຍມີໂປແກຼມ HTML Applications (HTAs), ເຊິ່ງຖືກສ້າງຂື້ນໂດຍ Microsoft ໃນປີ 1999, ພ້ອມດ້ວຍໂປແກຼມເວັບໂປແກຼມເວັບອື່ນໆຈາກ Nokia, BlackBerry ແລະບໍລິສັດອື່ນໆ. ຈາກນັ້ນ, ໃນປີ 2007, Steve Jobs ໄດ້ ນຳ ສະ ເໜີ ສິ່ງທີ່ຢູ່ໃນເວລານັ້ນແມ່ນວິທີດຽວທີ່ຈະສ້າງແອັບ for ສຳ ລັບ iPhone ຕົ້ນສະບັບ: PWAs, ເຊິ່ງມີຊື່ອື່ນ. Chrome ໄດ້ເລີ່ມຕົ້ນຈາກນັ້ນ, ປັບປຸງ APIs ສອງສາມປີຕໍ່ມາແລະໄດ້ປະດິດຊື່ PWA.

ດ້ວຍປະສົບການທີ່ລົ້ມເຫລວທີ່ຜ່ານມາຫຼາຍຢ່າງທີ່ພະຍາຍາມ ນຳ ເອົາເນື້ອຫາເວັບເຂົ້າມາໃຊ້ໃນໂລກຂອງແອັບ apps, ເປັນຫຍັງພວກເຮົາຄິດວ່າມັນຈະໃຊ້ໄດ້ໃນຕອນນີ້? ໂດຍພື້ນຖານແລ້ວ, ມັນແມ່ນ ສຳ ລັບບໍລິສັດທີ່ປະຈຸບັນເຮັດວຽກແລະສົ່ງເສີມເຕັກໂນໂລຢີທີ່ຢູ່ເບື້ອງຫລັງ PWA, ເຊັ່ນ Microsoft, Google, Apple ແລະ Mozilla, ເພື່ອຕັ້ງຊື່ແຕ່ສອງສາມຢ່າງ. ນອກຈາກນີ້, ການປະຕິບັດງານຂອງເວບໄຊທ໌ໄດ້ບັນລຸຈຸດທີ່ບໍ່ມີຄວາມແຕກຕ່າງໃນເວລາທີ່ທ່ານປຽບທຽບ PWA ທີ່ອອກແບບໄດ້ດີກັບແອັບ native ພື້ນເມືອງ. ເງື່ອນໄຂເຫຼົ່ານັ້ນບໍ່ເຄີຍມີມາກ່ອນແລະນັ້ນແມ່ນເຫດຜົນ ໜຶ່ງ ທີ່ຊຸມຊົນເວັບຕັດສິນໃຈວ່າເວລາ ສຳ ລັບ PWAs.

PWAs ໃນການປະຕິບັດງານໃນມື້ນີ້

ມື້ນີ້ PWAs ສາມາດເຮັດວຽກໄດ້ເຕັມທີ່ແລະຕິດຕັ້ງໄດ້ທີ່:

• Android ກັບໂປແກຼມທ່ອງເວັບສ່ວນໃຫຍ່, ດ້ວຍ Chrome ສະ ເໜີ ປະສົບການທີ່ດີທີ່ສຸດ
• iOS ກັບ Safari
• Chromebook
• Windows 10 ຈາກ Microsoft Store
• ໂທລະສັບທີ່ມີຄຸນລັກສະນະທີ່ມີ KaiOS - ຄວາມຍາວຂອງສ້ອມຈາກ Firefox OS - ປະຈຸບັນມີ ສຳ ລັບຜູ້ໃຊ້ຫລາຍລ້ານຄົນສ່ວນໃຫຍ່ແມ່ນຢູ່ປະເທດອິນເດຍ

ການສະ ໜັບ ສະ ໜູນ ກໍ່ ກຳ ລັງມາກັບ macOS, Windows ແລະ Linux ຜ່ານ Chrome ໃນທ້າຍປີນີ້. ມັນມີຢູ່ໃນມື້ນີ້ເປັນທຸງທົດລອງ 'Desktop PWA' ຖ້າທ່ານຕ້ອງການທົດລອງໃຊ້ດຽວນີ້. ການຕິດຕັ້ງເທິງ Windows ເທິງ Edge ໂດຍບໍ່ຕ້ອງໃຊ້ຮ້ານແມ່ນຈະມາໃນພາຍຫລັງເຊັ່ນດຽວກັນ, ເຖິງແມ່ນວ່າບໍ່ມີ ກຳ ນົດເວລາສະເພາະ.

ຖ້າທ່ານໄດ້ອ່ານຄືນບັນຊີລາຍຊື່, ທ່ານສາມາດເຫັນທຸກໆເວທີທີ່ມີຫລື ກຳ ລັງຈະມີການສະ ໜັບ ສະ ໜູນ ສຳ ລັບ PWA ທີ່ສາມາດຕິດຕັ້ງໄດ້ເຕັມໃນເດືອນຕໍ່ໄປ. ແລະເນື່ອງຈາກວ່າ PWA ແມ່ນພຽງແຕ່ເວບໄຊທ໌ທີ່ມີຄຸນລັກສະນະຕ່າງໆທີ່ຢູ່ເທິງສຸດເຊິ່ງຈະຖືກເປີດໃຊ້ໃນເບົາເຊີທີ່ເຂົ້າກັນໄດ້ເທົ່ານັ້ນ, ພວກເຮົາຍັງສາມາດເວົ້າໄດ້ວ່າມັນສາມາດໃຊ້ໄດ້ກັບ browser ທັງ ໝົດ ຈາກ ໜ້າ ທີ່ພື້ນຖານຂອງມັນ.

ພ້ອມນີ້, PWAs ປະຈຸບັນ ກຳ ລັງຜະລິດຈາກ CLIs ສ່ວນໃຫຍ່ ສຳ ລັບກອບທີ່ແຕກຕ່າງກັນ, ໃນນັ້ນມີ Angular 6+ CLI, React Create App, PWA Starter Kit ຈາກ Polymer ແລະ Preact CLI. ສຸດທ້າຍ, ທີມງານ Ionic Framework ໄດ້ເກີດແນວຄວາມຄິດຂອງ Capacitor, ການທົດແທນ Cordova ແບບເປີດທີ່ເຮັດໃຫ້ PWAs ພື້ນເມືອງມີຄວາມເປັນໄປໄດ້ໃນທຸກໆຮ້ານ app.

ການຕິດຕັ້ງ

ໜຶ່ງ ໃນແງ່ມຸມທີ່ ສຳ ຄັນຂອງ PWA ແມ່ນການຕິດຕັ້ງແອັບ.. ຂະບວນການນີ້ ດຳ ເນີນໄປໃນສອງຂັ້ນຕອນທີ່ເປັນທາງເລືອກ: ການດາວໂຫລດແລະການເກັບຂໍ້ມູນອອບໄລຂອງແອັບ app ແລະການຕິດຕັ້ງໄອຄອນໃນ OS. ເນື່ອງຈາກວ່າທັງສອງຂັ້ນຕອນແມ່ນທາງເລືອກ, ທ່ານສາມາດສະ ເໜີ ປະສົບການແບບອອບໄລນ໌ໃນເບົາເຊີຫຼືທ່ານສາມາດສະ ເໜີ ໄອຄອນໂດຍບໍ່ຕ້ອງຕິດຕັ້ງອອຟໄລ. ແຕ່ PWA ທີ່ແທ້ຈິງຄວນປະກອບມີທັງສອງ: ມັນຕ້ອງໄດ້ຮັບການບໍລິການກັບ TLS ພາຍໃຕ້ HTTPS ແລະຜູ້ໃຊ້ຈະຕັດສິນໃຈວ່າພວກເຂົາຈະໃຊ້ມັນຢູ່ໃນ browser ຫຼືຢູ່ພາຍໃນໄອຄອນທີ່ຕິດຕັ້ງຂອງຕົວເອງ.

ອອບໄລແລະເປີດຕົວທັນທີ

ສະ ໝອງ ຂອງ PWA ແມ່ນພະນັກງານບໍລິການ, ເອກະສານ JavaScript ຖືກຕິດຕັ້ງໄວ້ໃນອຸປະກອນຂອງຜູ້ໃຊ້ທີ່ຮັບຜິດຊອບໃນການດາວໂຫລດເອກະສານຂອງແອັບ app, ເກັບມັນໄວ້ໃນບ່ອນເກັບມ້ຽນແລະຕໍ່ມາໃຫ້ບໍລິການເມື່ອ ຈຳ ເປັນ. ເມື່ອພະນັກງານບໍລິການຖືກຕິດຕັ້ງ, ມັນເຮັດ ໜ້າ ທີ່ຄ້າຍຄືກັບໂປແກຼມເຄືອຂ່າຍ ສຳ ລັບທຸກໆຊັບພະຍາກອນທີ່ແອັບ needs web ຕ້ອງການ: ມັນສາມາດຕັດສິນໃຈທີ່ຈະດຶງເອົາມັນຈາກເຄືອຂ່າຍຫຼືສົ່ງມັນຈາກແຄດໃນທ້ອງຖິ່ນ, ເຊິ່ງເຮັດໃຫ້ແອັບ available ມີຢູ່ນອກແລະຍັງສາມາດໃຊ້ໄດ້ໃນເວລາດຽວກັນ ສອງສາມ milliseconds ເຖິງແມ່ນວ່າຜູ້ໃຊ້ຈະມີການເຊື່ອມຕໍ່, ເຮັດຕາມການເປີດຕົວ app native.

ເພື່ອຕິດຕັ້ງພະນັກງານບໍລິການ, ເອກະສານ HTML ຂອງທ່ານຈະຕ້ອງມີບາງສິ່ງບາງຢ່າງເຊັ່ນ:

ຖ້າ ('serviceWorker' ໃນຕົວທ່ອງເວັບ) navigator.serviceWorker.register ("sw.js");

ນັ້ນຈະຕິດຕັ້ງແຟ້ມ "sw.js" ໃສ່ໃນອຸປະກອນຂອງຜູ້ໃຊ້ ສຳ ລັບໂຟນເດີທີ່ຢູ່ໃນໂດເມນປັດຈຸບັນ - ແນວຄິດທີ່ຮູ້ກັນວ່າຂອບເຂດ. ຫຼັງຈາກມັນຖືກຕິດຕັ້ງແລ້ວ, ການເຂົ້າເບິ່ງ URL ຕໍ່ໄປໃນຂອບເຂດຂອງມັນຈະຖືກຈັດການໂດຍພະນັກງານບໍລິການນັ້ນ.

ໃຫ້ເວົ້າວ່າພວກເຮົາມີ PWA ທີ່ມີສີ່ເອກະສານ: index.html, app.js, app.css ແລະ logo.png. ສິ່ງ ທຳ ອິດແມ່ນການຕິດຕັ້ງເອກະສານເຫຼົ່ານັ້ນເຂົ້າໃນບ່ອນເກັບມ້ຽນທີ່ຢູ່ໃນແຟ້ມ sw.js.

const resources = ["index.html", "app.js", "app.css", "logo.png"]; ຕົນເອງ. addEventListener ("ຕິດຕັ້ງ", ເຫດການ => {ເຫດການ. waitUntil (caches.open ("myPWAcache")). ເສີມ (cache => cache.addAll (ຊັບພະຍາກອນ)));});

ຫຼັງຈາກນັ້ນ, ເພື່ອໃຫ້ PWA ໄດ້ຮັບການບໍລິການຈາກບ່ອນເກັບຂໍ້ມູນຢູ່ສະ ເໝີ, ພວກເຮົາຕ້ອງໄດ້ຟັງເຫດການພາຍໃນຂອງພະນັກງານບໍລິການແລະຕັດສິນໃຈໃຊ້ນະໂຍບາຍ cache ເຊັ່ນ: cache ກ່ອນດ້ວຍ snippet ຕໍ່ໄປນີ້.

self.addEventListener ("ດຶງ"), e => e.respondWith (caches.match (e.request). ຫຼັງຈາກນັ້ນ (res => res);

ໃນກໍລະນີນີ້, ທຸກໆຄັ້ງທີ່ຜູ້ໃຊ້ເຂົ້າເຖິງ PWA (ທັງຈາກຕົວທ່ອງເວັບຫຼືຈາກໄອຄອນທີ່ຕິດຕັ້ງ), ເຄື່ອງຈັກຈະໄດ້ຮັບເອກະສານຈາກ cache. ປະໂຫຍດຂອງ PWA ທຽບກັບແອັບ native ພື້ນເມືອງແມ່ນວ່າອຸປະກອນບໍ່ຕ້ອງດາວໂຫລດເອກະສານທັງ ໝົດ ອີກຄັ້ງເມື່ອມີການປ່ຽນແປງ, ມີພຽງແຕ່ເອກະສານທີ່ມີການປ່ຽນແປງດ້ວຍຂະບວນການໂປ່ງໃສ. ພ້ອມກັນນີ້, ພວກເຮົາຍັງສາມາດດາວໂຫລດຊິ້ນສ່ວນຂອງແອັບ app ຕາມຄວາມຕ້ອງການ.

ແຕ່ສິ່ງທ້າທາຍແມ່ນວິທີທີ່ທ່ານຈະຮູ້ວ່າມີໄຟລ໌ໃດຖືກປັບປຸງຢູ່ໃນເຊີບເວີດັ່ງນັ້ນທ່ານສາມາດທົດແທນພວກມັນຢູ່ໃນບ່ອນເກັບມ້ຽນ? ຖ້າທ່ານບໍ່ຕ້ອງການຂຽນພະນັກງານໃຫ້ບໍລິການລະດັບຕໍ່າເພື່ອຈັດການເລື່ອງນີ້, ທ່ານສາມາດໃຊ້ຫ້ອງສະ ໝຸດ ຫ້ອງເປີດທີ່ສາມາດຊ່ວຍທ່ານໃນການຜະລິດພະນັກງານບໍລິການແລະຊັບພະຍາກອນທີ່ສະແດງອອກເພື່ອປັບປຸງຊຸດທີ່ຕິດຕັ້ງໄວ້.

ຮັບຮູ້ວ່າໄຟລ໌ຂອງ PWA ຂອງທ່ານຈະຖືກລຶບຖິ້ມຖ້າມີຄວາມກົດດັນໃນການເກັບຮັກສາໃນອຸປະກອນ, ເວັ້ນເສຍແຕ່ວ່າທ່ານຮ້ອງຂໍເອົາການເກັບຮັກສາທີ່ຍັງຄົງຄ້າງຖ້າມີ:

ຖ້າ ('ບ່ອນເກັບມ້ຽນ' ໃນຕົວ ນຳ ທາງ && 'ຢູ່ຢ່າງຕໍ່ເນື່ອງ' ໃນ navigator.storage) navigator.storage.persist ();

ໃນ Chrome ແລະ browser ທີ່ສຸດຂອງ Android, ແອັບ Android ຂອງທ່ານບໍ່ສາມາດໃຊ້ໄດ້ເກີນຫ້າເປີເຊັນຂອງພື້ນທີ່ທີ່ມີຢູ່; ໃນ iOS ມັນແມ່ນ 50MiB (ໃກ້ 50MB) ຕໍ່ເຈົ້າຂອງດຽວ; ໃນ Edge ມັນມີຕົວປ່ຽນແປງໂດຍອີງຕາມຂະ ໜາດ ໜ່ວຍ ຄວາມ ຈຳ ທັງ ໝົດ ແລະໃນ Windows Store, ມັນບໍ່ ຈຳ ກັດ.

ປະສົບການໃນຊັ້ນ ໜຶ່ງ

ພວກເຮົາມີສະ ໝອງ ແລະດຽວນີ້ເຖິງເວລາແລ້ວ ສຳ ລັບຫົວໃຈ: web app manifest. ຈຸດປະສົງຂອງການປ່ຽນເວບໄຊທ໌ໃຫ້ເປັນ PWA ບໍ່ພຽງແຕ່ຮັບປະກັນວ່າມັນສາມາດໃຊ້ໄດ້ຢ່າງວ່ອງໄວຫຼືໃນຂະນະທີ່ offline ແຕ່ຍັງຊ່ວຍໃຫ້ມັນມີສັນຍາລັກຂອງຕົວເອງໃນ OS ແລະ ນຳ ສະ ເໜີ ປະສົບການທີ່ໂດດດ່ຽວທັງ ໝົດ ຄືກັບແອັບທີ່ຕິດຕັ້ງອື່ນໆ.

Manifest ແມ່ນແຟ້ມເອກະສານ JSON ທີ່ ກຳ ນົດຂໍ້ມູນ metadata ສຳ ລັບ PWA ທີ່ໃຊ້ໂດຍ browser ຫຼືຮ້ານ app ເພື່ອ ກຳ ນົດພຶດຕິ ກຳ ການຕິດຕັ້ງ.

ເອກະສານໄດ້ ກຳ ນົດຄຸນສົມບັດຫຼາຍຢ່າງເປັນຂໍ້ມູນ metadata ສຳ ລັບ PWA ຂອງທ່ານ. ແຕ່ລະ OS ຈະອ່ານຄຸນສົມບັດເຫຼົ່ານີ້ແລະພະຍາຍາມໃຫ້ດີທີ່ສຸດເພື່ອໃຫ້ກົງກັບປະສົບການທີ່ທ່ານມັກ. ຍົກຕົວຢ່າງ, Android ຈະອ່ານ 'ສະແດງ: standalone' ແລະສ້າງປະສົບການຂອງແອັບ app ທຳ ມະດາ. ດ້ວຍ 'display: minimal-ui' ມັນຈະສ້າງປະສົບການກັບ URL ທີ່ເບິ່ງເຫັນແລະໃບຢັ້ງຢືນ TLS - ເປັນປະໂຫຍດ ສຳ ລັບແອັບ-ທີ່ມີຄວາມປອດໄພ. ດ້ວຍ 'ການສະແດງ: ໜ້າ ຈໍເຕັມຈໍ' ມັນສ້າງແອັບ immers ທີ່ມີຄວາມສົນໃຈເຕັມທີ່ໂດຍບໍ່ມີແຖບສະຖານະຫຼືປຸ່ມເບິ່ງເຫັນໄດ້. ຮູບສັນຍາລັກແລະສີສັນທີ່ ກຳ ນົດໄວ້ວ່າ ໜ້າ ຈໍ splash ຫຼືແຖບຫົວຂໍ້ຈະຊອກຫາ ໜ້າ ຕ່າງຂອງແອັບ your ຂອງທ່ານແນວໃດ.

ມີເຄື່ອງປັ່ນໄຟທີ່ສະແດງອອກເຊັ່ນ: Web App Manifest Generator ຫຼື PWA Builder ເຊິ່ງຍັງຈະປັບຂະ ໜາດ ໄອຄອນໃຫ້ທ່ານໃນຄວາມລະອຽດທີ່ແຕກຕ່າງກັນຖ້າທ່ານໃຫ້ຄວາມລະອຽດສູງ (ໜ້ອຍ 512 ພິກະເຊນ).

ເມື່ອທ່ານມີເອກະສານ manifest ທີ່ເຊື່ອມໂຍງເຂົ້າໃນເອກະສານ HTML ຂອງທ່ານ, ຜູ້ໃຊ້ຈະສາມາດຕິດຕັ້ງແອັບ using ໂດຍໃຊ້ເຕັກນິກຕ່າງໆໂດຍອີງຕາມ browser, ໂດຍປົກກະຕິເອີ້ນວ່າ Add to Home Screen, ຕິດຕັ້ງຫຼືພຽງແຕ່ Add. ຖ້າ PWA ຂອງທ່ານສາມາດຊອກຫາໄດ້ໂດຍ Bing, Microsoft ຈະເພີ່ມມັນເຂົ້າໄປໃນ Microsoft Store ໂດຍອັດຕະໂນມັດເພື່ອໃຫ້ຜູ້ໃຊ້ Windows 10 ສາມາດຕິດຕັ້ງມັນຈາກນັ້ນໄດ້.

ໃນບາງລະບົບປະຕິບັດການ, PWA ຂອງທ່ານຈະມີຄວາມສາມາດໃນການຈັບລິງ. ໝາຍ ຄວາມວ່າຫລັງຈາກຜູ້ໃຊ້ໄດ້ຕິດຕັ້ງແອັບ, ແລ້ວ, URL ໃດ ໜຶ່ງ ທີ່ຢູ່ໃນຂອບເຂດຂອງ manifest ຂອງທ່ານຈະຖືກເປີດຢູ່ໃນຂອບເຂດຂອງແອັບ your ຂອງທ່ານແລະບໍ່ຢູ່ໃນ browser, ບໍ່ວ່າມັນຈະປາກົດຢູ່ໃນ browser ຫຼືແອັບ other ອື່ນໆເຊັ່ນ WhatsApp, Facebook ຫຼືອີເມວ.

ຖ້າທ່ານຜ່ານຂໍ້ ກຳ ນົດຂອງ PWA ທີ່ພວກເຮົາ ກຳ ນົດຢູ່ທີ່ນີ້, ບາງເວທີຈະ ນຳ ສະ ເໜີ ເຄື່ອງ ໝາຍ ທີ່ບໍ່ມີອາກາດລ້ອມຮອບ (ຮູບສັນຍາລັກນ້ອຍໆໂດຍປົກກະຕິຢູ່ແຖບ URL ທີ່ລະບຸວ່າເວັບສາມາດຕິດຕັ້ງໄດ້) ຫຼືປ້າຍໂຄສະນາຂອງ web app. ຖ້າທ່ານຕ້ອງການ, ທ່ານຍັງສາມາດເພີ່ມປຸ່ມຕິດຕັ້ງທີ່ ກຳ ຫນົດເອງຂອງທ່ານໂດຍໃຊ້ snippet ຕໍ່ໄປນີ້:

window.addEventListener ("beforeinstallpr ompt", ຟັງຊັນ (e) {e.prompt (); // ຈະສະແດງການຕິດຕັ້ງແບບພື້ນຖານການກະຕຸ້ນເຕືອນ})

ຖ້າ PWA ຖືກຕິດຕັ້ງ, ເຫດການ 'ຕິດຕັ້ງ' ຈະຖືກຍິງໃສ່ຈຸດປະສົງ window ເພື່ອໃຫ້ທ່ານສາມາດຕິດຕາມສະຖິຕິທີ່ຟັງໄດ້.

ຮ້ານແອັບ

ໜຶ່ງ ໃນປະໂຫຍດທີ່ ສຳ ຄັນຂອງການຕິດຕັ້ງຈາກໂປຣແກຣມທ່ອງເວັບແມ່ນສາມາດຫລີກລ້ຽງຂະບວນການອະນຸມັດຂອງຮ້ານຄ້າຫລືຕ້ອງໄດ້ຈ່າຍເງິນເພື່ອເປັນຜູ້ເຜີຍແຜ່. ນັ້ນແມ່ນມາພ້ອມກັບຂໍ້ໄດ້ປຽບທີ່ຈະແຈ້ງ, ເຊັ່ນການເຜີຍແຜ່ແບບທັນທີ, ການສ້າງແອັບ private ສ່ວນຕົວ ສຳ ລັບບໍລິສັດຫລືແອັບ apps ທີ່ບໍ່ຄວນຍອມຮັບໃນຮ້ານ.

ແຕ່ບາງບໍລິສັດບໍ່ຕ້ອງການຢູ່ໃນຮ້ານ. ມາຮອດປະຈຸບັນນີ້, ຮ້ານດຽວທີ່ຍອມຮັບຢ່າງເປັນທາງການຂອງ PWAs ແມ່ນ Windows Store ແລະ kaiOS Store. ໂຊກດີທີ່ມີເຄື່ອງມືເຊັ່ນ Capacitor (ປະຈຸບັນຢູ່ໃນ Alpha) ຫຼື PWA Builder, ພວກເຮົາສາມາດສ້າງແລະເຊັນສັນຍາແພັກ ສຳ ລັບເວທີອື່ນໆເຊັ່ນກັນ.

ມີບາງ PWA ທີ່ຖືກເຜີຍແຜ່ແລ້ວໃນ Google Play Store, ເຊັ່ນ Twitter Lite ແລະ Google Maps Go, ປະຈຸບັນ ກຳ ລັງຈັດຕັ້ງປະຕິບັດຕາມປະເພນີ. Chrome ຈະສະ ເໜີ ການແກ້ໄຂຈາກ Chrome 68 ຜ່ານກິດຈະ ກຳ ເວັບທີ່ ໜ້າ ເຊື່ອຖື. ຈາກຈຸດນັ້ນ, ພວກເຮົາຈະສາມາດສ້າງແພັກເກດ Android (APK) ກັບໂປແກຼມເປີດໂຕເຂົ້າໄປໃນ PWA ຂອງພວກເຮົາແລະອັບໂຫລດໃສ່ຮ້ານ. ສຳ ລັບ Microsoft Store ໃນ Windows 10, ເວບໄຊທ໌ PWA Builder ກຳ ລັງຊ່ວຍໃນການຜະລິດຊຸດ APPX Windows 10. ໂດຍໃຊ້ມຸມມອງເວັບ, ທ່ານອາດຈະສາມາດສ້າງແອັບ iOS iOS ສຳ ລັບ App Store ໄດ້ແຕ່ຕ້ອງລະມັດລະວັງທີ່ສຸດກ່ຽວກັບກົດລະບຽບຂອງຮ້ານ.

ການເຊື່ອມໂຍງເວທີ

ໂດຍປະຕິບັດເຕັກນິກການເພີ່ມປະສິດທິພາບທີ່ກ້າວ ໜ້າ, ທ່ານຈະສາມາດໃຊ້ຄຸນສົມບັດຫຼາຍຢ່າງ, ລວມທັງການແຈ້ງເຕືອນການຊຸກຍູ້, ການເຂົ້າເຖິງກ້ອງແລະໄມໂຄໂຟນ, ການຕັ້ງພູມສາດ, ເຊັນເຊີ, ການ ຊຳ ລະເງິນ, ການສົນທະນາແບ່ງປັນແລະການເກັບຂໍ້ມູນແບບອອບໄລນ໌. ຄຸນນະສົມບັດທັງ ໝົດ ນີ້ ດຳ ເນີນການໂດຍກົງພາຍໃນຮູບແບບຄວາມປອດໄພຂອງຕົວທ່ອງເວັບ, ລວມທັງກ່ອງໂຕ້ຕອບການອະນຸຍາດ.

ພວກເຮົາຍັງສາມາດສື່ສານກັບແອັບ apps ອື່ນໆໄດ້ໂດຍຜ່ານລະບົບ URI, ເຊັ່ນການເປີດ Twitter, YouTube ຫຼື WhatsApp ຜ່ານ URL ຫຼື URI ທີ່ ກຳ ນົດເອງ, ເຊັ່ນ whatsapp: //.

ສຸດທ້າຍ, ເມື່ອສ້າງ PWAs ທີ່ຖືກເຜີຍແຜ່ໄປຮ້ານໂດຍໃຊ້ Capacitor ຫຼື Microsoft Store, ພວກເຮົາຈະສາມາດເຊື່ອມໂຍງກັບ API ພື້ນເມືອງເຊິ່ງຈະຊ່ວຍໃຫ້ພວກເຮົາສາມາດປະຕິບັດລະຫັດພື້ນເມືອງໃດກໍ່ໄດ້. ການປະສົມປະສານນັ້ນກັບ Windows 10 ປະກອບມີການເຂົ້າເຖິງຮາດແວແຕ່ຍັງລວມເຂົ້າກັບ OS, ສະ ເໜີ ຕົວເລືອກຕ່າງໆເຊັ່ນ Pin to Start. ຍົກຕົວຢ່າງ, Twitter PWA ຊ່ວຍໃຫ້ທ່ານສາມາດແນບຜູ້ໃຊ້ໃດ ໜຶ່ງ ໃສ່ ໜ້າ ຈໍເລີ່ມຕົ້ນຂອງທ່ານ.

ການອອກແບບແລະສິ່ງທ້າທາຍ UX

ການອອກແບບ PWAs ມີສິ່ງທ້າທາຍທີ່ເປັນເອກະລັກສະນັ້ນມັນຈຶ່ງ ສຳ ຄັນທີ່ຈະຕ້ອງໃຊ້ເວລາໃນການຄົ້ນຄວ້າ, ທົດສອບໃຫ້ຫຼາຍເທົ່າທີ່ເປັນໄປໄດ້ແລະພິຈາລະນາສິ່ງຕໍ່ໄປນີ້:

• ຜູ້ໃຊ້ຈະຄາດຫວັງປະສົບການທີ່ຄ້າຍຄືກັບແອັບ app.
• ຂັ້ນຕອນການຕິດຕັ້ງຍັງ ໃໝ່ ຢູ່, ສະນັ້ນພວກເຮົາຕ້ອງໄດ້ພະຍາຍາມເພີ່ມເຕີມເພື່ອອະທິບາຍວິທີການຕິດຕັ້ງແອັບ..
• ການປັບປຸງແອັບ in ໃນພື້ນຫລັງໂດຍບໍ່ມີການໂຕ້ຕອບຂອງຜູ້ໃຊ້ແມ່ນດີເລີດແຕ່ມັນຍັງເພີ່ມຄວາມທ້າທາຍບາງຢ່າງ ສຳ ລັບ UX.
• ເທິງ ໜ້າ ຈໍ, ການອອກແບບເວບໄຊທ໌ທີ່ຕອບສະ ໜອງ ຕ້ອງມີ ໜ້າ ໃໝ່ ຍ້ອນວ່າປ່ອງຢ້ຽມ PWA ສາມາດມີຂະ ໜາດ ນ້ອຍ, ນ້ອຍກວ່າ ໜ້າ ຈໍເບິ່ງຜ່ານມືຖື. ນີ້ ໝາຍ ຄວາມວ່າພວກເຮົາ ຈຳ ເປັນຕ້ອງສ້າງມຸມມອງສະເພາະຫລື widget ຂະ ໜາດ ນ້ອຍ ສຳ ລັບຮູບແບບນີ້, ດັ່ງທີ່ເຫັນໃນ Chrome OS ມື້ນີ້.
• ການແຈ້ງເຕືອນຊຸກຍູ້ຄວນເພີ່ມມູນຄ່າໃຫ້ກັບຜູ້ໃຊ້ເທົ່ານັ້ນ, ສະນັ້ນຮຽນຮູ້ທີ່ຈະຖາມໃນເວລາທີ່ ເໝາະ ສົມແລະຢ່າເສຍໂອກາດໃນການສົ່ງຂໍ້ຄວາມທີ່ບໍ່ມີປະໂຫຍດຫຼື ໜ້າ ສົນໃຈ.
• ພວກເຮົາ ຈຳ ເປັນຕ້ອງອອກແບບ ສຳ ລັບການເຮັດວຽກຂອງເວັບແລະ ສຳ ລັບການເຂົ້າເຖິງອອບໄລນ໌.

ປີຂອງ PWAs

ດ້ວຍການເພີ່ມ iOS ແລະ desktop ໃນປີນີ້, PWAs ແມ່ນມີຢູ່ທົ່ວທຸກແຫ່ງໃນທຸກວັນນີ້. ແຕ່ພວກເຮົາ ຈຳ ເປັນຕ້ອງຈື່ວ່າການເດີນທາງຂອງພວກເຂົາ ກຳ ລັງເລີ່ມຕົ້ນ, ສະນັ້ນຄາດຫວັງວ່າຈະມີການປ່ຽນແປງເລື້ອຍໆແລະໃຫ້ແນ່ໃຈວ່າທ່ານໄດ້ຮັບການປັບປຸງດ້ວຍເຕັກນິກແລະແນວຄວາມຄິດ ໃໝ່ໆ ເພື່ອໃຫ້ປະສົບການຂອງຜູ້ໃຊ້ທີ່ດີເລີດໃນຂະນະທີ່ເວທີການພັດທະນາ.

ບົດຂຽນນີ້ຖືກຈັດພີມມາໃນສະບັບທີ 308 ຂອງສະບັບ ສຸດທິ, ວາລະສານທີ່ຂາຍດີທີ່ສຸດໃນໂລກ ສຳ ລັບນັກອອກແບບແລະພັດທະນາເວັບ. ຊື້ເລກທີ 308 ຢູ່ນີ້ ຫຼື ຈອງທີ່ນີ້.