گرفتن PWA ها فراتر از اصول با CAPACITOR.JS: با استفاده از فناوری وب ، برنامه های واقعاً بومی را بسازید

برنامه های وب مترقی مسیری طولانی را طی کرده اند. در ابتدا ، آنها فقط “خوب بودند که یک روش ساده برای ذخیره دارایی ها و اضافه کردن یک نماد صفحه اصلی داشته باشند. اما امروزه ، PWA ها واقعاً می توانند مانند برنامه های بومی احساس کنند.
اگر می خواهید چیزی بیش از یک “PWA اساسی” بسازید ، یک ابزار وجود دارد که باید بدانید: capacitor.js. این امکان را به شما می دهد تا برنامه خود را در فناوری وب بنویسید (واکنش ، vue ، زاویه ای ، هر آنچه را که دوست دارید) ، سپس آن را به عنوان یک برنامه بومی با دسترسی کامل به ویژگی های بومی بدون ترک منطقه راحتی JavaScript خود بپیچید.
در این مقاله ، برخی از نکات و ترفندهای پیشرفته برای ساختن PWA های سطح بعدی را با خازن به اشتراک می گذارم. بیایید وارد آن شویم.

چرا از capacitor.js برای PWA استفاده می کنیم؟

شما ممکن است برای بسته بندی برنامه های وب به ظروف بومی با Cordova یا PhoneGap آشنا باشید. خازن نوعی مانند پسر عموی مدرن آنها است – سریعتر ، ساده تر و طراحی شده است تا با چارچوب های امروزی و ساخت ابزار هموار کار کند.

با خازن ، می توانید:

• برنامه خود را به عنوان PWA در بسته وب دقیقاً همان کد برنامه های بومی برای iOS و Android مستقر کنید
• از افزونه ها برای دسترسی به API های بومی مانند دوربین ، GPS ، اعلان ها و موارد دیگر استفاده کنید
• صفحه های چلپ چلوپ ، رویدادهای چرخه عمر برنامه و دکمه های پشت سخت افزار را به راحتی مدیریت کنید
• این بدان معنی است که شما لازم نیست بین وب و بومی انتخاب کنید – بهترین ها را از هر دو جهان بدست می آورید.

فراتر از ذخیره سازی: پشتیبانی واقعی آفلاین

بسیاری از PWA ها فقط پرونده های حافظه پنهان و شاید برخی از پاسخ های API برای کار آفلاین. اما اگر برنامه شما به قابلیت های آفلاین پیچیده نیاز داشته باشد ، چه می شود؟ مانند صرفه جویی در ویرایش ها یا وظایف محلی و همگام سازی هنگام بازگشت کاربر آنلاین؟

این جایی است که IndexedDB وارد می شود. مانند یک پایگاه داده درست در داخل مرورگر است. استفاده از كتابخانه هایی مانند Dexie.js باعث می شود كه داده ها را به صورت آفلاین ذخیره و پرس و جو كنید.

در اینجا یک مثال ساده از ذخیره و بازیابی TODOS آفلاین:

import Dexie from 'dexie';

interface Todo {
  id?: number;
  title: string;
  done: boolean;
  updatedAt: Date;
}

const db = new Dexie('TodoDB');
db.version(1).stores({
  todos: '++id, title, done, updatedAt'
});

async function saveTodo(todo: Todo) {
  todo.updatedAt = new Date();
  await db.todos.put(todo);
}

async function getTodos() {
  return db.todos.orderBy('updatedAt').reverse().toArray();
}

با استفاده از این تنظیم ، کاربران می توانند بدون اتصال به اینترنت کارها را ایجاد یا ویرایش کنند و برنامه شما سریع و قابل اعتماد باقی می ماند.

همگام سازی داده ها هنگام بازگشت آنلاین

ذخیره سازی آفلاین عالی است ، اما اگر برنامه نتواند همگام سازی در سرور همگام سازی کند ، کافی نیست. برای این کار ، API همگام سازی پس زمینه کمک می کند – به مرورگر می گوید درخواست های خود را تا زمانی که یک اتصال پایدار در دسترس باشد ، خاموش کند.

در اینجا نحوه ثبت همگام سازی در کارگر خدمات خود آورده شده است:

self.addEventListener('sync', event => {
  if (event.tag === 'sync-todos') {
    event.waitUntil(syncTodos());
  }
});

async function syncTodos() {
  // Get unsynced todos from IndexedDB
  const todos = await getUnsyncedTodos();
  for (const todo of todos) {
    await sendToServer(todo);
    await markAsSynced(todo.id);
  }
}

و در برنامه خود ، شما با استفاده از افزونه شبکه خازن برای ایجاد این همگام سازی ، تغییرات اتصال را گوش می دهید:

import { Network } from '@capacitor/network';

Network.addListener('networkStatusChange', status => {
  if (status.connected) {
    navigator.serviceWorker.ready.then(sw => sw.sync.register('sync-todos'));
  }
});

این بدان معناست که برنامه شما به طور خودکار در پس زمینه همگام سازی خواهد شد ، حتی اگر کاربر فراموش کند که به صورت دستی “همگام سازی” را بکشد.

صفحه های چلپ چلوپ بومی و راه اندازی صاف

هیچ کس دوست ندارد در حالی که برنامه بارگیری می شود ، به صفحه سفید خالی خیره شود. خازن نیز در اینجا به صفحه های چلپ چلوپ بومی کمک می کند که فوراً نشان می دهد در حالی که بسته های برنامه شما بارگیری می شوند.

می توانید زمان بندی این صفحه نمایش چلپ چلوپ را به راحتی کنترل کنید:

import { SplashScreen } from '@capacitor/splash-screen';

SplashScreen.show({ showDuration: 2500, autoHide: false });

setTimeout(() => {
  SplashScreen.hide();
}, 2500);

این جزئیات کوچک باعث می شود برنامه شما جلا و حرفه ای احساس شود.

Push Notifications That Work Everywhere

اعلان های فشار مشکل هستند. API فشار وب در مرورگرها خوب کار می کند ، اما می تواند در تلفن همراه متناقض باشد. افزونه Notifications Push Capacitor به شما امکان می دهد از اعلان های بومی در Android و iOS استفاده کنید ، ضمن اینکه از وب نیز پشتیبانی می کنید.

در اینجا نحوه ثبت نام برای اعلان های فشار آورده شده است:

import { PushNotifications } from '@capacitor/push-notifications';

async function setupPush() {
  const perm = await PushNotifications.requestPermissions();
  if (perm.receive === 'granted') {
    await PushNotifications.register();
  }
}

PushNotifications.addListener('registration', token => {
  console.log('Push token:', token.value);
  // Send token to your backend
});

PushNotifications.addListener('pushNotificationReceived', notification => {
  console.log('Notification received:', notification);
});

شما برای اعلان های فشار ، چه کاربران شما برنامه خود را از یک مرورگر یا یک پوسته بومی باز می کنند ، یک واحد متحد می شوید.

دسترسی به ویژگی های سخت افزاری که مرورگرها نمی توانند به آن دسترسی پیدا کنند

آیا نیاز به دسترسی به دوربین ، GPS با دقت بالا یا سیستم پرونده دارید؟ افزونه های خازن شما را پوشش داده اید.

مثال: گرفتن عکس با UI دوربین بومی.

import { Camera, CameraResultType } from '@capacitor/camera';

async function snapPhoto() {
  const photo = await Camera.getPhoto({
    quality: 80,
    allowEditing: true,
    resultType: CameraResultType.Uri,
  });
  return photo.webPath;
}

این به طور مداوم روی دستگاه های بومی کار می کند و در صورت لزوم به API های وب باز می گردد.

دست زدن به حرکات مانند یک برنامه بومی

حرکات صاف و تعامل لمسی برای UX عالی مهم است. API ژست Capacitor به شما امکان می دهد تا با نوشیدن ، شیر آب و به همان روش را بر روی وب و بومی بکشید.

در اینجا یک کنترل کننده ساده کشویی در React آورده شده است:

import { Gesture } from '@capacitor/gesture';
import React, { useEffect, useRef } from 'react';

export function Swipeable({ onSwipeRight }: { onSwipeRight: () => void }) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    const gesture = Gesture.create({
      el: ref.current,
      gestureName: 'swipe',
      onEnd: detail => {
        if (detail.deltaX > 100) {
          onSwipeRight();
        }
      },
    });
    gesture.enable(true);
    return () => gesture.destroy();
  }, [onSwipeRight]);

  return 
Swipe me
;
}

ساخت کد خود را به خوبی در وب و بومی بازی کنید

خازن به شما امکان می دهد اگر در داخل یک ظرف بومی در حال اجرا هستید ، تشخیص دهید:

import { Capacitor } from '@capacitor/core';

if (Capacitor.isNativePlatform()) {
  // Call native-only APIs
} else {
  // Web fallback logic
}

این بدان معناست که می توانید بسته به سکو ، ویژگی های آن را با ظرافت فعال یا غیرفعال کنید ، و یک پایگاه کد واحد را تمیز و حفظ کنید.

پیچیدن

ساخت PWA های امروز تقریباً بیشتر از ذخیره و تجلی است. برای ارائه تجربیات درجه یک ، قابل اعتماد و درجه بومی ، باید ترکیب کنید:

• مدیریت داده های آفلاین قوی
• همگام سازی پس زمینه هوشمند
• ادغام دستگاه بومی با خازن
• UX صیقلی با صفحه های چلپ چلوپ و حرکات
• رسیدگی به اعلان فشار یکپارچه
• capacitor.js انجام همه این کارها را به طرز حیرت انگیزی آسان می کند ، به شما امکان می دهد به جای مبارزه با Quirks Platform ، روی برنامه خود تمرکز کنید.

اگر آماده ساخت برنامه های وب هستید که واقعاً بومی هستند ، به خازن چرخش دهید – کاربران (و عقل شما) از شما تشکر می کنند.