Progressive Web App: Memperkuat PWA Anda

1. Selamat Datang

Dalam lab ini, Anda akan mengambil aplikasi web yang ada dan menambahkan kemampuan lanjutan ke aplikasi tersebut. Codelab ini adalah codelab keenam dalam serangkaian codelab pendamping untuk workshop Progressive Web App. Codelab sebelumnya adalah Mendorong & Mengukur Penginstalan. Ada dua codelab lagi dalam seri ini.

Yang akan Anda pelajari

  • Membuka dan menyimpan file dari sistem file pengguna menggunakan File System Access API
  • Mendaftarkan PWA yang diinstal sebagai pengendali file dengan File Handling API
  • Memilih layar yang tepat untuk membuka jendela menggunakan Multi-Screen Window Placement API
  • Mencegah layar memasuki mode tidur menggunakan Screen Wake Lock API

Yang perlu Anda ketahui

  • JavaScript

Yang akan Anda butuhkan

  • Browser yang mendukung API di atas. Untuk beberapa API, Anda mungkin perlu menggunakan browser dengan Uji Coba Developer atau Uji Coba Origin yang aktif untuk menyelesaikannya.

2. Memulai Persiapan

Mulai dengan meng-clone atau mendownload kode awal yang diperlukan untuk menyelesaikan codelab ini:

Jika Anda meng-clone repo, pastikan Anda berada di cabang pwa05--empowering-your-pwa. File ZIP juga berisi kode untuk cabang tersebut.

Basis kode ini memerlukan Node.js 14 atau yang lebih baru. Setelah kode tersedia, jalankan npm ci dari command line di folder kode untuk menginstal semua dependensi yang Anda perlukan. Kemudian, jalankan npm start untuk memulai server pengembangan codelab.

File README.md kode sumber memberikan penjelasan untuk semua file yang didistribusikan. Selain itu, berikut adalah file utama yang sudah ada dan akan Anda gunakan selama codelab ini:

File Utama

  • js/lib/actions.js - Menyediakan class dasar untuk menu

Catatan Arsitektur Penting

Di sepanjang codelab ini, Anda akan mengedit js/lib/action.js yang mengelola tindakan untuk berbagai tombol di menu aplikasi. Anda dapat mengakses properti apa pun di konstruktor menu yang diinisialisasi, yang akan menyertakan this.editor untuk instance editor teks utama. Dua metode editor penting yang akan Anda gunakan selama codelab ini adalah:

  • this.editor.setContent(content) - Menetapkan konten editor ke argumen konten yang diberikan
  • this.editor.content() - Mendapatkan konten editor saat ini

3. Mengelola File

Membuka, menyimpan, dan membuat file baru di komputer pengguna kini dapat dilakukan berkat File System Access API. Jika dikombinasikan dengan File Handling API, yang memungkinkan pengguna membuka file langsung di PWA Anda, PWA Anda dapat terintegrasi dengan lancar ke dalam kehidupan sehari-hari pengguna Anda.

Membuka dari dalam aplikasi

Tindakan pertama yang perlu dihubungkan adalah kemampuan untuk membuka file dari sistem file pengguna dari dalam aplikasi. Di js/lib/actions.js, dalam metode open dari class Actions, tulis kode yang melakukan hal berikut:

  • Buka pemilih file yang akan mengambil file text/markdown dengan ekstensi .md atau .markdown
  • Tetapkan judul halaman ke nama file yang terbuka, ditambah PWA Edit
  • Simpan handler file di this.handler
  • Tetapkan konten editor ke konten teks file
  • Simpan handler ke penyimpanan objek settings di database IndexedDB settings-store.

Positif : Ingat: konstruktor class tidak dapat berupa fungsi async, tetapi Anda dapat memanggil Promise di dalamnya.

Setelah Anda dapat membuka file dan menyimpan file yang terbuka di antara pemuatan, ada dua hal lagi yang perlu Anda lakukan: menyiapkan kembali handler saat aplikasi dimuat, dan membatalkannya saat pengguna mereset aplikasi.

Untuk melakukannya, di konstruktor class Actions di js/lib/actions.js, lakukan hal berikut:

  • Buka database settings-store
  • Mendapatkan handler tersimpan dari penyimpanan objek settings
  • Tetapkan this.handler ke nilai yang diambil dan judul halaman ke nama file handler (plus PWA Edit) jika ada handler yang disimpan

Untuk mereset status aplikasi (yang dapat dilakukan dengan CTRL/CMD+Shift+R), perbarui metode reset class Actions di js/lib/actions.js untuk melakukan hal berikut:

  • Tetapkan judul dokumen menjadi PWA Edit
  • Menetapkan konten editor ke string kosong
  • Tetapkan this.handler ke null
  • Menghapus pengendali yang disimpan dari penyimpanan objek settings

Membuka dari sistem file pengguna

Sekarang setelah Anda dapat membuka file dari aplikasi, Anda harus mengizinkan pengguna membuka aplikasi dengan file mereka. Mendaftar sebagai pengendali file untuk perangkat akan memungkinkan pengguna membuka file di aplikasi Anda dari mana saja di sistem file mereka.

Negatif : Anda mungkin perlu mengaktifkan Developer atau Origin Trial agar fitur ini berfungsi. Jika Anda perlu mengaktifkan Uji Coba Developer, sebaiknya lakukan di salinan Chrome Canary, bukan di browser normal Anda. Jika perlu mengaktifkan Uji Coba Origin, Anda harus mendaftar seperti biasa dan menambahkan tag ke index.html

Untuk memulai, di manifest.json, tambahkan entri file_handlers yang melakukan hal berikut:

  • Buka /
  • Menerima text/markdown dengan ekstensi file .md atau .markdown.

Tindakan ini akan memungkinkan pengguna membuka file dengan aplikasi Anda, tetapi tidak benar-benar membuka file di aplikasi Anda. Untuk melakukannya, di class Actions di js/lib/actions.js, lakukan hal berikut:

  • Tambahkan konsumen window.launchQueue di konstruktor, panggil this.open dengan handler, jika ada.
  • Memperbarui this.open untuk menerima
      peluncuran opsional
    • Jika ada dan merupakan instance FileSystemFileHandle, gunakan sebagai pengendali file untuk fungsi
    • Jika tidak, buka pemilih file

Setelah melakukan keduanya di atas, instal PWA Anda dan coba buka file dengannya dari sistem file.

Menyimpan file

Ada dua jalur penyimpanan berbeda yang mungkin ingin dilakukan pengguna: menyimpan perubahan ke file yang sudah terbuka, atau menyimpan ke file baru. Dengan File System Access API, menyimpan ke file baru benar-benar membuat file baru dan mendapatkan kembali handle file, jadi untuk memulai, mari kita simpan dari handle yang ada.

Dalam metode save di class Actions di js/lib/actions.js, lakukan hal berikut:

  • Dapatkan handler dari this.handler atau, jika tidak ada, dapatkan handler yang disimpan dari database
  • Buat FileSystemWritableFileStream handler file
  • Menulis konten editor ke aliran data
  • Tutup aliran data

Setelah Anda dapat menyimpan file, saatnya menerapkan simpan sebagai. Untuk melakukannya, di metode saveAs di class Actions di js/lib/actions.js, lakukan hal berikut:

  • Tampilkan alat pilih file simpan, yang dijelaskan sebagai Markdown File dan membuatnya menerima file text/markdown dengan ekstensi .md
  • Tetapkan this.handler ke pengendali yang ditampilkan
  • Simpan handler ke penyimpanan objek settings
  • Tunggu hingga this.save selesai untuk menyimpan konten ke file yang baru dibuat

Setelah melakukannya, kembali ke metode save, periksa apakah handler ada sebelum mencoba menulis ke dalamnya dan, jika tidak ada, tunggu hingga this.saveAs selesai.

4. Menampilkan Pratinjau

Dengan editor Markdown, pengguna ingin melihat pratinjau output yang dirender. Dengan Window Management API, Anda akan membuka pratinjau konten yang dirender di layar utama pengguna.

Sebelum memulai, buat file js/preview.js, lalu tambahkan kode berikut ke file tersebut agar menampilkan pratinjau saat dimuat:

import { openDB } from 'idb';
import { marked } from 'marked';

window.addEventListener('DOMContentLoaded', async () => {
  const preview = document.querySelector('.preview');
  const db = await openDB('settings-store');
  const content = (await db.get('settings', 'content')) || '';

  preview.innerHTML = marked(content);
});

Pratinjau harus berperilaku dengan cara berikut:

  • Saat pengguna mengklik tombol pratinjau dan pratinjau tidak terbuka, pratinjau akan terbuka
  • Saat pengguna mengklik tombol pratinjau dan pratinjau terbuka, pratinjau tersebut akan ditutup
  • Saat pengguna menutup atau memuat ulang PWA, pratinjau akan ditutup

Mulai dengan mengedit metode preview di class Actions dalam js/lib/actions.js untuk melakukan hal berikut:

  • Mendapatkan layar yang tersedia menggunakan Window Management API
  • Filter layar untuk menemukan layar utama
  • Buka jendela untuk /preview dengan judul Markdown preview yang menggunakan setengah lebar yang tersedia, dan seluruh tinggi yang tersedia, dari layar utama, diposisikan sehingga menggunakan setengah kanan penuh yang tersedia dari layar tersebut. Dimensi yang tersedia tidak termasuk area layar yang dicadangkan, seperti menubar, toolbar, status, atau lokasi sistem.
  • Simpan jendela yang terbuka ini ke this.previewWindow
  • Di bagian atas metode, periksa apakah this.previewWindow ada dan, jika ada, tutup jendela dan batalkan setelan this.previewWindow, bukan membuka pratinjau jendela

Terakhir, lakukan hal berikut di akhir konstruktor class Actions di js/lib/actions.js:

  • Tutup this.previewWindow selama acara beforeunload

5. Fokus

Terakhir, kami ingin menawarkan mode penulisan bebas gangguan kepada pengguna. Bebas gangguan tidak hanya berarti tidak ada gangguan dari aplikasi lain, tetapi juga mencegah layar pengguna menjadi tidak aktif. Untuk melakukannya, Anda akan menggunakan Screen Wake Lock API.

Tombol kunci tetap aktif akan berfungsi seperti tombol pratinjau, beralih antara status aktif dan nonaktif. Untuk melakukannya, di metode focus class Actions di js/lib/actions.js, lakukan hal berikut:

  • Periksa apakah dokumen memiliki elemen layar penuh
  • Jika ya:
    • Keluar dari layar penuh
    • Jika this.wakeLock ada, lepaskan penguncian layar saat aktif dan reset this.wakeLock
  • Jika tidak:
    • Minta pengawas kunci tetap aktif dan tetapkan ke this.wakeLock
    • Meminta agar isi dokumen ditampilkan dalam layar penuh.

6. Selamat!

Anda telah mempelajari cara mengelola file sistem dan mengintegrasikan PWA dengan sistem menggunakan File System Access API dan File Handling API, membuka jendela di berbagai layar dengan Window Management API, dan mencegah layar tidak aktif dengan Screen Wake Lock API.

Codelab berikutnya dalam seri ini adalah Service Worker Includes