Sorunsuz PWA kaynak taşıma: Kullanıcıları kaybetmeden alanları değiştirme

Dibyajyoti Pal

Dan Murphy

Marijn Kruisselbrink

Yayınlanma tarihi: 3 Haziran 2026

Progresif web uygulamaları (PWA), uygulama benzeri deneyimler sunarak web'de devrim yarattı. Ancak en büyük avantajlarından biri, aynı zamanda kalıcı bir zorluk olmuştur: Uygulama kimliği, web kaynağıyla sıkı bir şekilde bağlantılıdır.

Markanızı yenilemek veya mimarinizi yeniden yapılandırmak (örneğin, www.example.com/social'dan social.example.com'ye geçmek) istediğinizde zorlu bir ikilemle karşılaşıyordunuz. Yüklü bir PWA'yı "taşımanın" bir yolu yoktu. Kullanıcılar eski uygulamayı manuel olarak kaldırmak ve yeni uygulamanın yükleme düğmesini bulmak zorunda kalıyordu.

PWA ekibi, Chrome 150'de PWA Origin Migration'ı kullanıma sunmaktan heyecan duyuyor. Bu yeni platform özelliği, yüklü PWA'ları yeni bir aynı site kaynağına sorunsuz bir şekilde taşımanıza olanak tanır. Bu taşıma işlemi sırasında kullanıcılar en az düzeyde kesintiye uğrar ve yeterli düzeyde bilgilendirilmeye devam eder.

Kaynak taşıma ile neler yapılabilir?

Kullanıcı deneyimini bozmadan site mimarinizi değiştirebilirsiniz:

• Teknik mimari özgürlüğü: Uygulamanızın alt alan adını veya yolunu değiştirin.
• Bölünmüş uygulama durumlarını düzeltme: Kararlı kimliği olmayan bir start_url değiştirildiğinde yanlışlıkla yinelenen uygulama yüklemelerinin oluşturulduğu sorunu çözün.

Kullanıcılar, uygulamalarını basit bir güncelleme iletişim kutusuyla taşıyabilir. Taşıma işlemi, standart uygulama güncellemesine benzer şekilde bildirilir. Tek bir tıklamayla eski uygulama kaldırılır, yeni uygulama yüklenir ve başlatılır.

PWA'ları taşıma

Bir PWA'yı taşımak için aşağıdaki adımları uygulayın. Yayının geri kalanında daha ayrıntılı bilgi verilmektedir:

1. El sıkışma özelliğini dağıtma:
   • migrate_from adlı çocuğu yeni uygulamaya ekleyin.
   • Eski kaynakta allow_migration alanını /.well-known/web-app-origin-association dosyasına ekleyin.
2. Davranış seçin: suggest (veya boş) kullanıcıyı kesintiye uğratmayı önler ve ilk kullanıma sunma sırasında muhtemelen faydalı olur. force, kullanıcı eski URL'leri kullanmaya devam edemiyorsa kullanıcıyı engeller ve taşıma işleminin yapılmasını zorunlu kılar.
3. Eski uygulamayı güncel tutun: Eski site yeni siteye yönlendiriyorsa tarayıcının olası güncellemeler için eski manifesti bulmaya devam edebilmesi amacıyla migrate_from bloğunda install_url özelliğini kullanın.
4. Hedef manifestte id öğesini uygulayın: Chrome, hedef uygulama manifestinin bir id alanı içermesini zorunlu kılar. Bu, uygulamanın id ayarlanmadan start_url değiştirilerek bölünmüş uygulamalar oluşturma gibi yaygın bir hataya düşmesini önler.

İki yönlü el sıkışma: İşleyiş şekli

Güvenliği sağlamak ve kötü niyetli devralmaları önlemek için taşıma işleminde eski ve yeni kaynaklar arasında güvenli bir el sıkışması gerekir. Bu el sıkışması, her iki sitenin de aynı tüzel kişi tarafından kontrol edilmesini sağlar.

1. adım: Yeni uygulama, önceki uygulamayı bildirir (zorunlu).

Yeni uygulamanın web uygulaması manifestine migrate_from alanı ekleyin.

// Manifest at https://fileman.google.com/manifest.json
{
  "name": "File Manager",
  "id": "/files/",
  "start_url": "/files/index.html",
  ....
  "migrate_from": [
    "https://drive.google.com/"
  ]
}

2. adım: Eski kaynak, taşıma işlemini onaylar (zorunlu)

Yeni bir sitenin eski bir uygulamayı tek taraflı olarak ele geçirmesini önlemek için eski kaynağın taşıma işlemini açıkça yetkilendirmesi gerekir. Bu işlem, .well-known yapılandırma dosyasıyla yapılır.

// File at https://drive.google.com/.well-known/web-app-origin-association
{
  "https://fileman.google.com/files/": {
    "allow_migration": true
  }
}

3. adım: Proaktif sinyal (isteğe bağlı)

Kullanıcının yeni siteyi ziyaret etmesini beklemeden güncellemeyi tetiklemek için eski uygulamanın manifestini yeni uygulamaya yönlendirecek şekilde güncelleyin.

// Manifest at https://drive.google.com/manifest.json
{
  "name": "Drive",
  "start_url": "/",
  "migrate_to": {
    "id": "https://fileman.google.com/files/",
    "install_url": "https://fileman.google.com/drive/installwebapp?usp=migrate"
  }
}

4. adım: Yönlendirmeleri işleyin (isteğe bağlı)

migrate_to alanını kullanmak yerine, eski uygulama URL'lerini yeni uygulamaya yönlendirerek ve scope_extensions'ye güvenerek taşıma işlemini bildirebilirsiniz. Bu sayede, kapsam dışı banner'ın eski uygulamada gösterilmemesini sağlayabilirsiniz. Bu durumda, eski uygulamanın manifesti hiçbir zaman görülmez ve bu nedenle güncellenemez. Uygulama taşıma işlemi gerçekleşmeden önce eski uygulamanın güncellenmeye devam etmesine izin vermek için migrate_from içindeki install_url öğesini, tarayıcıya yönlendirme olmadan eski manifestin ekli olduğu bir URL'yi getirmesi için ayarlayın.

// Manifest at https://fileman.google.com/manifest.json
{
  "name": "File Manager",
  "id": "/files/",
  "start_url": "/files/index.html",
  ....
  "migrate_from": [
    {
      "id": "https://drive.google.com/",
      "install_url": "https://drive.google.com/drive/installwebapp?usp=migrate"
    }
  ]
}

İşte bu kadar. Kullanıcı deneyimi, uygulama güncelleme işleminde kullanılan deneyime benzer. Kullanıcı, uygulama penceresinin sağ üst köşesinde bilgilendirilir:

Uygulama güncellemesini incele'yi tıkladığınızda aşağıdaki kullanıcı deneyimi gösterilir (manifestte değişenlere bağlı olarak):

Kullanıcı deneyimini kontrol etme

behavior işaretini kullanarak taşıma işleminin ne kadar agresif olacağını seçebilirsiniz:

1. Öner (varsayılan): Kullanıcı pasif bir bildirim alır (örneğin, uygulama menüsünde). Kullanıcılar, iletişim kutusunu başlatarak uygulamalarını güncellemeyi, kaldırmayı veya taşımayı yoksaymayı seçebilir.
2. Zorunlu: Kullanıcı, uygulamayı bir sonraki başlatışında engelleyici bir iletişim kutusuyla karşılaşır. Yeni kaynağa güncelleme yapmaları veya uygulamayı kaldırmaları gerekir (lütfen aşağıdaki ekran görüntüsüne bakın).

Bu seçeneğin nasıl ayarlanacağı aşağıdaki örnekte gösterilmektedir.

"migrate_from": [
  { 
    "id": "https://example.com/social/",
    "behavior": "force" // or suggest
  }
]

Sonuç

PWA taşıma özelliği, geliştiricilerin kullanıcıları geride bırakmadan modern ve esnek web mimarileri oluşturmaya devam etmelerini sağlar.