home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ระบบ >> Android

Progressive Web Apps: คู่มือสมัยใหม่สำหรับ JavaScript Developers

สนใจเรียน JavaScript? รับ ebook ที่ jshandbook.com

Progressive Web Apps (PWA) คือเทรนด์ล่าสุดใน การพัฒนา Mobile Application ด้วย Web Technologies ณ ตอนเขียน (ต้น 2018) ใช้ได้กับ Android Devices เท่านั้น

PWA จะมาบน iOS 11.3 และ macOS 10.13.4 เร็วๆ นี้

WebKit (เทคโนโลジื่พื้นฐานของ Safari และ Mobile Safari) ประกาศเมื่อก่อน (สิงหาคม 2017) ว่ากำลังทำงานเพิ่ม Service Workers เข้า Browser นั่นหมายถึงเร็วๆ นี้จะรองรับบน iOS Devices ด้วย หาก Apple 決定สนับสนุนแนวทางนี้

PWA ไม่ใช่เทคโนโลยีใหม่ที่แตกต่าง แต่มากกว่านั้นคือ Term ใหม่ ที่ระบุ Bundle ของ Techniques ที่มีเป้าหมายสร้างประสบการณ์ดีกว่าสำหรับ Web-based Apps

Progressive Web App คืออะไร

Progressive Web App คือ App ที่ ให้ฟีเจอร์เพิ่มเติมตามที่อุปกรณ์รองรับ ให้ Offline Capability, Push Notifications, Look and Speed เกือบ Native App และ Local Caching ของ Resources

เทคนิคนี้ Google นำเสนอครั้งแรก 2015 และพิสูจน์ได้ว่ามีข้อได้เปรียมมากทั้ง Developer และ Users

Developers สร้าง Almost-first-class Applications ด้วย Web Stack ซึ่งง่ายและถูกกว่า Native Apps มาก โดยเฉพาะพิจารณา Cross-platform Development

Devs ได้ประโยชน์จาก Reduced Installation Friction และในยุคที่มี App ใน Store ไม่ได้นำความค้นพบ (Discoverability) ให้ 99.99% ของ Apps Google Search ให้ประโยชน์เท่ากันหรือมากกว่า

PWA คือ Website ที่พัฒนาด้วยเทคโนโลยีเฉพาะ ทำให้ Mobile Experience สนุกกว่า Mobile-optimized Website ธรรมดา รู้สึกเกือบ Native App เพราะมีฟีเจอร์:

  • Offline Support
  • Loads Fast
  • Is Secure (HTTPS)
  • Push Notifications
  • Immersive Full-screen Experience (ไม่มี URL Bar)

Mobile Platforms (Android ณ ตอนเขียน แต่ไม่จำกัดทางเทคนิค) รองรับ PWA เพิ่มขึ้น แม้แต่จะขอให้ User Add to Home Screen เมื่อเข้าเว็บที่มี PWA Capabilities

แต่ก่อน ใส่ใจเรื่องชื่อ Progressive Web App อาจ สับสน ความหมายที่ดีคือ: Web Apps ที่ใช้ประโยชน์จาก Modern Browser Features (Web Workers, Web App Manifest) ให้ Mobile Devices อัปเกรด App ให้กลายเป็น First-class Citizen App

ตัวเลือกทางเลือกของ PWA (Alternatives)

PWA เทียบกับ Alternatives ในการสร้าง Mobile Experience ยังไง?

มาดู Pros/Cons ของแต่ละอย่าง และดูว่า PWA เหมาะที่ไหน

Native Mobile Apps

Native Apps เป็นวิธีชัดเจนที่สุด สร้าง Mobile App: Objective-C/Swift บน iOS, Java/Kotlin บน Android, C# บน Windows Phone

แต่ละ Platform มี UI/UX Conventions ของตัวเอง Native Widgets ให้ Experience ที่ User คาดหวัง Deploy และ Distribute ผ่าน App Store

Pain Point หลัก: Cross-platform Development ต้องเรียนรู้ Master และ Update หลาย Methodologies และ Best Practices ทีมเล็กหรือ Solo Dev สร้าง App 3 Platforms ใช้เวลามากเรียนรู้ Tech/Environment จัดการ Libraries และ Workflows ต่างกัน (เช่น iCloud ใช้ได้แค่ iOS ไม่มี Android Version)

Hybrid Apps

Hybrid Apps สร้างด้วย Web Technologies แต่ Deploy ไป App Store ตรงกลางมี Framework/Packaging ส่งไป Review App Store แบบดั้งเดิม

Platform ยอดนิยม: PhoneGap, Ionic Framework และอื่นๆ มักจะเห็น WebView ที่โหลด Local Website

ผมเคยรวม Xamarin แต่ Carlos Eduardo Pérez ชี้ว่า Xamarin Generate Native Code

Key Aspect: Write Once, Run Anywhere Platform Code ต่างกัน Generate ระหว่าง Build สร้าง App ด้วย JavaScript, HTML, CSS น่าประทับใจ Device Capabilities (Mic, Camera, Network, GPS...) Expose ผ่าน JavaScript APIs

ส่วนไม่ดี: หากทำไม่ดีพอ อาจตกเป็น Common Denominator สร้าง App ที่ Sub-optimal ทุก Platform เพราะไม่สนใจ Platform-specific HCI Guidelines

Performance สำหรับ Complex Views อาจแย่ลง

Apps Built with React Native

React Native Expose Native Controls ผ่าน JavaScript API แต่สร้าง Native App จริง ไม่ได้ Embed Website ใน WebView

Motto: Learn Once, Write Anywhere Approach เหมือนกันทุก Platform แต่สร้าง App แยกกันเพื่อ Experience ดีบนแต่ละ Platform

Performance เทียบเท่า Native เพราะสร้าง Native App จริง Distribute ผ่าน App Store

ฟีเจอร์ของ Progressive Web Apps

ในส่วนก่อนหน้าเห็น Competitors หลักของ PWA แล้ว PWA ยืนยังไงเทียบกับพวกเขา ฟีเจอร์หลักคืออะไร?

จำไว้ — PWA ปัจจุบันสำหรับ Android Devices เท่านั้น

Features

PWA มีสิ่งหนึ่งแยกจาก Approaches ข้างบนสิ้นเชิง: ไม่ Deploy ไป App Store

นี่คือ Key Advantage App Store มีประโยชน์หากมี Reach และโชคดีถูก Feature ทำให้ Viral แต่ถ้าไม่อยู่ Top 0.001% ไม่ได้ประโยชน์มากจากการมีที่นั่งใน App Store

PWA Discoverable ผ่าน Search Engines และเมื่อ User เข้า Site ที่มี PWA Capabilities Browser ร่วมกับ Device จะถาม User ว่าอยาก Install App ไป Home Screen ไหม นี่ใหญ่มาก เพราะ SEO ทั่วไป適用กับ PWA นำไปสู่ Paid Acquisition น้อยลง

ไม่อยู่ App Store = ไม่ต้องการ Approval จาก Apple หรือ Google ถึงจะอยู่ในกระเป๋า User Release Updates เมื่อไหร่ก็ได้ โดยไม่ผ่าน Approval Process มาตรฐานของ iOS Apps

PWA คือ HTML5 Apps/Responsive Websites ที่ได้ Steroids พร้อม Key Technologies ใหม่ ทำให้ฟีเจอร์สำคัญเป็นไปได้ หากจำได้ iPhone ต้นรุ่น ไม่มี Native App Dev บอกว่าเขียน HTML5 Mobile Apps ติดตั้ง Home Screen ได้ แต่ Tech สมัยนั้นยังไม่พร้อม

PWA Run Offline

การใช้ Service Workers ทำให้ App มี Fresh Content เสมอ ดาวน์โหลดใน Background และรองรับ Push Notifications ให้ Re-engagement Opportunities มากขึ้น

Sharability ทำให้ UX ดีขึ้นสำหรับ User ที่อยากแชร์ App เพียงแค่ส่ง URL

ประโยชน์ (Benefits)

ทำไม Users และ Developers ต้องสนใจ PWA?

  1. PWAเบา Native Apps หนัก 200MB+ PWA อาจแค่ KBs
  2. ไม่มี Native Platform Code
  3. Cost of Acquisition ต่ำกว่า (ยากกว่าจะโน้มน้าว User ติดตั้ง App มากกว่าให้เข้าชม Website เพื่อ First-time Experience)
  4. Effort น้อยมากสำหรับ Build และ Release Updates
  5. Deep Links Support มากกว่า Regular App-store Apps มาก

Core Concepts

  • Responsive: UI ปรับตัวตามขนาดหน้าจออุปกรณ์
  • App-like Feel: ไม่อยากให้รู้สึกเหมือน Website แต่เหมือน App (มากที่สุดเท่าที่เป็นไปได้)
  • Offline Support: ใช้ Device Storage ให้ Offline Experience
  • Installable: Device Browser แจ้ง User ติดตั้ง App
  • Re-engaging: Push Notifications ช่วย User Rediscover App
  • Discoverable: Search Engines และ SEO Optimization ให้ Users มากกว่า App Store
  • Fresh: App อัปเดตตัวเองและ Content เมื่อ Online
  • Safe: ใช้ HTTPS
  • Progressive: ทำงานบนอุปกรณ์ไหนก็ได้ แม้เก่า แม้มีฟีเจอร์น้อยกว่า (เช่นแค่ Website ไม่ Installable)
  • Linkable: ชี้ไปได้ง่ายด้วย URLs

Service Workers

ส่วนหนึ่งของ PWA Definition คือต้องทำงาน Offline

เพราะสิ่งที่ทำให้ Web App ทำงาน Offline ได้คือ Service Worker หมายถึง Service Workers เป็นส่วนบังคับของ PWA

WARNING: Service Workers รองรับเฉพาะ Chrome (Desktop/Android), Firefox, Opera ดูข้อมูลล่าสุด: https://caniuse.com/#feat=serviceworkers

TIP: ไม่สับสน Service Workers กับ Web Workers สิ่งต่างกันสิ้นเชิง

Service Worker คือ JavaScript File ที่ทำหน้าที่ Middleman ระหว่าง Web App และ Network ดังนั้นจึงให้ Cache Services, Speed Up App Rendering, และ Improve UX

เพื่อ Security เฉพาะ HTTPS Sites เท่านั้นที่ใช้ Service Workers ได้ และนี่เป็นส่วนหนึ่งของเหตุผลที่ PWA ต้อง Serve ผ่าน HTTPS

Service Workers ไม่อยู่บน Device ครั้งแรกที่ User เข้า App ครั้งแรก Service Worker ถูก Install แล้วครั้งต่อๆ ไปที่หน้าต่างๆ ของ Site Service Worker จะถูกเรียก

ดูคู่มือ Service Workers ฉบับสมบูรณ์

App Manifest

App Manifest คือ JSON File ให้ข้อมูลอุปกรณ์เกี่ยวกับ PWA ของคุณ

เพิ่ม Link ไป Manifest ใน ทุก Header ทุกหน้า:

<link rel="manifest" href="/manifest.webmanifest">

ไฟล์นี้บอก Device ว่าตั้งค่าอะไร:

  • Name และ Short Name ของ App
  • Icons Locations ขนาดต่างๆ
  • Start URL Relative to Domain
  • Default Orientation
  • Splash Screen

ตัวอย่าง

{ "name": "The Weather App", "short_name": "Weather", "description": "Progressive Web App Example", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-256x256.png", "sizes": "256x256", "type": "image/png" }], "start_url": "/index.html?utm_source=app_manifest", "orientation": "portrait", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2" }

App Manifest เป็น W3C Working Draft: https://www.w3.org/TR/appmanifest/

App Shell

App Shell ไม่ใช่เทคโนโลยี แตเป็น Design Concept เป้าหมายโหลดและ Render Web App Container ก่อน แล้วค่อย Content จริง เพื่อให้ User ได้ App-like Impression

ตัวอย่าง: Apple Human Interface Guidelines แนะนำ Splash Screen ที่คล้าย UI ให้ Psychological Hint ลดความรู้สึกว่า App โหลดนาน

Caching

App Shell ถูก Cache แยกจาก Content และ Setup ให้ดึง Shell Building Blocks จาก Cache ใช้เวลาน้อยมาก

สนใจเรียน JavaScript? รับ ebook ที่ jshandbook.com