Aynı alanda birden fazla progresif web uygulaması oluşturma

Kullanıcının aynı kuruluşa veya hizmete ait olduğunu fark etmesini sağlamak için aynı alan adından yararlanarak birden fazla PWA oluşturma.

Chase Phillips

Demián Renzulli

Matt Giuca

Demian, Çok kaynaklı sitelerde progresif web uygulamaları blog yayınında, birden fazla kaynakta oluşturulan sitelerin tümünü kapsayan tek bir progresif web uygulaması oluşturmaya çalışırken karşılaştıkları zorlukları ele aldı.

Bu tür bir site mimarisine örnek olarak aşağıdakilerin bulunduğu bir e-ticaret sitesi verilebilir:

• Ana sayfa https://www.example.com adresindedir.
• Kategori sayfaları https://category.example.com adresinde barındırılıyor.
• https://product.example.com adresindeki ürün ayrıntıları sayfaları.

Makalede de belirtildiği gibi, aynı kaynak politikası, hizmet işçilerinin, önbellekleri ve izinlerin kaynaklar arasında paylaşılmasını önleyen çeşitli kısıtlamalar uygular. Bu nedenle, bu tür bir yapılandırmadan kaçınmanızı ve bu şekilde oluşturulmuş siteleri olan kullanıcıların mümkün olduğunda tek bir kaynak site mimarisine geçmesini önemle tavsiye ederiz.

Bu yayında, farklı kaynaklarda tek bir PWA yerine aynı alan adından yararlanarak birden fazla PWA sağlamak ve kullanıcılara bu PWA'ların aynı kuruluşa veya hizmete ait olduğunu bildirmek isteyen şirketlerin durumunu analiz edeceğiz.

Fark etmiş olabileceğiniz gibi, alan adları ve kökler gibi birbirinden farklı ancak birbiriyle ilişkili terimler kullanıyoruz. Devam etmeden önce bu kavramları inceleyelim.

Teknik terimler

• Alan: Alan Adı Sistemi'nde (DNS) tanımlanan herhangi bir etiket dizisi. Örneğin: com ve example.com alanlar.
• Ana makine adı: En az bir IP adresine çözümlenen bir DNS girişi. Örneğin: www.example.com bir ana makine adı, example.com bir IP adresi varsa ana makine adı olabilir ve com hiçbir zaman IP adresine çözümlenmeyeceği için hiçbir zaman ana makine adı olamaz.
• Kaynak: Şema, ana makine adı ve (isteğe bağlı olarak) bağlantı noktasının birleşimidir. Örneğin, https://www.example.com:443 bir kaynaktır.

Adından da anlaşılacağı gibi, aynı kaynak politikası kaynaklara kısıtlamalar getirir. Bu nedenle, makale boyunca çoğunlukla bu terimden bahsedeceğiz. Yine de farklı "kökenler" oluşturmak için kullanılan tekniği tanımlamak amacıyla zaman zaman "alanlar" veya "alt alanlar" terimlerini kullanırız.

Birden fazla, ilgili PWA'nın durumu

Bazı durumlarda bağımsız uygulamalar oluşturmak isteyebilirsiniz ancak bunları aynı kuruluşa veya "markaya" ait olarak tanımlamak isteyebilirsiniz. Bu ilişkiyi kurmak için aynı alan adını yeniden kullanmak iyi bir yöntemdir. Örneğin:

• Bir e-ticaret sitesi, satıcıların envanterlerini yönetmelerine olanak tanıyan bağımsız bir deneyim oluşturmak ister. Bu deneyimde, satıcıların bu deneyimin kullanıcıların ürün satın aldığı ana web sitesine ait olduğunu anlamaları gerekir.
• Bir spor haber sitesi, kullanıcıların favori maçları hakkında bildirimler aracılığıyla istatistikler almasını sağlamak için önemli bir spor etkinliği için özel bir uygulama oluşturmak istiyor. Ayrıca, kullanıcıların uygulamayı haber şirketi tarafından oluşturulan bir uygulama olarak tanımasını sağlamak için uygulamayı Progressive Web Uygulaması olarak yüklemek istiyor.
• Bir şirket, ayrı sohbet, posta ve takvim uygulamaları oluşturmak ve bunların şirketin adına bağlı bağımsız uygulamalar olarak çalışmasını istiyor.

Ayrı kaynaklar kullanma

Bu gibi durumlarda önerilen yaklaşım, her kavramsal olarak farklı uygulamanın kendi kaynağında yayınlanmasıdır.

Bunların hepsinde aynı alan adını kullanmak istiyorsanız alt alan adlarını kullanarak bunu yapabilirsiniz. Örneğin, birden fazla internet uygulaması veya hizmeti sunan bir şirket, https://mail.example.com adresinde bir posta uygulaması ve https://calendar.example.com adresinde bir takvim uygulaması barındırabilir. Bu sırada işletmesinin ana hizmetini https://www.example.com adresinde sunabilir. Bir başka örnek de https://footballcup.example.com'te düzenlenen bir futbol şampiyonası gibi önemli bir spor etkinliğine tamamen adanmış bağımsız bir uygulama oluşturmak isteyen ve kullanıcıların https://www.example.com'te barındırılan ana spor sitesinden bağımsız olarak yükleyip kullanabileceği bir spor sitesi olabilir. Bu yaklaşım, müşterilerin şirketin markası altında kendi bağımsız uygulamalarını oluşturmasına olanak tanıyan platformlar için de yararlı olabilir. Örneğin, satıcıların https://merchant1.example.com, https://merchant2.example.com vb. adreslerde kendi PWA'larını oluşturmasına olanak tanıyan bir uygulama.

Farklı kökler kullanmak, uygulamalar arasında yalıtım sağlar. Bu sayede her biri aşağıdakiler gibi farklı tarayıcı özelliklerini bağımsız olarak yönetebilir:

• Yüklenebilirlik: Her uygulamanın kendi manifest dosyası vardır ve kendi yükleme deneyimini sunar.
• Depolama alanı: Her uygulamanın kendi önbelleği, yerel depolama alanı ve temel olarak cihaz yerelindeki tüm depolama alanı türleri vardır. Bu alanlar diğer uygulamalarla paylaşılmaz.
• Hizmet Çalışanları: Her uygulamanın, kayıtlı kapsamlar için kendi hizmet çalışanı vardır.
• İzinler: İzinler de kaynaklara göre kapsamlandırılır. Bu sayede kullanıcılar hangi hizmete izin verdiklerini tam olarak bilir ve bildirimler gibi özellikler her uygulamaya uygun şekilde ilişkilendirilir.

Bağımsız birden fazla PWA'nın kullanıldığı durumlarda bu düzeyde bir yalıtım oluşturmak en çok istenen durumdur. Bu nedenle bu yaklaşımı kesinlikle öneririz.

Alt alan adlarındaki uygulamalar yerel verileri birbirleriyle paylaşmak isterse bunu çerezler aracılığıyla yapmaya devam edebilir veya daha gelişmiş senaryolar için depolama alanını bir sunucu üzerinden senkronize edebilir.

Aynı kaynağı kullanma

İkinci yaklaşım, farklı PWA'ları aynı kaynakta oluşturmaktır. Buna aşağıdaki senaryolar dahildir:

Örtüşmeyen yollar

Çakışmayan yolları olan, aynı kaynakta barındırılan birden fazla PWA veya kavramsal "web uygulaması". Örneğin:

• https://example.com/app1/
• https://example.com/app2/

Çakışan/iç içe yerleştirilmiş yollar

Aynı kaynakta, kapsamı diğerinin içine yerleştirilmiş birden fazla PWA:

• https://example.com/ ("dış uygulama")
• https://example.com/app/ ("iç uygulama")

Hizmet çalışanı API'si ve manifest biçimi, yol düzeyinde kapsamlandırma kullanarak yukarıdakilerden herhangi birini yapmanıza olanak tanır. Ancak her iki durumda da aynı kaynağın kullanılması birçok sorun ve sınırlama ortaya çıkarır. Bu sorunların temelinde, tarayıcının bunları tamamen farklı "uygulama"lar olarak değerlendirmemesi yatar. Bu nedenle bu yaklaşımdan kaçınılması önerilir.

Sonraki bölümde, bu zorlukları daha ayrıntılı bir şekilde analiz ediyor ve ayrı kaynak kullanma seçeneğiniz yoksa neler yapabileceğinizi açıklıyoruz.

Aynı kaynaktan birden fazla PWA ile ilgili zorluklar

Her iki aynı kaynak yaklaşımında da ortak olan bazı pratik sorunlar aşağıda açıklanmıştır:

• Depolama alanı: Çerezler, yerel depolama alanı ve cihaz yerel depolama alanının tüm biçimleri uygulamalar arasında paylaşılır. Bu nedenle, kullanıcı bir uygulamanın yerel verilerini silmeye karar verirse kaynaktaki tüm veriler silinir. Bunu tek bir uygulama için yapmanın hiçbir yolu yoktur. Chrome ve diğer bazı tarayıcıların, uygulamaların birini kaldırırken kullanıcılardan yerel verileri silmesini aktif olarak isteyeceğini ve bunun kaynaktaki diğer uygulamaların verilerini de etkileyeceğini unutmayın. Diğer bir sorun da uygulamaların depolama kotalarını da paylaşmaları gerektiğidir. Bu da, iki uygulamadan biri çok fazla yer kaplarsa diğerinin olumsuz etkileneceği anlamına gelir.
• İzinler: Tarayıcı izinleri kaynağa bağlıdır. Yani kullanıcı bir uygulamaya izin verirse bu izin, aynı kaynaktaki tüm uygulamalar için aynı anda geçerli olur. Bu, izin istemek için birden fazla kez uğraşmamak gibi iyi bir şey gibi görünebilir ancak kullanıcı bir uygulamanın iznini engellerse diğer uygulamaların da bu izni istemesini veya özelliği kullanmasını engeller. Tarayıcı izinlerinin kaynak başına yalnızca bir kez verilmesi gerekse de sistem düzeyindeki izinlerin, birden fazla uygulamanın aynı kaynağı işaretlemesinden bağımsız olarak uygulama başına bir kez verilmesi gerektiğini unutmayın.
• Kullanıcı ayarları: Ayarlar kaynak başına da ayarlanır. Örneğin, iki uygulamanın yazı tipi boyutu farklıysa ve kullanıcı bunu telafi etmek için yalnızca birindeki yakınlaştırmayı ayarlamak istiyorsa ayarı diğer uygulamalara da uygulamadan bunu yapamaz.

Bu zorluklar, bu yaklaşımı teşvik etmeyi zorlaştırıyor. Bununla birlikte, Ayrı kaynak kullanma bölümünde belirtildiği gibi, ayrı bir kaynak (ör. alt alan adı) kullanamıyorsanız sunduğumuz iki aynı kaynak seçeneğinden çakışmayan/iç içe yerleştirilmiş yollar yerine çakışmayan yolları kullanmanız önemle tavsiye edilir.

Daha önce de belirtildiği gibi, bu bölümde ele alınan zorluklar her iki aynı kaynak yaklaşımı için de geçerlidir. Sonraki bölümde, örtüşen/iç içe yerleştirilmiş yolların kullanılmasının neden en az önerilen strateji olduğuyla ilgili ayrıntıları daha ayrıntılı bir şekilde ele alacağız.

Örtüşen/iç içe yerleştirilmiş yollar için ek zorluklar

Örtüşen/iç içe yerleştirilmiş yollar yaklaşımıyla (https://example.com/ dış uygulama, https://example.com/app/ ise iç uygulamadır) ilgili ek bir sorun da iç uygulamadaki tüm URL'lerin hem dış uygulamanın hem de iç uygulamanın bir parçası olarak kabul edilmesidir.

Bu durum pratikte aşağıdaki sorunları ortaya çıkarır:

• Yükleme Promosyonu: Kullanıcı, iç uygulamayı ziyaret ederse (ör. web tarayıcısında) dış uygulama kullanıcının cihazına zaten yüklüyse tarayıcı, yükleme tanıtım banner'larını göstermez ve BeforeInstallPrompt etkinliği tetiklenmez. Bunun nedeni, tarayıcının mevcut sayfanın önceden yüklenmiş bir uygulamaya ait olup olmadığını kontrol etmesi ve bu sayfanın önceden yüklenmiş bir uygulamaya ait olduğu sonucuna varmasıdır. Bunun geçici çözümü, iç uygulamayı manuel olarak yüklemektir ("Kısayol Oluştur" tarayıcı menüsü seçeneğiyle) veya dış uygulamadan önce iç uygulamayı yüklemektir.
• Bildirim ve Rozet API'si: Dış uygulama yüklüyse ancak iç uygulama yüklü değilse iç uygulamadan gelen bildirimler ve rozetler yanlışlıkla dış uygulamaya (yüklü bir uygulamanın en yakın kapsayıcı kapsamı) atfedilir. Bu özellik, her iki uygulamanın da kullanıcının cihazına yüklenmiş olduğu durumlarda düzgün çalışır.
• Bağlantı yakalama: Dış uygulama, iç uygulamaya ait URL'leri yakalayabilir. Bu durum özellikle dış uygulama yüklüyse ancak iç uygulama yüklü değilse olasıdır. Benzer şekilde, dış uygulamadaki ve iç uygulamaya bağlantı veren bağlantılar, dış uygulamanın kapsamı içinde kabul edildiğinden iç uygulamaya bağlantı yakalama işlemi yapmaz. Ayrıca, ChromeOS ve Android'de bu uygulamalar Play Store'a eklenirse (Güvenilir Web Etkinlikleri olarak) tüm bağlantılar dış uygulama tarafından yakalanır. Dahili uygulama yüklü olsa bile işletim sistemi, kullanıcıya bunları dış uygulamada açma seçeneği sunar.

Sonuç

Bu makalede, geliştiricilerin aynı alan adı altında birbiriyle ilişkili birden fazla Progressive Web Uygulaması oluşturabileceği farklı yöntemlere göz attık.

Özet olarak, bağımsız PWA'ları barındırmak için farklı bir kaynak kullanmanızı (ör. alt alan adları kullanarak) önemle tavsiye ederiz. Bunları aynı kaynakta barındırmak, tarayıcının bunları tamamen farklı uygulamalar olarak değerlendirmemesi nedeniyle birçok zorluk sunar.

• Ayrı kaynaklar: Önerilir
• Aynı kaynak, örtüşmeyen yollar: Önerilmeyen
• Aynı kaynak, örtüşen/iç içe yerleştirilmiş yollar: Kesinlikle önerilmez

Farklı kökler kullanmak mümkün değilse https://example.com/ (dış uygulama için) ve https://example.com/app/ (iç uygulama için) gibi örtüşen veya iç içe yerleştirilmiş yollar yerine örtüşmeyen yollar (ör. https://example.com/app1/ ve https://example.com/app2/) kullanmanız önemle tavsiye edilir.

Ek kaynaklar

• Çok kaynaklı sitelerde progresif web uygulamaları

Teknik incelemeleri ve önerileri için çok teşekkür ederiz: Joe Medley, Dominick Ng, Alan Cutter, Daniel Murphy, Penny McLachlan, Thomas Steiner ve Darwin Huang

Fotoğraf: Tim Mossholder, Unsplash