Pergi tanpa bangunan

Hubungan jarak jauh sering melibatkan penerbangan yang kerap. Semasa penerbangan ini, idea untuk menangkap Reddit menjadi menarik. Daripada mencari aplikasi Reddit di luar talian, saya memutuskan untuk membina teknologi web moden saya sendiri dan pendekatan pembangunan "tanpa membina".

Jawatan ini meraikan pemaju web yang inovatif dan sumbangan mereka. Walaupun bukan tutorial langkah demi langkah, kod lengkap boleh didapati di GitHub.

Matlamatnya adalah pembaca Reddit, meminimumkan perkakas dan kebergantungan. Kami akan menggunakan:

• Litelement: Model komponen yang ringan dan mudah digunakan memanfaatkan komponen web.
• @Vaadin/Router: penghala padat dengan pengalaman pemaju yang hebat.
• @Pika/Web: Memudahkan pengurusan modul semasa pembangunan.
• ES-DEV-SERVER: Pelayan Dev Langsung (walaupun mana-mana pelayan HTTP berfungsi).

Kami juga akan memanfaatkan piawaian penyemak imbas: modul ES, komponen web, peta import, penyimpanan KV, dan pekerja perkhidmatan.

Pemasangan Ketergantungan:

 npm i -s lit -element @vaadin/router
npm i -d @pika/web-dev-server

Tambahkan skrip postinstall ke package.json :

 "Skrip": {
  "Mula": "es-dev-server",
  "Postinstall": "Pika-Web"
}

PIKA: Melancarkan kebergantungan

Pika (oleh Fred K. Schott) memudahkan pembangunan web, memasang kebergantungan sebagai fail JavaScript individu dalam web_modules/ direktori. Ini memudahkan proses dan mengelakkan konfigurasi membina kompleks. Output menyerupai:

 <code>└─ web_modules/ ├─ lit-element.js └─ @vaadin └─ router.js</code>

Import Peta: Menyelesaikan penentu kosong

index.html kami termasuk peta import untuk mengendalikan penentu modul kosong:

<script type="importmap">
  {
    "imports": {
      "@vaadin/router": "/web_modules/@vaadin/router.js",
      "lit-element": "/web_modules/lit-element.js"
    }
  }
</script>
<reddit-pwa-app></reddit-pwa-app>

reddit-pwa-app.js :

 import {litelement, html} dari 'lit-element';

kelas redditpwaapp memanjangkan litelemen {
  render () {
    kembali html`<h1 id="Helo-Dunia"> Helo Dunia!</h1> `;
  }
}

customElements.define ('reddit-pwa-app', redditpwaapp);

Import Peta Menyelesaikan Isu Penentu Modul Bare, membolehkan keserasian penyemak imbas tanpa proses membina kompleks.

Pekerja Perkhidmatan: Fungsi Luar Talian

Untuk mengaktifkan akses luar talian, kami melaksanakan Pekerja Perkhidmatan ( sw.js ) yang didaftarkan di index.html :

 jika ('ServiceWorker' di Navigator) {
  window.adDeventListener ('LOAD', () => {
    Navigator.ServiceWorker.Register ('./ sw.js');
  });
}

Aset pra-cache pekerja perkhidmatan, memastikan fungsi luar talian. Pika memudahkan ini dengan menyediakan senarai aset yang jelas. (Lihat repo GitHub untuk butiran sw.js ).

Penyimpanan KV: Kegigihan Data Luar Talian

Untuk menyimpan jawatan di luar talian, kami menggunakan penyimpanan KV, modul terbina dalam berlapis di atas indexeddb. Ia menawarkan operasi tak segerak dan prestasi yang lebih baik ke atas LocalStorage. Polyfill digunakan untuk memastikan sokongan penyemak imbas yang lebih luas. (Lihat repo GitHub untuk butiran pelaksanaan).

Polyfilling dengan peta import

Polyfill penyimpanan KV ( kv-storage-polyfill ) dimasukkan dan diuruskan melalui peta import, menyediakan mekanisme sandaran jika penyimpanan KV asli tidak tersedia.

Kesimpulan

Projek ini menunjukkan membina PWA berfungsi dengan kebergantungan yang minimum, menonjolkan manfaat piawaian web moden dan pendekatan yang tidak membina. Walaupun alat binaan alternatif wujud, kaedah ini mengutamakan kesederhanaan dan kemudahan akses. Repositori GitHub menyediakan pangkalan lengkap untuk penerokaan lanjut. Maklum balas dan perbincangan dialu-alukan di Twitter (@passle_ atau @OpenWC) dan open-wc.org.

Penghargaan:

Terima kasih kepada Guy Bedford (Es-Module-shims), Luke Jackson ("Jangan membina aplikasi itu!"), Benny Powers, dan Lars den Bakker atas sumbangan mereka.

Atas ialah kandungan terperinci Pergi tanpa bangunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!