PWA Angular
در تاریخ توسط

 برای Progressive کردن یک پروژه انگولاری مراحل زیر را انجام میدهیم:


ng add @angular/pwa --project ProjectName
به کوچک بودن حروف pwa دقت شود . (نوشتن قسمتی که روی آن خط کشیده شده لازم نمیباشد)
سپس از پروژه build گرفته میشود
ng build -- prod

به مسیر dist پروژه میرویم و دستور
Http-server -o
زده میشود. احتمالا اگر package مورد نظر نصب نباشد با Error روبرو میشوید که با دستور زیر میتوانید آنرا نصب کنید
npm install -g http-server

یا اینکه
http-server -p 8080 -c-1 dist/aan

که در صورت نیاز به مجوز با ادمین پاورشل باز میشود و دستور زیر زده میشود
set-executionpolicy remotesigned

نکته مهم برای تغییرات در PWA فایل manifest.webmanifest است که درون اون میشه وضعیت تمام صفحه بودن یا نبودن و یا آیکونهای مختلف برای افزودن به صفحه اصلی موبایل رو اونجا آدرس دهی کرد .
 "name": "aan",
    "short_name": "aan",
    "theme_color": "#1976d2",
    "background_color": "#fafafa",
    "display": "fullscreen",
    "scope": "./",
    "start_url": "./",
    "icons": [{
            "src": "assets/icons/icon-72x72.png",
            "sizes": "72x72",
            "type": "image/png",
            "purpose": "maskable any"
        },
        {
            "src": "assets/icons/icon-96x96.png",
            "sizes": "96x96",
            "type": "image/png",
            "purpose": "maskable any"
        }
    ]
}

بعد از پابلیش روی وب سرور IIS ممکنه وقتی اپ رو تست میکنید تغییرات اعمال نشده باشه و متوجه بشید که فایل شناسایی نشده . برای حل مشکل باید از پنل مدیریت سایت‌ها و در قسمت mime type‌ها فرمت .webmanifest رو به فرمت‌های شناخته شده برای سرویس دهی اضافه کنید.

نکته مهم دیگه ای که وجود داره کار با اعداد توی سیستم هایی هست که با موبایل و مخصوصا مرورگرهای موبایل مثل سافاری با اون طرف هستید . خیلی وقت‌ها یونیکد اعداد فارسی برای برنامه‌ها قابل تشخیص نیست .
برای حل این مشکل باید هر عددی که وارد میشه رو به عدد معادل با یونیکد صحیح انگلیسی تبدیل کنید . حالا اگه سیستم در لحظه داره validate میشه به ازای هر عددی که وارد میشه یک تابع فراخوانی شه و عدد رو به معادلش تبدیل کنه و برگردونه و گرنه که آخرسر عدد نهایی رو تبدیل کنه . با یه همچنی function ای
  private fixNumbers(str) {
    let persianNumbers = [/۰/g, /۱/g, /۲/g, /۳/g, /۴/g, /۵/g, /۶/g, /۷/g, /۸/g, /۹/g];
    let arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g];
    
    for (var i = 0; i < 10; i++) {
      str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i);
    }

    return str;
  };

نکته دیگری که وجود داره مشکل بعضی از browserها با inpute‌های از جنس number است که بر خلاف مرورگرهای عادی که فقط اعداد را در ورودی دریافت میکنند اونها کاراکتر رو هم دریافت میکنند .
برای حل این یکی مشکل تایپ input رو از جنس text بگیرید و به جاش توی pattern به صورت زیر عمل کنید .

<input matInput type="text" pattern="[0-9]*" [(ngModel)]="dto.myNum" #myNum="ngModel" (input)=fixMyNumber() name="myNum" required>
1 - با این کار وقتی توی موبایل روی این inpute بزنید فقط صفحه کلید اعداد نمایش داده میشود.
2- input میتونه به یک validator وصل باشه برای شناسایی توسط validator تمپلیت Input رو به مدل بایند میکنیم . به این شکل
#myNum="ngModel" 

و من به عنوان مثال چون از ابزارهای گوگل متریال استفاده میکنم ولیدیت و نمایش خطا به صورت
<mat-error *ngIf="muNum?.invalid && (muNum.dirty || muNum.touched)">
  تنها اعداد مورد قبول است
</mat-error>
3- در اینجا ایونت (input) متدی رو در کامپوننت فراخوانی میکنه که در اون هم خودش در هر فراخوانی متدی رو که بالاتر نوشتیم رو فراخوانی میکنه و مقدار رو به input برمیگردونه

  public fixMyNumber() {
  if (this.dto.myNum!= null)
  this.dto.myNum= this.fixNumbers(this.dto.myNum)
  }


نکته بعدی در هنگام وارد کردن ورودی‌ها در کلیه input‌های برنامه در گوشی است  . زمانی که روی input کلیک میشه و گوشی رو اون زوم میکنه و ممکنه برای دیزاین و کاربری صفحه خوشایند نباشه . توی فایل index.html به صورت زیر عمل کنید.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


گروه های پست :
تعداد مشاهده : 91
تعداد پسندها : 0
تعداد نظرات : 0
تعداد پیوست ها : 0

ارسال دیدگاه

ایمیل شما به کاربران نمایش داده نمی شود .

دیدگاه ها

تا کنون نظری داده نشده است .
اولین کسی باشید که دیدگاه خود را ثبت می کند .

loading...

لطفا منتظر بمانید...