Progresif Web Uygulamaları: PWA'nızı Güçlendirme

1. Hoş geldiniz

Bu laboratuvarda, mevcut bir web uygulamasını alıp gelişmiş özellikler ekleyeceksiniz. Bu codelab, Progresif Web Uygulaması atölyesi ile ilgili bir dizi yardımcı codelab'in altıncısıdır. Önceki codelab'in adı İstem Oluşturma ve Yükleme Ölçümü idi. Bu seride iki codelab daha var.

Neler öğreneceksiniz?

  • File System Access API'yi kullanarak kullanıcının dosya sistemindeki dosyaları açma ve kaydetme
  • Yüklü PWA'nızı File Handling API ile dosya işleyici olarak kaydetme
  • Çoklu Ekran Pencere Yerleştirme API'sini kullanarak pencere açmak için doğru ekranı seçme
  • Screen Wake Lock API'yi kullanarak ekranın uyku moduna geçmesini önleme

Bilmeniz gerekenler

  • JavaScript

İhtiyacınız olanlar

  • Yukarıdaki API'leri destekleyen bir tarayıcı. Bazı API'leri tamamlamak için etkin bir geliştirici denemesi veya kaynak denemesi içeren bir tarayıcı kullanmanız gerekebilir.

2. Hazırlanın

Bu codelab'i tamamlamak için gereken başlangıç kodunu klonlayarak veya indirerek başlayın:

Depoyu klonlarsanız pwa05--empowering-your-pwa dalında olduğunuzdan emin olun. Zip dosyası, söz konusu şubenin kodunu da içerir.

Bu kod tabanı için Node.js 14 veya sonraki bir sürümü gerekir. Kod kullanılabilir hale geldiğinde, ihtiyacınız olan tüm bağımlılıkları yüklemek için komut satırından kodun klasöründe npm ci komutunu çalıştırın. Ardından, kod laboratuvarı için geliştirme sunucusunu başlatmak üzere npm start komutunu çalıştırın.

Kaynak kodunun README.md dosyası, dağıtılan tüm dosyalarla ilgili açıklama sağlar. Ayrıca, bu codelab boyunca kullanacağınız mevcut temel dosyalar şunlardır:

Önemli Dosyalar

  • js/lib/actions.js - Menü için temel bir sınıf sağlar.

Önemli Mimari Not

Bu codelab boyunca, uygulamanın menüsündeki farklı düğmelerin işlemlerini yöneten js/lib/action.js dosyasını düzenleyeceksiniz. Başlatılan menünün oluşturucusundaki tüm özelliklere erişebilirsiniz. Bu özellikler, ana metin düzenleyicinin bir örneği için this.editor içerir. Bu codelab'de kullanacağınız iki önemli düzenleyici yöntemi şunlardır:

  • this.editor.setContent(content): Düzenleyicinin içeriğini, sağlanan içerik bağımsız değişkenine ayarlar.
  • this.editor.content() - Düzenleyicinin mevcut içeriğini alır.

3. Dosyaları yönetme

File System Access API sayesinde artık kullanıcının bilgisayarında dosya açmak, kaydetmek ve yeni dosya oluşturmak mümkün. Kullanıcıların dosyaları doğrudan PWA'nızda açmasına olanak tanıyan File Handling API ile birlikte PWA'nız, kullanıcılarınızın günlük hayatına sorunsuz bir şekilde entegre edilebilir.

Uygulamadan açma

İlk olarak, kullanıcının dosya sistemindeki bir dosyayı uygulamadan açabilme işlemini bağlayacağız. js/lib/actions.js içinde, Actions sınıfının open yönteminde aşağıdakileri yapan kodu yazın:

  • text/markdown uzantılı veya .markdown dosyayı alacak bir dosya seçici açın..md
  • Sayfanın başlığını, açık dosyaların adı ve PWA Edit olarak ayarlayın.
  • Dosya işleyiciyi this.handler altında saklayın.
  • Düzenleyicinin içeriğini dosyanın metin içeriği olarak ayarlayın.
  • İşleyiciyi settings nesne deposuna settings-store IndexedDB veritabanında kaydedin.

Olumlu : Unutmayın: Sınıf oluşturucular async işlevleri olamaz ancak bunların içinde Promise'leri çağırabilirsiniz.

Artık bir dosyayı açıp yüklemeler arasında açık olan dosyayı kaydedebildiğinize göre yapmanız gereken iki şey daha var: Uygulama yüklendiğinde işleyiciyi tekrar ayarlamak ve kullanıcı uygulamayı sıfırladığında işleyiciyi kaldırmak.

İlkini gerçekleştirmek için js/lib/actions.js içindeki Actions sınıfının oluşturucusunda aşağıdakileri yapın:

  • settings-store veritabanını açın
  • Kayıtlı işleyiciyi settings nesne deposundan alma
  • Kaydedilmiş bir işleyici varsa this.handler değerini alınan değere, sayfa başlığını ise işleyicinin dosya adına (artı PWA Edit) ayarlayın.

Uygulamanın durumunu sıfırlamak için (CTRL/CMD+Shift+R ile yapılabilir) js/lib/actions.js içindeki Actions sınıfının reset yöntemini aşağıdaki şekilde güncelleyin:

  • Doküman başlığını PWA Edit olarak ayarlayın.
  • Editörün içeriğini boş bir dize olarak ayarlayın.
  • this.handler öğesini null olarak ayarlayın
  • Kaydedilen işleyiciyi settings nesne deposundan silin.

Kullanıcının dosya sisteminden açma

Artık uygulamanızdan dosya açabildiğinize göre, kullanıcıların uygulamanızı dosyalarıyla açmasına izin vermelisiniz. Bir cihaz için dosya işleyici olarak kaydolmak, kullanıcının dosya sisteminin herhangi bir yerinden dosyaları uygulamanızda açmasına olanak tanır.

Olumsuz : Bunun çalışması için bir geliştirici veya kaynak denemesini etkinleştirmeniz gerekebilir. Bir geliştirici denemesini etkinleştirmeniz gerekiyorsa bunu normal tarayıcınız yerine Chrome Canary'nin bir kopyasında yapmanız önerilir. Bir deneme sürecini etkinleştirmeniz gerekiyorsa normal şekilde kaydolmanız ve etiketini index.html konumuna eklemeniz gerekir.

Başlamak için manifest.json bölümünde aşağıdakileri yapan bir file_handlers girişi ekleyin:

  • Açılış saati: /
  • .md veya .markdown dosya uzantılarıyla text/markdown kabul eder.

Bu işlem, kullanıcıların dosyaları uygulamanızla açmasına olanak tanır ancak dosyalar uygulamanızda açılmaz. Bunu yapmak için js/lib/actions.js içindeki Actions sınıfında aşağıdakileri yapın:

  • Oluşturucuda bir window.launchQueue tüketici ekleyin. Varsa işleyiciyle this.open işlevini çağırın.
  • İsteğe bağlı bir başlatma işleyicisini kabul etmek için this.open uygulamasını güncelleyin
    • Bu dosya varsa ve FileSystemFileHandle örneğiyse işlev için dosya işleyici olarak bunu kullanın.
    • Açılmazsa dosya seçiciyi açın.

Yukarıdaki iki işlemi de yaptıktan sonra PWA'nızı yükleyin ve dosya sisteminden PWA ile bir dosya açmayı deneyin.

Dosya kaydetme

Kullanıcıların tercih edebileceği iki farklı kaydetme yolu vardır: değişiklikleri zaten açık olan bir dosyaya kaydetme veya yeni bir dosyaya kaydetme. File System Access API ile yeni bir dosyaya kaydetmek aslında yeni bir dosya oluşturmak ve dosya işleyicisi almak anlamına gelir. Bu nedenle, başlamak için mevcut bir işleyiciden kaydedelim.

save yönteminde, Actions sınıfında, js/lib/actions.js içinde aşağıdakileri yapın:

  • İşleyiciyi this.handler konumundan veya bu konum yoksa veritabanından alın.
  • Dosya işleyicinin FileSystemWritableFileStream oluşturulması
  • Düzenleyicinin içeriğini akışa yazma
  • Yayını kapatma

Dosya kaydedebildiğinizde farklı kaydetme özelliğini kullanmaya başlayabilirsiniz. Bunu yapmak için js/lib/actions.js içindeki Actions sınıfında saveAs yönteminde aşağıdakileri yapın:

  • Kaydetme dosyası seçiciyi göster, bunu Markdown File olarak tanımla ve .md uzantılı text/markdown dosyalarını kabul etmesini sağla.
  • this.handler değerini döndürülen işleyici olarak ayarlayın.
  • İşleyiciyi settings nesne deposuna kaydedin.
  • İçeriği yeni oluşturulan dosyaya kaydetmek için this.save işleminin tamamlanmasını bekleyin.

Bu işlemi tamamladıktan sonra save yöntemine geri dönün, handler olup olmadığını kontrol edin ve yoksa this.saveAs işleminin tamamlanmasını bekleyin.

4. Önizlemeyi Gösterme

Kullanıcılar, Markdown düzenleyicisiyle oluşturulan çıktının önizlemesini görmek ister. Window Management API'yi kullanarak oluşturulan içeriğin önizlemesini kullanıcının birincil ekranında açarsınız.

Başlamadan önce bir dosya oluşturun js/preview.js ve yüklendiğinde önizleme göstermesi için aşağıdaki kodu ekleyin:

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

Önizleme aşağıdaki gibi davranmalıdır:

  • Kullanıcı önizleme düğmesini tıkladığında ve önizleme açık olmadığında önizleme açılmalıdır.
  • Kullanıcı önizleme düğmesini tıkladığında ve bir önizleme açıldığında önizleme kapatılmalıdır.
  • Kullanıcı PWA'yı kapattığında veya yenilediğinde önizleme kapatılmalıdır.

Bunları sırayla uygulayarak js/lib/actions.js içindeki Actions sınıfında preview yöntemini düzenleyerek aşağıdaki işlemleri yapın:

  • Pencere Yönetimi API'sini kullanarak kullanılabilir ekranları alma
  • Birincil ekranı bulmak için ekranları filtreleyin.
  • /preview için Markdown preview başlıklı bir pencere aç. Bu pencere, birincil ekranın kullanılabilir genişliğinin yarısını ve kullanılabilir yüksekliğinin tamamını kaplayacak şekilde konumlandırılmalı ve ekranın kullanılabilir sağ yarısının tamamını kaplamalı. Kullanılabilir boyutlar, sistem menü çubuğu, araç çubuğu, durum veya konum gibi ekranın ayrılmış alanlarını içermez.
  • Bu açık pencereyi this.previewWindow konumuna kaydet
  • Yöntemin en üstünde this.previewWindow olup olmadığını kontrol edin. Varsa pencereyi kapatın ve pencere önizlemesi açmak yerine this.previewWindow ayarını kaldırın.

Son olarak, js/lib/actions.js içindeki Actions sınıfının oluşturucusunun sonunda aşağıdakileri yapın:

  • beforeunload etkinliği sırasında this.previewWindow'ı kapatma

5. Odak

Son olarak, kullanıcılara dikkat dağıtmayan bir yazma modu sunmak istiyoruz. Dikkat dağıtmayan deneyim, yalnızca diğer uygulamaların karmaşasını ortadan kaldırmakla kalmaz, aynı zamanda kullanıcının ekranının uyku moduna geçmesini de engeller. Bunun için Screen Wake Lock API'yi kullanırsınız.

Uyanık tutma düğmesi, önizleme düğmesi gibi çalışarak açık ve kapalı durum arasında geçiş yapar. Bunun için js/lib/actions.js içindeki Actions sınıfının focus yönteminde aşağıdakileri yapın:

  • Belgede tam ekran öğesi olup olmadığını kontrol edin.
  • Bu durumda:
    • Tam ekrandan çıkma
    • this.wakeLock varsa uyanık kalma kilidini serbest bırakın ve this.wakeLock değerini sıfırlayın.
  • Bu ifade görünmüyorsa:
    • Uyanık kalma kilidi gözcüsü isteyin ve this.wakeLock olarak ayarlayın.
    • Belgenin gövdesinin tam ekran olmasını isteyin.

6. Tebrikler!

File System Access API ve File Handling API'yi kullanarak sistem dosyalarını yönetmeyi ve PWA'nızı bir sisteme entegre etmeyi, Window Management API ile farklı ekranlarda pencereler açmayı ve Screen Wake Lock API ile ekranın uyku moduna geçmesini engellemeyi öğrendiniz.

Serideki bir sonraki codelab Service Worker Includes'dur.