- طراحی وب اپلیکیشن با متد (PWA(Progressive Web Apps با استفاده از WORKBOX

9 دقیقه برای خواندن

بررسی اجمالی

Workbox یک کتابخانه جاوا اسکریپت که  درست کردن وب اپلیکیشن های PWA را برای ما راحتر می کند.

WORKBOX جانشین sw-preache و sw-toolbox است. این مجموعه ای از کتابخانه ها و ابزارهایی است که برای تولید یک Service Worker(یک فایل جاوا اسکریپت است)، کش کردن و مسیریابین استفاده می شود. WORKBOX همچنین شامل ماژول هایی است که به راحتی همگام سازی پس زمینه و Google Analytics را به راحتی در یک سرویس دهنده خود ادغام می کنید.

در این آزمایشگاه ، از کتابخانه workbox-sw.js و ماژول workbox-cli Node.js برای ساخت یک برنامه وب مترقی پیشرو با قابلیت آفلاین (PWA) استفاده می کنید.
آنچه یاد خواهید گرفت

- نحوه نوشتن یک Service Worker با استفاده از کتابخانه workbox-sw.js

- نحوه اضافه کردن مسیرها به Service Worker خود با استفاده از workbox-sw.js
- نحوه استفاده از راهکارهای از پیش تعریف شده ذخیره سازی ارائه شده در workbox-sw.js
- چگونه می توان استراتژی های حافظه پنهانی workbox-sw.js را با منطق سفارشی تقویت کرد
- نحوه تولید یک Service Worker  با workbox-cli

آنچه شما نیاز دارید 

 اتصال به اینترنت
مرورگری که از Service Worker پشتیبانی می کند
ویرایشگر متن
node.js و npm

1- راه اندازی

اگر nodejs را ندارید آخرین نسخه را از این لینک دانلود کنید.

workbox را از GitHub با دستور زیر کلون کنید:

git clone https://github.com/googlecodelabs/workbox-lab.git

روش دیگر ، می توانید برای بارگیری کد  فایل zip ، را از اینجا دانلود  کنید.

2-نصب وابستگی های پروژه و راه اندازی سرور

از طریق خط فرمان به فهرست پروژه بروید:

cd workbox-lab/project

دستورات زیر را برای نصب وابستگی های پروژه اجرا کنید:

npm install
npm install --global workbox-cli

سپس برنامه را با این دستورات ساخته و اجرا کنید:

npm run build
npm run start

workbox-cli ابزاری برای خط فرمان است که به ما امکان پیکربندی ، تولید و تغییر پرونده های Service Worker را می دهد. workbox-cli در سطح عمومی (با نشان --global) نصب شده است تا بتوانیم از آن به طور مستقیم از خط فرمان استفاده کنیم.

اسکریپت build: فایل های پروژه را از داخل فلدر src به داخل فلدر build کپی می کند.

 اسکریپت start: یک سرور اکسپرس را در داخل پوشه ساخته و  start می کند تا به برنامه ما سرویس دهد(وب سرویس).

پس از start کردن سرور مرورگر را باز کرده و آدرس http: // localhost: 8081 را وارد نماید.وب سایت باز شده یک سایت خبری می باشد که شامل مقالات و پست های بایگانی شده است.ما استراتژی مختلف کش کردن را برای مقالات دنبال شونده و یا آرشیو شده انجام خواهیم داد.

پوشه project داخل پوشه work-lab را در ویرایشگر متن خود باز کنید(مانند vs Code) پوشه project شامل:

پوشه src/images: شامل تصاویر است.

پوشه  src/js/animation.js: یک فایل جاوا اسکریپت برای انیمیشن های صفحه است

پوشه  src/pages: شامل صفحات سایت است.

src/style/main.css: شامل فایل های استایل سایت است.

src/sw.js: فایل است که ما کد service worker  را با استفاده از workbox-sw.js  خواهیم نوشت.

src /index.html: صفحه اصلی سایت است.

 package.json و package-lock.json: فایل های وابستگی node.js و server.js است. 

ما در حال حاضر یکbuild/ssw.js) service worker )  خالی داریم. که توسط کد زیر در صفحه index.html نصب شده است.

 

 

    if ('serviceWorker' in navigator) {

      window.addEventListener('load', () => {

        navigator.serviceWorker.register('/sw.js')

          .then(registration => {

            console.log(`Service Worker registered! Scope: ${registration.scope}`);

          })

          .catch(err => {

            console.log(`Service Worker registration failed: ${err}`);

          });

      });

    }

می توانید service worker را در مرورگر chrome در پنجرهcrtel+shift+i)inspect) و در تب application و انتخاب Service  Worker مشاهده نمایید.

3-با استفاده از workbox-sw  یک service worker  بنویسیم.

در فایل خالی service worker، src/sw.js قطعه کد زیز را اضافه کنید.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);

  workbox.precaching.precacheAndRoute([]);

} else {
  console.log(`Boo! Workbox didn't load 😬`);
}

فایل را ذخیره کنید.

در این کد ، importScriptts کتابخانه workbox-sw.js را از یک شبکه تحویل محتوا (CDN) وارد می کند. پس از بارگیری کتابخانه ، شیء workbox-sw به service worker ما اجازه می دهد تا به همه ماژول های workbox دسترسی پیدا کند.

روش precacheAndRoute، از ماژول پیش نمایش یک "manifest" (لیستی از URL های پرونده) را برای ذخیره کردن نصب service worker می گیرد. همچنین یک استراتژی حافظه پنهان اولیه برای منابع مشخص تنظیم می کند و به طور پیش فرض آنها را از حافظه نهان ذخیره می کند.

به جای اضافه کردن پرونده ها به صورت دستی ، workbox می تواند manifest را برای ما با استفاده از ابزار workbox-cli ایجاد کند.

4- پیکربندی Workbox

دسنور خط فرمان زیر را برای پیکربندی وارد کنید

workbox wizard --injectManifest

دستور اول: مسر پروژه(ریشه وب سایت /build) 

دستور دوم : سوال می کند که چه نوع فایل های کش می شوند.در حال حاضر حافظه پنهان فقط css را انتخاب می کند.

دستور سوم:مسیر Service Worker(که در این پروژه فایلsrc/sw.js می باشد).

دستور چهارم: مسیری برای نوشتن و تولید service worker است(build/sw.js)

دستور آخر می پرسد که می خواهید فلدر پیکربندی خود را چگونه نامگذاری کنید. بازگشت را بزنید و از جواب پیش فرض(workbox-config.js) استفاده کنید. 

 

پس از تکمیل دستورالعمل ها ، وارد شوید و دستورالعمل های مربوط به ساختن service worker را ببینید. به جای اینکه مستقیماً service worker خود را بسازیم ، در مرحله بعدی آن را به فرآیند ساخت اضافه خواهیم کرد.

اما ابتدا پرونده

پس از تکمیل دستورالعمل ها ، وارد شوید و دستورالعمل های مربوط به ساختن کارگر سرویس را ببینید. اکنون این را نادیده بگیرید (اگر قبلاً آن را امتحان کرده اید ، اشکالی ندارد). به جای اینکه مستقیماً کارگر خدمات خود را بسازیم ، در مرحله بعدی آن را به فرآیند ساخت اضافه خواهیم کرد.

اما ابتدا فایل workig-config.js تازه ایجاد شده را بررسی کنید.
توضیح

Workbox یک پرونده پیکربندی ایجاد می کند (در این حالت workbox-config.js) که از workbox-cli برای تولید service workers استفاده می کند. پرونده پیکربندی مشخص می کند که در کجا باید به دنبال فایل هایی باشید (globDirectory) ، که  آنها را کش کنید (globPatterns) ، و نام پرونده ها را برای service workers منبع و تولید ما (به ترتیب swSrc و swDest) جستجو کنید. همچنین می توانیم این پرونده پیکربندی را مستقیماً تغییر دهیم تا آنچه را که از قبل استفاده می شود تغییر دهیم. ما در مرحله بعدی بررسی می کنیم.

تازه ایجاد شده را بررسی کنید.
 

توضیح

workbox یک پرونده پیکربندی ایجاد می کند(workbox-config.js)، که از workbox-cli برای تولید service worker استفاده می کند.

پرونده پیکربندی مشخص می کند که در کجا باید به دنبال فایل ها (globDirectory) ، فایل هایی باشید که به آنها را کش کند(globPatterns)، و نام پرونده ها را برای service worker منبع و تولید ما (به ترتیب swSrc و swDest) جستجو کنید. همچنین می توانیم این پرونده پیکربندی را مستقیماً تغییر دهیم تا آنچه را که از قبل استفاده می شود تغییر دهیم. ما در مرحله بعدی بررسی می کنیم.

5. یک مانیفست را به service worker تزریق کنید

حال بیایید از ابزار workbox-cli برای تزریق precache manifest در service worker استفاده کنیم.

pack.json را باز کنید و اسکریپت build را برای اجرای دستور Workbox injectManifest به روز کنید. pack.json به روز شده باید به شکل زیر باشد:

 

{
  "name": "workbox-lab",
  "version": "1.0.0",
  "description": "a lab for learning workbox",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "copy": "copyfiles -u 1 src/**/**/* src/**/* src/* build",
    "build": "npm run copy && workbox injectManifest workbox-config.js",
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3"
  },
  "devDependencies": {
    "copyfiles": "^1.2.0",
    "workbox-cli": "^3.5.0"
  }
}