Pekerja Perkhidmatan dan PWAS: Membina Aplikasi Web Luar Talian Pertama

Pekerja perkhidmatan dan PWAS membolehkan aplikasi web pertama di luar talian dengan menggabungkan skrip latar belakang, caching, dan ciri-ciri seperti aplikasi. 1. Pekerja perkhidmatan bertindak sebagai proksi rangkaian, memintas permintaan dan menguruskan cache menggunakan strategi seperti cache-pertama atau basi-sementara-revalidate. 2. Aset teras precache semasa pemasangan untuk memastikan beban shell aplikasi di luar talian. 3. Melaksanakan caching runtime untuk kandungan dinamik seperti respons API. 4. Tambah aplikasi web yang nyata untuk menentukan sifat aplikasi yang boleh dipasang seperti nama, ikon, dan mod paparan. 5. Daftar pekerja perkhidmatan di JavaScript untuk mengaktifkan keupayaan luar talian. 6. Hidangkan halaman sandaran luar talian apabila rangkaian dan cache gagal, mengekalkan pengalaman pengguna. 7. Versi cache dan membersihkan yang lama semasa pengaktifan untuk mengelakkan ketegangan. 8. Gunakan kotak kerja untuk menyelaraskan aliran kerja caching dan penyegerakan. 9. Ujian tingkah laku luar talian menggunakan penyemak imbas. Membina luar talian pertama meningkatkan kebolehpercayaan, kelajuan, dan penglibatan untuk semua pengguna, terutamanya pada rangkaian yang tidak boleh dipercayai, dan boleh dicapai melalui peningkatan progresif.

Membina aplikasi web pertama di luar talian telah menjadi bukan sekadar yang baik, tetapi keperluan praktikal-terutama bagi pengguna yang mempunyai sambungan Internet yang tidak boleh dipercayai atau mereka yang menggunakan aplikasi web pada peranti mudah alih. Di tengah -tengah keupayaan ini adalah pekerja perkhidmatan dan aplikasi web progresif (PWAS) . Bersama -sama, mereka membolehkan pengalaman cepat, boleh dipercayai, dan menarik, walaupun rangkaian lambat atau tidak hadir sepenuhnya.

Mari kita pecahkan bagaimana pekerja perkhidmatan dan PWA bekerjasama untuk membuat luar biasa-pertama-dan bagaimana anda boleh mula membina aplikasi yang berfungsi dengan lancar tanpa sambungan.

Apakah pekerja perkhidmatan?

Pekerja perkhidmatan adalah skrip yang berjalan di latar belakang, berasingan dari laman web, dan bertindak sebagai proksi rangkaian yang boleh diprogramkan. Ia memintas permintaan rangkaian, menguruskan cache, dan membolehkan ciri -ciri seperti pemberitahuan push dan penyegerakan latar belakang.

Ciri -ciri utama:

• Berjalan dalam konteks pekerja (tiada akses dom)
• Beroperasi pada utas berasingan
• Mesti disampaikan melalui HTTPS (atau localhost semasa pembangunan)
• Kitaran hayat termasuk pendaftaran, pemasangan, pengaktifan, dan penamatan

Kuasa sebenar pekerja perkhidmatan terletak pada keupayaan mereka untuk memintas dan mengendalikan permintaan rangkaian , yang membolehkan pemaju untuk melayani kandungan cache apabila rangkaian tidak tersedia.

Bagaimana pekerja perkhidmatan membolehkan fungsi luar talian

Untuk membina aplikasi luar talian pertama, anda perlu memastikan kandungan dan fungsi teras tersedia walaupun tidak ada rangkaian. Inilah cara pekerja perkhidmatan membuatnya berlaku:

1. Strategi caching

Pekerja perkhidmatan membiarkan anda menentukan bagaimana dan apa yang hendak cache. Strategi biasa termasuk:

• Cache-first : Berkhidmat dari cache; hanya pergi ke rangkaian jika tidak cache
• Rangkaian-Pertama : Cuba Rangkaian Pertama, Kembali ke Cache
• Batur-sementara-Revalidate : Hidangkan dari cache dengan segera, kemas kini cache di latar belakang
• Cache-Only : Berguna untuk aset statik yang jarang berubah

Untuk aplikasi luar talian pertama, cache-pertama dengan pendekatan sandaran rangkaian sering berfungsi dengan baik.

2. Mengurangkan aset kritikal

Semasa acara install pekerja perkhidmatan, anda boleh membuat fail penting seperti HTML, CSS, JS, dan Imej:

 const cache_name = 'v1';
const precache_urls = [
  '/',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

self.addeventListener ('install', (event) => {
  event.waituntil (
    cache.open (cache_name)
      .then (cache => cache.addall (precache_urls))
  );
});

Ini memastikan shell aplikasi tersedia di luar talian dari lawatan pertama.

3. Runtime caching untuk kandungan dinamik

Gunakan acara fetch untuk aset cache atas permintaan, seperti respons API atau kandungan yang dihasilkan oleh pengguna:

 self.addeventListener ('ambil', (event) => {
  jika (event.request.destination === 'script' || event.request.destination === 'style') {
    event.respondenwith (
      cache.match (event.Request) .THEN (cache => cache || empet (event.request))
    );
  }
});

Anda boleh melanjutkan ini ke data Cache JSON dari API, membolehkan akses luar talian ke kandungan yang dimuatkan sebelumnya.

Menjadikan aplikasi anda menjadi PWA

Aplikasi Web Progresif adalah aplikasi web yang menggunakan keupayaan web moden untuk menyampaikan pengalaman seperti aplikasi. Untuk dianggap sebagai PWA, aplikasi anda harus:

• Boleh dipercayai (berfungsi dalam keadaan miskin atau tiada rangkaian)
• Cepat (bertindak balas dengan cepat kepada interaksi pengguna)
• Terlibat (terasa seperti aplikasi asli, dengan pemasangan skrin utama, pemberitahuan tolak, dll.)

Inilah yang anda perlukan untuk menjadikan aplikasi anda sebagai PWA yang benar:

1. Aplikasi web nyata

Tambahkan fail manifest.json untuk menentukan bagaimana aplikasi anda muncul semasa dipasang:

 {
  "nama": "aplikasi luar talian saya",
  "Short_name": "OfflineApp",
  "start_url": "/",
  "Paparan": "Standalone",
  "latar belakang_color": "#ffffff",
  "Tema_color": "#000000",
  "Ikon": [
    {
      "src": "icon-14.png",
      "Saiz": "192x192",
      "Jenis": "Imej/PNG"
    },
    {
      "src": "icon-512.png",
      "Saiz": "512x512",
      "Jenis": "Imej/PNG"
    }
  ]
}

Pautkannya di HTML anda:

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

2. Daftar Pekerja Perkhidmatan

Dalam fail JavaScript utama anda:

 jika ('ServiceWorker' di Navigator) {
  window.adDeventListener ('LOAD', () => {
    Navigator.ServiceWorker.Register ('/sw.js')
      .then (reg => console.log ('sw berdaftar:', reg.scope))
      .catch (err => console.log ('pendaftaran SW gagal:', err));
  });
}

3. Mengendalikan keadaan luar talian dengan anggun

Walaupun dengan caching, beberapa permintaan akan gagal. Maklumkan kepada pengguna dengan halaman sandaran luar talian atau UI:

 self.addeventListener ('ambil', (event) => {
  event.respondenwith (
    cache.match (event.request)
      .THEN (cache => {
        kembali cache || Ambil (event.request)
          .catch (() => cache.match ('/offline.html'));
      })
  );
});

Reka bentuk halaman offline.html yang mesra untuk mengekalkan kepercayaan pengguna.

Petua Lanjutan untuk Kejayaan Luar Talian Pertama

• Versi cache anda : Gunakan nama cache dengan nombor versi untuk mengelakkan kandungan basi.
• Bersihkan cache lama : Gunakan acara activate untuk menghilangkan cache yang sudah lapuk.
• Gunakan kotak kerja : Perpustakaan kotak kerja Google memudahkan caching, precaching, dan penyegerakan latar belakang.
• Ujian Kelakuan Luar Talian : Gunakan DevTools (Aplikasi> Pekerja Perkhidmatan) untuk mensimulasikan mod luar talian dan periksa caching.

Pemikiran terakhir

Pekerja perkhidmatan dan PWA adalah alat yang berkuasa yang membawa daya tahan aplikasinya ke web. Dengan merancang aplikasi anda untuk bekerja di luar talian pertama , anda bukan hanya menampung sambungan yang lemah-anda membina pengalaman yang lebih cepat dan lebih dipercayai untuk semua pengguna.

Mulakan Kecil: Cache Shell App anda, tambahkan nyata, dan semakin meningkat. Dari masa ke masa, anda boleh menambah penyegerakan latar belakang, pemberitahuan push, dan caching kandungan dinamik.

Ia bukan sihir - hanya kejuruteraan web yang baik. Dan ia lebih mudah dicapai dari sebelumnya.

Atas ialah kandungan terperinci Pekerja Perkhidmatan dan PWAS: Membina Aplikasi Web Luar Talian Pertama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!