Angular 6 Kullanarak PWA Oluşturma

Bu öğreticide, bir PWA oluşturan temel ilkeleri uygulayarak bir PWA oluşturmak için en son Angular 6'yı kullanacağız. JSON API kullanan bir ön uç web uygulaması oluşturarak başlayacağız. Bu konuda, Basitleştirilmiş JavaScript Jargon GitHub deposundan oluşturulan statik bir JSON API'sine HTTP istekleri göndermek için Angular HttpClient modülünü kullanacağız. Ayrıca Angular Material paketi aracılığıyla UI oluşturmak için Material Design kullanacağız.

Ardından, web uygulamamızı PWA'ların temel ilkelerine göre analiz etmek için Chrome DevTools'un "Denetimler" panelini (Lighthouse) kullanacağız. Son olarak Lighthouse raporundaki “Progressive Web App” bölümüne göre PWA özelliklerini açıklayıp web uygulamamıza ekleyeceğiz.

PWA'mızı uygulamaya başlamadan önce, önce PWA'ları ve Lighthouse'u tanıtalım.

Önerilen okuma : Yerli ve PWA: Meydan Okuyanlar Değil, Seçenekler!

PWA nedir?

Aşamalı Web Uygulaması veya PWA, kullanıcılara uygulama benzeri bir deneyim sağlayan bir dizi yeteneğe (yerel uygulamalara benzer) sahip bir web uygulamasıdır. PWA'ların daha sonra göreceğimiz bir dizi temel gereksinimi karşılaması gerekir. PWA'lar yerel uygulamalara benzer ancak dağıtılır ve URL'ler aracılığıyla web sunucularından erişilebilir, bu nedenle uygulama mağazalarından geçmemize gerek yoktur.

Bir PWA'nın olması gerekenler:

• ilerici
  Temel bir ilke olarak aşamalı geliştirme ile oluşturuldukları için tarayıcı seçiminden bağımsız olarak her kullanıcı için çalışın.
• duyarlı
  Herhangi bir form faktörüne, masaüstüne, mobil cihaza, tablete veya sırada ne varsa ona sığdırın.
• Bağlantıdan bağımsız
  Çevrimdışı veya düşük kaliteli ağlarda çalışmak için hizmet çalışanları ile geliştirilmiştir.
• uygulama benzeri
  Uygulama tarzı gezinme ve etkileşimler sağlamak için uygulama kabuğu modelini kullanın.
• Taze
  Servis çalışanı güncelleme süreci sayesinde her zaman güncel.
• Güvenli
  Gözetlemeyi önlemek ve içeriğin tahrif edilmediğinden emin olmak için HTTPS aracılığıyla sunulur.
• keşfedilebilir
  W3C bildirimleri ve arama motorlarının bunları bulmasını sağlayan hizmet çalışanı kayıt kapsamı sayesinde "uygulamalar" olarak tanımlanabilir.
• Yeniden etkileşime geçilebilir
  Anında iletme bildirimleri gibi özelliklerle yeniden etkileşimi kolaylaştırın.
• kurulabilir
  Kullanıcıların, bir uygulama mağazasıyla uğraşmadan, en yararlı buldukları uygulamaları ana ekranlarında "saklamalarına" izin verin.
• bağlanabilir
  URL üzerinden kolayca paylaşın ve karmaşık kurulum gerektirmez.
  

Deniz Feneri Tanıtımı

Lighthouse, erişilebilirlik performansı, SEO, en iyi uygulamalar ve PWA özellikleri için web sitelerini ve uygulamaları denetlemek için kullanılabilen, Google tarafından oluşturulmuş açık kaynaklı bir denetim aracıdır.

Lighthouse'a Chrome DevTools'daki Denetim sekmesinden Node.js'de bir modül olarak veya bir CLI aracı olarak erişebilirsiniz. Lighthouse'u bir URL sağlayarak ve ardından size web uygulamanızı nasıl geliştirebileceğinize dair temel öneriler olan denetim sonuçlarını içeren bir rapor sağlayacak denetimleri çalıştırarak kullanabilirsiniz.

Angular CLI v6 Kurulumu ve Proje Oluşturma

Bu bölümde, Angular CLI'nin en son sürümünü yükleyeceğiz ve ardından yeni bir Angular 6 projesi oluşturmak için kullanacağız.

Angular CLI, Node.js >= 8.9+ gerektirir, bu nedenle öncelikle aşağıdaki komutu çalıştırarak gerekli sürümün kurulu olduğundan emin olun:

 $ node -v 

Node.js kurulu değilse, resmi Node indirme sayfasına gidebilir ve sisteminiz için Node ikili dosyalarını alabilirsiniz.

Şimdi, devam ederek Angular CLI'nin en son sürümünü aşağıdakileri çalıştırarak yükleyebilirsiniz:

 $ npm install -g @angular/cli

Not : npm yapılandırmanıza bağlı olarak, paketleri global olarak kurmak için _sudo_ eklemeniz gerekebilir.

Terminalinizde aşağıdaki komutu çalıştırarak Angular 6 projenizi oluşturabilirsiniz:

 $ ng new pwademo

Bu, şuna benzeyen bir yapıya sahip bir proje yaratacaktır:

Yapılan çoğu iş, uygulamanın kaynak kodunu içeren src/ klasörünün içinde olacaktır.

Açısal Uygulama Oluşturma

Bir proje oluşturduktan sonra, JSON API kullanan ve öğeleri ana sayfada görüntüleyen bir web uygulaması oluşturacağız. HTTP istekleri göndermek için HttpClient hizmetini ve kullanıcı arayüzünü oluşturmak için Angular Material'ı kullanacağız.

Açısal Malzeme Ekleme

Angular CLI v6 ve yeni ng add komutu sayesinde, projenize Angular Material eklemek yalnızca bir komut uzağınızda. Terminalinizden aşağıdaki komutu çalıştırmanız yeterlidir:

 $ cd pwademo $ ng add @angular/material 

Ekran görüntüsünden, komutun gerekli paketi npm'den kurduğunu ve projenizde daha önce manuel güncelleme gerektiren Angular Material kurulumu için bir grup dosyayı güncellediğini görebilirsiniz.

HttpClient Ayarlama ve JSON API'sini Kullanma

Şimdi Angular projesini HTTP istekleri göndermek için HttpClient kullanacak şekilde ayarlayalım. İlk olarak, src/app/app.module.ts dosyasındaki ana uygulama modülündeki HttpClientModule modülünü içe aktarmanız gerekir:

 /*...*/ import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ /*...*/ HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Bu kadar. Artık ana modüle ait herhangi bir bileşen veya hizmette HttpClient enjekte edebilir ve kullanabiliriz.

Demo amacıyla, Basitleştirilmiş JavaScript Jargon GitHub deposundan statik olarak oluşturulmuş bir JSON API kullanacağız. Başka bir kaynak tüketiyorsanız, tarayıcının Same Origin Policy nedeniyle uzak kaynağın okunmasına izin vermemesi için CORS'u etkinleştirdiğinizden emin olun.

API ile arayüz oluşturan bir servis oluşturalım. Proje klasörünüzün içinde şunu çalıştırın:

 $ ng g service api

Bu, src/app/api.service.ts dosyasında ApiService adlı bir hizmet oluşturacaktır.

Şimdi src/app/api.service.ts dosyasını açın ve aşağıdaki değişiklikleri yansıtacak şekilde güncelleyin:

 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; export interface Item{ name: string; description: string; url: string; html: string; markdown: string; } @Injectable({ providedIn: 'root' }) export class ApiService { private dataURL: string = "https://www.techiediaries.com/api/data.json"; constructor(private httpClient: HttpClient) {} fetch(): Observable<Item[]>{ return <Observable<Item[]>this.httpClient.get(this.dataURL); } }

Önce HttpClient ve Observable sınıflarını içe aktardık, ardından httpClient olarak HttpClient enjekte ettik ve HttpClient get() yöntemini çağıran (JSON uç noktamıza bir HTTP GET isteği göndermek için) ve bir Observable döndüren bir fetch() yöntemi ekledik. daha sonra abone olabiliriz.

Ayrıca, döndürülen JSON verilerinin tek bir öğesini temsil eden bir Item arabirimi de bildirdik.

Ardından, bu hizmeti uygulama bileşeninden içe aktarın. src/app/app.component.ts dosyasını açın ve şunu ekleyin:

 import { Component, OnInit } from '@angular/core'; import { ApiService } from './api.service'; import { Item } from './api.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ title = 'pwademo'; items: Array<Item>; constructor(private apiService: ApiService){ } ngOnInit(){ this.fetchData(); } fetchData(){ this.apiService.fetch().subscribe((data: Array<Item>)=>{ console.log(data); this.items = data; }, (err)=>{ console.log(err); }); } }

Daha önce oluşturduğumuz ApiService içe aktarıyoruz ve apiService olarak enjekte ediyoruz, ayrıca JSON verilerimizin tek bir öğesini temsil eden Item sınıfını içe aktarıyoruz ve alınan öğeleri tutacak Array<Item> türünde items değişkenini bildiriyoruz.

Ardından, bir Observable döndüren ApiService tanımladığımız fetch() yöntemimizi çağıran bir fetchData() yöntemi ekliyoruz. JSON uç noktamıza bir GET isteği göndermek ve nihayet items dizisine atadığımız yanıt verilerini almak için bu gözlemlenebilir öğeye abone oluyoruz.

ngOnInit() yaşam döngüsü olayında fetchData() yöntemini çağırıyoruz, böylece AppComponent bileşeni başlatıldığında çağrılacak.

Uygulama Arayüzünü Ekleme

Uygulama kullanıcı arayüzümüz bir gezinti çubuğu ve Angular Material ile oluşturulacak sayfanın iskeletinden oluşacaktır.

Bir Angular Material bileşenini kullanmadan önce modülünü içe aktarmanız gerekir. Her Malzeme bileşeni kendi modülüne aittir.

src/app/app.module.ts dosyasını açın ve aşağıdaki içe aktarmaları ekleyin:

 /*...*/ import { MatToolbarModule } from '@angular/material/toolbar'; import { MatCardModule } from '@angular/material/card'; import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [ AppComponent ], imports: [ /*...*/ MatToolbarModule, MatCardModule, MatButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Araç çubuğu, kart ve düğme bileşenleri için modülleri içe aktarıyoruz ve bunları AppModule içe aktarma dizisine ekliyoruz.

Ardından, src/app/app.component.html dosyasını açın, içindekileri silin ve şunu ekleyin:

 <mat-toolbar color="primary"> <mat-toolbar-row> <span>JS-jargon</span> </mat-toolbar-row> </mat-toolbar> <main> <mat-card *ngFor="let item of items"> <mat-card-header> <mat-card-title>{{item.name}}</mat-card-title> </mat-card-header> <mat-card-content> {{item.description}} </mat-card-content> <mat-card-actions> <a mat-raised-button href="{{item.url}}" color="primary">More</a> </mat-card-actions> </mat-card> </main>

Kullanıcı arayüzünü oluşturmak için Malzeme bileşenleri kullanıyoruz. <mat-toolbar> bileşeni bir Malzeme araç çubuğu oluşturmak için kullanılır ve <mat-card> bileşeni bir Malzeme kartı vb. oluşturmak için kullanılır.

Bileşen başlatıldığında fetchData() yöntemi tarafından doldurulan items dizisi üzerinde yinelenir ve öğeleri Malzeme kartları olarak görüntüleriz. Her kartta ad, açıklama ve daha fazla bilgi için bir bağlantı bulunur (Bağlantı, mat-raised-button yönergesi kullanılarak Malzeme düğmesi olarak tasarlanmıştır).

Bu, uygulamanın bir ekran görüntüsü:

Uygulamanın Üretim İçin Oluşturulması

Tipik olarak, uygulamanızı PWA özellikleri açısından kontrol ederken, çoğu PWA özelliği geliştirme aşamasında eklenmediğinden, önce onu üretim için oluşturmalısınız. Örneğin, dosyaları düzenli aralıklarla güncellemeniz gerekeceğinden, geliştirme sırasında hizmet çalışanlarının ve önbelleğe almanın etkinleştirilmesini istemezsiniz.

Aşağıdaki komutu kullanarak üretim için uygulamayı oluşturalım:

 $ ng build --prod

Üretim derlemesine dist/pwademo klasöründen erişilebilir. Hizmet etmek için http-server gibi bir araç kullanabiliriz.

İlk olarak, aşağıdaki komutu kullanarak http-server kurun:

 $ npm i -g http-server

Daha sonra aşağıdaki komutu kullanarak çalıştırabilirsiniz:

 $ cd dist/pwademo $ http-server -o

-o seçeneği sisteminizdeki varsayılan tarayıcıyı otomatik olarak açacak ve web uygulamamızın bulunduğu https://127.0.0.1:8080/ adresine gidecektir.

Lighthouse Kullanarak Uygulamayı Analiz Etme

Şimdi Lighthouse kullanarak uygulamamızı inceleyelim. Öncelikle Chrome'u başlatın ve uygulama adresimizi https://127.0.0.1:8080/ ziyaret edin.

Ardından, Geliştirici Araçları'nı açın veya Ctrl + Shift + I tuşlarına basın ve Denetim paneline tıklayın.

Bir mobil ortamı taklit etmek için tercihen Öykünmeyi Masaüstü yerine Mobil olarak ayarlamanız gerekir. Ardından, Denetim gerçekleştir… mavi düğmesine tıklayın. Web uygulamanıza karşı gerçekleştirmek istediğiniz denetim türlerini seçmeniz gereken bir iletişim kutusu açılır. Aşamalı Web Uygulaması dışındaki tüm türlerin işaretini kaldırın ve Denetimi çalıştır düğmesini tıklayın.

Deniz Feneri'nin raporu oluşturmasını bekleyin. Bu, bu aşamadaki sonucun bir ekran görüntüsü:

Lighthouse, PWA Kontrol Listesi tarafından belirtilen Aşamalı Web Uygulamasının özelliklerini doğrulayan bir dizi kontrol gerçekleştirir. ³⁶ ⁄ _100'lük bir başlangıç ​​puanı alıyoruz, çünkü bazı denetimlerden geçtik.

Uygulamamız, bir PWA'nın temel unsurları olan Hizmet Çalışanları , Aşamalı Geliştirme , HTTPS ve Web Uygulaması Bildirimi ile ilgili 7 başarısız denetime sahiptir.

Servis Çalışanını Kaydetme

İlk iki başarısız denetim (“Bir hizmet çalışanı kaydetmez” ve “Çevrimdışıyken 200 ile yanıt vermez”) Hizmet Çalışanları ve önbelleğe alma ile ilgilidir. Peki hizmet görevlisi nedir?

Hizmet çalışanı, uygulamanızın varlıkları ve verileri önbelleğe almak için ağ isteklerini engellemesini sağlayan bir ağ proxy'si olarak kullanılabilen modern tarayıcılarda bulunan bir özelliktir. Bu, çevrimdışı destek ve Push bildirimleri vb. gibi PWA özelliklerini uygulamak için kullanılabilir.

Bu denetimleri geçmek için bir servis çalışanı kaydetmemiz ve onu dosyaları yerel olarak önbelleğe almak için kullanmamız yeterlidir. Çevrimdışı olduğunda, SW dosyanın yerel olarak önbelleğe alınmış sürümünü döndürmelidir. Bunu bir CLI komutuyla nasıl ekleyeceğinizi biraz sonra göreceğiz.

Önerilen okuma : Bir Hizmet Çalışanı Yapmak: Bir Vaka Çalışması

Aşamalı Geliştirme

Üçüncü başarısız denetim (“JavaScript mevcut olmadığında yedek içerik sağlamaz”), bir PWA'nın önemli bir yönü olan Aşamalı Geliştirme ile ilgilidir ve yalnızca PWA'ların farklı tarayıcılarda çalışabilme, ancak aşağıdaki durumlarda gelişmiş özellikler sağlama yeteneğine atıfta bulunur. onlar mevcut. PE'nin basit bir örneği, etkinleştirilmemesi durumunda uygulamayı çalıştırmak için JavaScript'i etkinleştirmesi gerektiği konusunda kullanıcıları bilgilendiren <noscript> HTML etiketinin kullanılmasıdır:

 <noscript> Please enable JavaScript to run this application. </noscript>

HTTPS

Dördüncü başarısız denetim (“HTTP trafiğini HTTPS'ye yönlendirmez”), aynı zamanda PWA'ların temel bir yönü olan HTTPS ile ilgilidir (hizmet çalışanlarına, yerel ana bilgisayar dışında yalnızca güvenli kaynaklardan hizmet verilebilir). "HTTPS Kullanır" denetiminin kendisi, yerel ana bilgisayarı denetlediğimiz için Lighthouse tarafından başarılı olarak kabul edilir, ancak gerçek bir ana bilgisayar kullandığınızda bir SSL sertifikasına ihtiyacınız vardır. Let's Encrypt, Cloudflare, Firebase veya Netlify gibi farklı servislerden ücretsiz SSL sertifikası alabilirsiniz.

Web Uygulaması Manifestosu

Üç başarısız denetim ("Kullanıcıdan Web Uygulamasını Yüklemesi istenmeyecek", "Özel bir Başlangıç ​​Ekranı için yapılandırılmamış" ve "Adres çubuğu marka renkleriyle eşleşmiyor"), eksik bir Web Uygulaması Manifestosu ile ilgilidir. Bir PWA için gereken ad, açıklama, simgeler ve diğer bilgileri sağlayan JSON biçimindeki dosya. Kullanıcıların, bir uygulama mağazasına gitmeden yerel uygulamalar gibi web uygulamasını ana ekrana yüklemesine olanak tanır.

Bir web uygulaması bildirimi sağlamanız ve rel özelliği manifest olarak ayarlanmış bir <link> etiketi kullanarak buna index.html dosyasından başvurmanız gerekir. Bunu bir CLI komutuyla otomatik olarak nasıl yapabileceğimizi ileride göreceğiz.

PWA Özelliklerini Uygulama

Angular CLI v6, mevcut bir Angular uygulamasına hızlı bir şekilde PWA özellikleri eklemenize olanak tanır. Terminalinizde projenin kökünden aşağıdaki komutu çalıştırarak uygulamanızı bir PWA'ya dönüştürebilirsiniz:

 $ ng add @angular/pwa

Komut, Angular uygulamamıza aşağıdakiler gibi otomatik olarak PWA özellikleri ekler:

• Bir manifest.json dosyası,
• src/assets/icons klasöründe farklı boyutlarda simgeler,
• ngsw-worker.js hizmet çalışanı.

Üretim yapısını içeren dist/ klasörünü açın. Çeşitli dosyalar bulacaksınız, ancak yukarıda bahsettiğimiz PWA özellikleri ile ilgili dosyalara odaklanalım:

Aşağıdaki içeriğe sahip bir manifest.json dosyası eklendi:

 { "name": "pwademo", "short_name": "pwademo", "theme_color": "#1976d2", "background_color": "#fafafa", "display": "standalone", "scope": "/", "start_url": "/", "icons": [ { "src": "assets/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "assets/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "assets/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "assets/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "assets/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "assets/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "assets/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "assets/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ] }

Gördüğünüz gibi, eklenen manifest.json dosyası, ad, açıklama ve start_url vb. gibi bir PWA'nın gerektirdiği tüm bilgileri içerir.

manifest.json dosyası, assets/icons klasörüne otomatik olarak eklenen farklı boyutlardaki simgelere bağlantı sağlar. Elbette, PWA'nızın son sürümünü oluşturmaya hazır olduğunuzda bu simgeleri kendiniz değiştirmeniz gerekecektir.

index.html dosyasında, manifest.json dosyasına şu şekilde başvurulur:

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

Servis çalışanını içeren ngsw-worker.js dosyası da otomatik olarak eklendi. Bu hizmet çalışanını yüklemek için gereken kod, src/app/app.module.ts dosyasına otomatik olarak eklenir:

 ... import { ServiceWorkerModule } from '@angular/service-worker'; @NgModule({ declarations: [ AppComponent ], imports: [ ... ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }) ],

@angular/service-worker , ng add komutuyla yüklenir ve pwademo/package.json bağımlılık olarak eklenir:

 "dependencies": { ... "@angular/service-worker": "^6.1.0" }

Hizmet çalışanı oluşturma desteği de CLI'de etkinleştirilir. angular.json dosyasında bir "serviceWorker": true yapılandırma seçeneği eklenir.

index.html dosyasında, theme-color için #1976d2 değerine sahip bir meta etiket eklenir (aynı zamanda manifest.json dosyasındaki theme_color değerine de karşılık gelir):

 <meta name="theme-color" content="#1976d2">

Tema rengi, tarayıcıya adres çubuğu gibi kullanıcı arabirimi öğelerinin hangi renge boyanacağını söyler.

Tema renginin hem index.html hem de manifest.json dosyalarına eklenmesi, Adres Çubuğu Marka Renkleriyle Eşleşiyor denetimini düzeltir.

Servis Çalışanı Yapılandırma Dosyası

Projeye başka bir dosya src/ngsw-config.json eklendi ancak PWA'lar için gerekli bir dosya değil. Bu, Angular hizmet çalışanının hangi dosyaları ve veri URL'lerini önbelleğe alacağını ve önbelleğe alınmış dosya ve verileri nasıl güncellemesi gerektiğini belirtmenize olanak tanıyan bir yapılandırma dosyasıdır. Bu dosyayla ilgili tüm detayları resmi belgelerden bulabilirsiniz.

Not : Bu yazı itibariyle, en son 6.1.3 ile önceki ng add @angular/pwa komutu bu hatayla başarısız olacaktır: Path “/ngsw-config.json” already exists , bu yüzden şimdilik çözüm @angular/cli sürümünü düşürmektir. ve @angular/pwa 6.0.8 sürümüne.

Projenizde aşağıdaki komutları çalıştırmanız yeterlidir:

 $ npm i @angular/[email protected] $ ng i @angular/[email protected] $ ng add @angular/pwa

Şimdi yerel olarak barındırılan yerel PWA'mıza karşı denetimleri yeniden çalıştıralım. Bu yeni PWA puanı:

Angular CLI, Aşamalı Geliştirme bölümünde bahsettiğimiz JavaScript yedek kodunu otomatik olarak eklemez, bu nedenle src/index.html dosyasını açın ve ekleyin:

 <noscript> Please enable JavaScript to run this application. </noscript>

Ardından, uygulamanızı yeniden oluşturun ve denetimleri yeniden çalıştırın. Şimdi sonuç bu:

HTTPS yönlendirmesiyle ilgili yalnızca bir başarısız denetimimiz var. Uygulamayı barındırmamız ve HTTP'yi HTTPS yönlendirmesine yapılandırmamız gerekiyor.

Şimdi denetimleri PWA'mızın barındırılan ve güvenli bir sürümüne karşı çalıştıralım.

¹⁰⁰ ⁄ ₁₀₀ puan alıyoruz, bu da PWA'ların tüm temel ilkelerini başarıyla uyguladığımız anlamına geliyor.

Bu PWA demosunun son kodunu bu GitHub deposundan alabilirsiniz.

Çözüm

Bu eğitimde, basit bir Angular uygulaması oluşturduk ve onu Angular CLI kullanarak bir PWA'ya dönüştürdük. Uygulamamızı PWA özelliklerine denetlemek için Google'ın Deniz Feneri'ni kullandık ve çevrimdışı destek ve anında iletme bildirimleri eklemek için Hizmet Çalışanları gibi PWA'ların çeşitli temel ilkelerini açıkladık. Ana ekrana ekleme ve açılış ekranı özelliklerini etkinleştirmek için Web Manifest dosyası, Aşamalı Geliştirme ve HTTPS .

Ayrıca vurgulanan diğer öğeleri ("Manuel olarak kontrol edilecek ek öğeler" bölümünün altında) manuel olarak kontrol etmeniz gerekebilir, ancak Lighthouse tarafından otomatik olarak kontrol edilmez. Bu kontroller, Google'ın temel PWA Kontrol Listesi tarafından istenmektedir. PWA puanını etkilemezler ancak bunları manuel olarak doğrulamanız önemlidir. Örneğin, sitenizin tarayıcılar arası çalıştığından ve her sayfanın sosyal medyada paylaşılabilirlik amacıyla önemli olan bir URL'ye sahip olduğundan emin olmanız gerekir.

PWA'lar aynı zamanda daha iyi algılanan performans ve erişilebilirlik gibi diğer yönlerle de ilgili olduğundan, Lighthouse'u PWA'nızı (veya herhangi bir genel web sitesini) bu yönlerden denetlemek ve gerektiğinde geliştirmek için de kullanabilirsiniz.