Progresywne aplikacje internetowe: zwiększanie możliwości PWA

1. Witamy

W tym module weźmiesz istniejącą aplikację internetową i dodasz do niej zaawansowane funkcje. To szóste z serii powiązanych ćwiczeń z kodem do warsztatów dotyczących progresywnych aplikacji internetowych. Poprzednie laboratorium kodowe to Prompting & Measuring Install. W tej serii są jeszcze 2 samouczki.

Czego się nauczysz

  • otwieranie i zapisywanie plików z systemu plików użytkownika przy użyciu interfejsu File System Access API;
  • Rejestrowanie zainstalowanej aplikacji PWA jako modułu obsługi plików za pomocą interfejsu File Handling API
  • Wybieranie odpowiedniego ekranu do otwarcia okna za pomocą interfejsu Multi-Screen Window Placement API
  • Zapobieganie przejściu ekranu w tryb uśpienia za pomocą interfejsu Screen Wake Lock API

Co warto wiedzieć

  • JavaScript

Wymagania

  • Przeglądarka obsługująca powyższe interfejsy API. W przypadku niektórych interfejsów API może być konieczne użycie przeglądarki z aktywną wersją próbną dla deweloperów lub wersją próbną pochodzenia.

2. Pierwsze kroki

Zacznij od sklonowania lub pobrania kodu startowego potrzebnego do ukończenia tego ćwiczenia:

Jeśli klonujesz repozytorium, upewnij się, że jesteś w gałęzi pwa05--empowering-your-pwa. Plik ZIP zawiera też kod tej gałęzi.

Ten kod wymaga Node.js w wersji 14 lub nowszej. Gdy kod będzie dostępny, uruchom npm ci z wiersza poleceń w folderze kodu, aby zainstalować wszystkie potrzebne zależności. Następnie uruchom npm start, aby uruchomić serwer programistyczny dla tego laboratorium.

Plik README.md kodu źródłowego zawiera wyjaśnienie wszystkich rozpowszechnianych plików. Oto najważniejsze pliki, z którymi będziesz pracować w trakcie tego ćwiczenia:

Kluczowe pliki

  • js/lib/actions.js – udostępnia klasę bazową dla menu.

Ważna uwaga dotycząca architektury

W tym laboratorium będziesz edytować plik js/lib/action.js, który zarządza działaniami różnych przycisków w menu aplikacji. Dostęp do dowolnej usługi możesz uzyskać w konstruktorze zainicjowanego menu, który będzie zawierać this.editor w przypadku instancji głównego edytora tekstu. W tym ćwiczeniu będziesz używać 2 ważnych metod edytora:

  • this.editor.setContent(content) – ustawia zawartość edytora na podany argument treści.
  • this.editor.content() – pobiera bieżącą zawartość edytora.

3. Zarządzanie plikami

Otwieranie, zapisywanie i tworzenie nowych plików na komputerze użytkownika jest teraz możliwe dzięki interfejsowi File System Access API. W połączeniu z interfejsem File Handling API, który umożliwia użytkownikom otwieranie plików bezpośrednio w PWA, Twoja aplikacja może być płynnie zintegrowana z codziennym życiem użytkowników.

Otwieranie z poziomu aplikacji

Pierwszą czynnością, którą musisz wykonać, jest możliwość otwierania plików z systemu plików użytkownika w aplikacji. W js/lib/actions.js w metodzie open klasy Actions napisz kod, który wykonuje te czynności:

  • Otwórz selektor plików, który przyjmie text/markdown plik z rozszerzeniem .md lub .markdown.
  • Ustaw tytuł strony na nazwę otwartych plików i PWA Edit.
  • Zapisz program obsługi plików w folderze this.handler.
  • Ustaw zawartość edytora na tekstową zawartość pliku.
  • Zapisz moduł obsługi w settings magazynie obiektów w bazie danych settings-store IndexedDB.

Pozytywny : Pamiętaj: konstruktory klas nie mogą być async funkcjami, ale możesz w nich wywoływać obietnice.

Teraz, gdy możesz otwierać pliki i zapisywać informacje o tym, który plik jest otwarty między wczytaniami, musisz wykonać jeszcze 2 czynności: ponownie skonfigurować moduł obsługi po wczytaniu aplikacji i wyłączyć go, gdy użytkownik zresetuje aplikację.

Aby to zrobić, w konstruktorze klasy Actions w js/lib/actions.js wykonaj te czynności:

  • Otwórz bazę danych settings-store
  • Pobierz zapisany moduł obsługi z pamięci obiektowej settings.
  • Ustaw this.handler na pobraną wartość, a tytuł strony na nazwę pliku obsługi (plus PWA Edit), jeśli zapisano obsługę.

Aby zresetować stan aplikacji (co można zrobić za pomocą kombinacji klawiszy CTRL/CMD+Shift+R), zaktualizuj metodę reset klasy Actions w js/lib/actions.js, aby wykonać te czynności:

  • Ustaw tytuł dokumentu na PWA Edit.
  • Ustawianie zawartości edytora na pusty ciąg znaków
  • Ustaw wartość this.handler na null
  • Usuń zapisany moduł obsługi z settings obiektu pamięci

Otwórz z systemu plików użytkownika

Teraz, gdy możesz otwierać pliki z poziomu aplikacji, pozwól użytkownikom otwierać aplikację za pomocą ich plików. Zarejestrowanie aplikacji jako modułu obsługi plików na urządzeniu umożliwi użytkownikowi otwieranie plików w aplikacji z dowolnego miejsca w systemie plików.

Negatywne : aby to zadziałało, może być konieczne włączenie wersji deweloperskiej lub testu Origin Trial. Jeśli musisz włączyć wersję próbną dla deweloperów, zalecamy, aby zrobić to w kopii Chrome Canary, a nie w normalnej przeglądarce. Jeśli chcesz włączyć testowanie źródłowe, zarejestruj się w nim w zwykły sposób i dodaj tag do index.html

Na początek w manifest.json dodaj wpis file_handlers, który wykonuje te czynności:

  • Otwarcie: /
  • Akceptowane są pliki text/markdown z rozszerzeniami .md lub .markdown.

Umożliwi to użytkownikom otwieranie plików za pomocą Twojej aplikacji, ale nie spowoduje otwarcia plików w niej. Aby to zrobić, w klasie Actions w js/lib/actions.js wykonaj te czynności:

  • Dodaj window.launchQueue konsumenta w konstruktorze, wywołując this.open z obsługą, jeśli jest dostępna.
  • Aktualizowanie aplikacji this.open w celu zaakceptowania opcjonalnego modułu obsługi uruchamiania
    • Jeśli istnieje i jest instancją FileSystemFileHandle, użyj go jako modułu obsługi plików dla funkcji.
    • Jeśli nie, otwórz selektor plików.

Po wykonaniu obu powyższych czynności zainstaluj PWA i spróbuj otworzyć za jej pomocą plik z systemu plików.

Zapisywanie pliku

Użytkownik może zapisać zmiany na 2 sposoby: w otwartym pliku lub w nowym pliku. W przypadku interfejsu File System Access API zapisywanie w nowym pliku polega na utworzeniu nowego pliku i uzyskaniu z niego uchwytu. Zacznijmy więc od zapisania z istniejącego uchwytu.

W metodzie save w klasie Actions w js/lib/actions.js wykonaj te czynności:

  • Pobierz moduł obsługi z this.handler lub, jeśli nie istnieje, pobierz zapisany moduł obsługi z bazy danych.
  • Utwórz FileSystemWritableFileStream obsługi pliku.
  • Zapisywanie zawartości edytora w strumieniu
  • Zamknij strumień

Gdy możesz zapisać plik, czas wdrożyć funkcję „Zapisz jako”. Aby to zrobić, w metodzie saveAs w klasie Actions w js/lib/actions.js wykonaj te czynności:

  • Wyświetl selektor zapisywania plików, opisując go jako Markdown File, i spraw, aby akceptował pliki text/markdown z rozszerzeniem .md.
  • Ustaw this.handler na zwrócony moduł obsługi.
  • Zapisz moduł obsługi w pamięci obiektowej settings
  • Poczekaj, aż this.save zakończy działanie, aby zapisać treść w nowo utworzonym pliku.

Gdy to zrobisz, wróć do metody save i sprawdź, czy istnieje handler. Jeśli tak, spróbuj do niego napisać. Jeśli nie, poczekaj, aż this.saveAs zakończy działanie.

4. Wyświetlanie podglądu

Użytkownicy edytora Markdown chcą widzieć podgląd wyrenderowanych danych wyjściowych. Za pomocą interfejsu Window Management API otworzysz podgląd wyrenderowanej treści na ekranie głównym użytkownika.

Zanim zaczniesz, utwórz plik js/preview.js i dodaj do niego ten kod, aby po wczytaniu wyświetlał podgląd:

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);
});

Podgląd powinien działać w ten sposób:

  • Gdy użytkownik kliknie przycisk podglądu, a podgląd nie jest otwarty, powinien się otworzyć.
  • Gdy użytkownik kliknie przycisk podglądu i podgląd jest otwarty, powinien go zamknąć.
  • Gdy użytkownik zamknie lub odświeży aplikację PWA, podgląd powinien się zamknąć.

Zacznij od edycji metody preview w klasie Actions w pliku js/lib/actions.js, aby wykonać te czynności:

  • Pobieranie dostępnych ekranów za pomocą interfejsu Window Management API
  • Filtrowanie ekranów w celu znalezienia ekranu głównego
  • Otwórz okno dla /preview o tytule Markdown preview, które zajmuje połowę dostępnej szerokości i całą dostępną wysokość ekranu głównego, umieszczone tak, aby zajmowało całą dostępną prawą połowę tego ekranu. Dostępne wymiary nie obejmują zarezerwowanych obszarów ekranu, takich jak pasek menu systemu, pasek narzędzi, stan lub lokalizacja.
  • Zapisz otwarte okno w usłudze this.previewWindow
  • U góry metody sprawdź, czy jest widoczny symbol this.previewWindow. Jeśli tak, zamknij okno i usuń ustawienie this.previewWindow zamiast otwierać podgląd okna.

Na koniec wykonaj te czynności na końcu konstruktora klasy Actions w pliku js/lib/actions.js:

  • Zamknij this.previewWindow podczas zawodów (beforeunload)

5. Koncentracja

Chcemy też zaoferować użytkownikom tryb pisania bez rozpraszania uwagi. Tryb bez rozpraszania uwagi oznacza nie tylko brak bałaganu z innych aplikacji, ale też zapobieganie przejściu ekranu użytkownika w stan uśpienia. W tym celu użyjesz interfejsu Screen Wake Lock API.

Przycisk blokady wybudzania będzie działać tak samo jak przycisk podglądu, przełączając się między stanem włączonym i wyłączonym. Aby to zrobić, w metodzie focus klasy Actions w js/lib/actions.js wykonaj te czynności:

  • Sprawdź, czy dokument zawiera element pełnoekranowy
  • Jeśli tak:
    • Wyjdź z trybu pełnoekranowego
    • Jeśli istnieje this.wakeLock, zwolnij blokadę uśpienia i zresetuj this.wakeLock.
  • Jeśli nie:
    • Poproś o blokadę uśpienia i ustaw ją na this.wakeLock
    • Żądanie wyświetlenia treści dokumentu na pełnym ekranie.

6. Gratulacje!

Dowiedzieliśmy się, jak zarządzać plikami systemowymi i integrować PWA z systemem za pomocą interfejsów File System Access API i File Handling API, otwierać okna na różnych ekranach za pomocą interfejsu Window Management API oraz zapobiegać przechodzeniu ekranu w stan uśpienia za pomocą interfejsu Screen Wake Lock API.

Kolejny codelab z tej serii to Service Worker Includes.