Progresif web uygulamaları: Sekmeden görev çubuğuna

1. Hoş geldiniz

Bu laboratuvarda, mevcut bir web uygulamasını alıp yüklenebilir hale getireceksiniz. Bu codelab, Progresif Web Uygulaması atölyesi ile ilgili yardımcı codelab'lerin dördüncüsüdür. Önceki codelab IndexedDB idi. Bu seride dört codelab daha var.

Neler öğreneceksiniz?

  • Hizmet çalışanını manuel olarak yazma
  • Mevcut bir web uygulamasına Service Worker ekleme
  • Kaynakları çevrimdışı kullanılabilir hale getirmek için Service Worker ve Cache Storage API'yi kullanma

Bilmeniz gerekenler

  • Temel HTML ve JavaScript

İhtiyacınız olanlar

2. Hazırlanın

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

Depoyu klonlarsanız pwa04--tab-to-taskbar 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

  • index.html - Ana uygulama HTML'si

3. Web uygulaması manifesti oluşturma

Web uygulaması manifest dosyaları, PWA'nızı tanımlar. Böylece, çalışan bir Service Worker ile birlikte tarayıcı, web uygulamanızın yüklenebilir olduğunu ve en önemlisi, yükleneceği cihazda nasıl temsil edileceğini bilir. Ancak öncelikle oluşturulması gerekir. Web uygulamanızın public klasörüne manifest.json adlı bir dosya ekleyin ve aşağıdaki kodu bu dosyaya yapıştırın:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

iOS cihazlar için Apple dokunma simgesi eklemeyi unutmayın. Aşağıdaki kod satırını index.html içindeki <head> bölümünde <title> etiketinin hemen altına ekleyin.

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

Açıklama

Bu manifest, zorunlu, önerilen ve tanıtım alanlarını içerdiğinden çok fazla şey oluyor. İlk olarak, PWA'nın adı, başlangıç URL'si, görüntüleme modu ve simgelerinin tanımlandığı zorunlu alanlar. Son simgenin maskelenebilir bir simge olduğunu ve cihazın kullanıcı arayüzüne göre birden fazla simge gösterimine izin verdiğini unutmayın. Ardından, önerilen tema ve arka plan rengi alanları bulunur. Son olarak, promosyon alanları, açıklama ve bu PWA'nın uygun olduğu kategoriler yer alır. Bu manifest bir PWA'ya eklendiğinde bu alanlar, PWA'mızın yüklü uygulamasının nasıl görüntüleneceğini ve yönetileceğini kontrol eder.

4. Manifesti PWA'ya ekleme

Oluşturulan manifest dosyasının PWA ile ilişkilendirilmesi için eklenmesi gerekir. Bunu yapmak için index.html dosyasını açın ve <head> bölümündeki <title> etiketinin hemen altına aşağıdakileri ekleyin:

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

Açıklama

Manifest bağlantısı, destekleyen tarayıcılara bağlantılı web uygulaması manifestinin mevcut web sitesini tanımladığını bildirir. Geçerli ve kullanılabilir olduğunda, çalışan bir hizmet çalışanıyla ve web uygulaması tarayıcıya özgü ek yükleme ölçütlerini geçtikten sonra uygulamanızın doğrudan kullanıcının cihazına yüklenmesine olanak tanır.

5. Kısayolları ekleme

PWA'nızın bir cihazla daha derinlemesine entegre olduğunu hissettirmenin harika yollarından biri, uygulamanızdaki belirli işlevlere bağlam menüsü kısayolları sağlamaktır. PWA'daki gece modu açma/kapatma düğmesi, mode sorgu parametresini night veya day olarak ayarlayarak modun seçilmesine olanak tanır. manifest.json'da aşağıdaki işlemleri yapan iki kısayol oluşturun:

  • PWA'yı night veya day modunda başlatır.
  • Simge için /images/logo.svg simgesini 150x150 boyutunda kullanır.

6. Tebrikler!

Web uygulaması manifest dosyası oluşturmayı, bunu bir web sayfasına eklemeyi ve yüklendiğinde uygulama kısayolları eklemeyi öğrendiniz.

Serideki bir sonraki codelab İstem Oluşturma ve Yüklemeyi Ölçme'dir.