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

Kullanıcının aynı kuruluşa veya hizmete ait olduklarını 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 adresinde.
• Kategori sayfaları https://category.example.com adresinde barındırılır.
• 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, tam tersini ele alıyoruz: 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, alanlar ve kaynaklar gibi farklı ancak birbiriyle ilişkili terimler kullanıyoruz. Devam etmeden önce bu kavramları inceleyelim.

Teknik şartlar

• Alan: Alan Adı Sistemi'nde (DNS) tanımlanan herhangi bir etiket dizisi. Örneğin: com ve example.com alanlardır.
• 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 adresine sahipse ana makine adı olabilir. com hiçbir zaman bir IP adresine çözümlemez ve bu nedenle 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 bu 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, kavramsal olarak farklı her uygulama kendi kaynağında yayındaki uygulamalar için geçerlidir.

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ırırken 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 manifesti vardır ve kendi yüklenebilir 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.

Birden fazla bağımsız PWA'nın kullanıldığı kullanım alanlarında 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 birbirleriyle yerel verileri paylaşmak isterse bunu çerezler aracılığıyla yapabilir veya daha gelişmiş senaryolar için depolama alanını bir sunucu üzerinden senkronize etmeyi düşünebilirler.

Aynı kaynağı kullanma

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

Örtüşmeyen yollar

Aynı kaynakta barındırılan ve birbiriyle örtüşmeyen yollara sahip birden fazla PWA veya kavramsal "web uygulamaları". Ö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")

Service Worker API ve manifest biçimi, yol düzeyinde kapsam belirlemeyi kullanarak yukarıdaki işlemlerden 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 gelen birden fazla PWA'nın karşılaştığı zorluklar

Her iki aynı kaynaklı yaklaşımlarda sık karşılaşılan bazı pratik sorunlar şunlardı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 verileri siler. Bunu tek bir uygulama için yapmak mümkün değildir. Chrome ve diğer bazı tarayıcıların, uygulamalardan birini kaldırırken kullanıcılardan etkin bir şekilde yerel verileri silmelerini isteyeceğini ve bu durum kaynaktaki diğer uygulamaların verilerini de etkileyecektir. Diğer bir sorun da uygulamaların depolama kotalarını da paylaşmak zorunda olmasıdır. Bu da ikisinden biri çok fazla alan kapladığında diğeri olumsuz etkilenecektir.
• İzinler: Tarayıcı izinleri kaynağa bağlıdır. Yani, kullanıcı bir uygulamaya izin verirse söz konusu izin, söz konusu 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 boyutları 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.

Tüm bu zorluklar, bu yaklaşımın teşvik edilmesini zorlaştırıyor. Bununla birlikte, Ayrı kaynakları kullanma bölümünde açıklandığı gibi, sunduğumuz iki aynı kaynak seçeneğinden ayrı bir kaynak (ör. alt alan adı) kullanamıyorsanız çakışan/iç içe yerleştirilmiş yolların yerine çakışmayan yolların kullanılması ö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

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

Pratikte bu durum aşağıdaki sorunları beraberinde getirir:

• Yükleme Promosyonu: Kullanıcı, iç uygulamayı ziyaret ederse (örneğin, bir 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 edip 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ği aracılığıyla) 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ı Kapsatma: Dış uygulama, iç uygulamaya ait URL'leri yakalayabilir. Bu durum, özellikle dış uygulama yüklüyken iç uygulama yüklü değilse olasıdır. Benzer şekilde, dış uygulamadaki ve iç uygulamaya yönlendiren 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 uygulamayı dış uygulamada açma seçeneği sunmaya devam eder.

Sonuç

Bu makalede, geliştiricilerin aynı alanda birbirleriyle ilgili birden fazla Progresif Web Uygulaması (pwa) oluşturabilecekleri farklı yöntemleri inceledik.

Ö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ı kaynaklar kullanmak mümkün değilse örtüşmeyen yollar (ör. https://example.com/app1/ ve https://example.com/app2/) kullanarak çakışan veya iç içe yerleştirilmiş yolların (https://example.com/ (dış uygulama için) ve https://example.com/app/ (iç uygulama için) gibi) kullanılması ö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