Temat Apple i Safari wraca do nas jak bumerang. Tym razem na tapet bierzemy temat aplikacji PWA, bo wygląda na to, że firma z Cupertino postanowił na poważnie zainteresować się tematem. Poza tym, w dzisiejszym raporcie przeczytacie też o alternatywie* dla RxJS od zespołu Angulara.
1. Paczka nowości w Safari
TLDR:
- Do Safari 16.4 zmierza wsparcie Web Push Notifications
- Web Push Notifications będą działać tylko dla aplikacji dodanych do ekranu głównego.
- Dodawanie aplikacji do ekranu głównego nadal pozostaje ukryte w ciężkodostępnym miejscu.
- Ustawieniami aplikacji PWA będziemy zarządzać w taki sam sposób, jak tych pobranych z AppStore.
- Do najnowszego Safari trafia też sporo ważnych z punktu widzenia API. Między innymi Badge API, WakeLock API, UserActivation API czy ScreenOrientation API.
W kontekście Safari i aplikacji webowych w Apple zaszła ostatnio gigantyczna zmiana. Przez lata przeglądarka na urządzenia z jabłuszkiem uznawana była za Internet Explorer naszych czasów, a programiści nieustannie narzekali na brakujące funkcjonalności i drobne glitche. Interop 2022, to wypracowany przez Google, Mozillę i Apple zestaw testów mających na celu ujednolicenie API przeglądarek. W rankingu tym Safari zakończyło rok ze sporą przewagą nad Chrome i Firefox i zapowiedziało dalszą pracę nad jak najlepszym wynikiem w ramach Interop 2023. Wszystko wskazuje na to, że nie były to puste słowa. W minionym tygodniu ukazała się beta iOS 16.4. i iPadOS 16.4, a wraz z nią beta nowego Safari. Lista zmian i nowości jest naprawdę długa – najdłuższha od lat.
Największa nowość w iOS 16.4, to zapowiedziane już w czerwcu minionego roku wsparcie dla Web Push Notifications. Dlaczego Apple tak długo zwlekało z implementacją tej fundamentalnej dla PWA funkcjonalności? Oficjalnie chodziło o dobro użytkowników (Kto nigdy przez przypadek nie włączył nachalnych notyfikacji niech pierwszy rzuci kamieniem) W kuluarach krąży jednak alternatywna teoria. Apple od każdej tranzakcji w swoim sklepie pobiera sporą prowizję, a w pełni rozwinięte aplikacje PWA byłyby sposobem na uniknięcie tak zwanego Apple Tax. Apple może usunąć niechcącego podporządkować się regułom Fortnite z App Store, ale nie ma władzy usunąć go z internetu.
Co więc zmieniło się w strategii Apple? Z jednej strony firma w ostatnich latach coraz mocniej rozwija gałąź serwisów-usług jak Apple Music czy Apple TV i powoli odchodzi od prowizyjnego modelu zarabiania. Z drugiej strony na horyzoncie majaczy wprowadzona przez Unię Europejską ustawa Digital Markets Act, która ma na celu zwiększenie konkurencji na europejskich rynkach cyfrowych, poprzez uniemożliwienie dużym firmom nadużywania ich siły rynkowej. Spekuluje się, że ustawa ta zmusi Apple do dodania portu USB-C do iPhone i do dopuszczenia alternatywnych sklepów z aplikacjami na iOS. Jeśli spekulacje te okażą się prawdziwe, automatycznie znikną argumenty Apple przeciwko PWA.
Więcej o zmieniającej się strategii Apple dowiecie się z:
📝 Safari with support for Web Push Notifications | Frontend Weekly vol. 105
📝 The end of the WebKit monopoly on iOS? | Frontend Weekly vol. 124
📝 New EU Law Could Force Apple to Allow Other App Stores, Sideloading, and iMessage Interoperability
📝 Web Push for Web Apps on iOS and iPadOS
Czy czeka nas renesans aplikacji PWA? Niestety muszę ostudzić optymistyczne nastroje. Wsparcie Web Push Notifications opatrzone jest gwiazdką – funcjonalność ta będzie działać tylko jeśli aplikacja została dodana do ekranu głównego. Na pierwszy rzut oka nie brzmi to niepokojąco, ale dodawanie aplikacji do ekranu głównego nadal schowane jest w najmniej intuicyjnym miejscu jakie możecie sobie wyobrazić – w menu pojawiającym po kliknięciu przycisku Share. Jasne, w Waszej aplikacji możecie umieścić odpowiedni tutorial, ale obawiam się że wszystko powyżej „One-Click Install” zniechęci większość użytkowników.
Jedno trzeba Apple przyznać – przy okazji implementacji Web Push Notifications naprawdę zadbali oni o swoich użytkowników. Ustawieniami aplikacji dodanych do ekranu głownego będziemy sterować tak samo jak w przypadku natywnych aplikacji z poziomu ustawień. Również zakres ustawień będzie taki sam jak dla aplikacji pobranych ze sklepu. Dzięki temu, różnica między PWA i natywną aplikacją powinna być niezauważalna dla użytkowników.
Wsparciu Web Push Notifications towarzyszy też szereg mniejszych funkjonalności wspierających. Od iOS 16.4 możliwe będzie sterowanie badgem wyświetlanym przy aplikacji. Zmieni się też sposób generownia ikony aplikacji. Do tej pory jeśli programiści nie dostarczyli specjalnych apple-touch-icons, to za ikonę aplikacji służył screenshot strony. Od teraz w przypadku braku apple-touch-icons wykorzystywane będą dane z manifest.json. Kiedy zabraknie również ich, za ikonę aplikacji posłużą inicjały aplikacji.
To jeszcze nie koniec nowości Do iOS 16.4 trafić ma Wake Lock API, które pozwala opóźnić zablokowanie ekranu jeśli aktualnie wykonywana jest długa operacjia nie wymagająca interakcji użytkownika, Screen Orientation API, które pozwala nam się dowiedzieć w jakiej orientacji znajduje się aktualnie telefon i User Activation API, które pozwala się dowiedzieć, czy użytkownik aktualnie korzysta z aplikacji. Jak na wersję minor przeglądarki nowości jest nawprawdę dużo.
Odkryj więcej treści IT dopasowanych do Ciebie
W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!
Zainstaluj teraz i czytaj tylko dobre teksty!
2. To już koniec RxJS? Angular pracuje nad nowym modelem reaktywności
TLDR:
- Zespół rozwijający Angulara pracował przez ostatni rok nad opcjonalnym wycięciem
zone.js. Pierwszym krokiem w tym kierunku ma być nowy reaktywny prymityw Signals. - Pierwsze Developer Preivew Signals zobaczymy początkiem maja w Angular 16. Pierwszych rozbudowanych RFC należy się spodziewać w najbliższych tygodniach.
- Prymity Signals kojarzyć możecie z innych frameworków takich jak SolidJS czy Vue.
- Singals są znacznie prostsze od RxJS i przypominają hooki znane z React.
- RxJS najlepiej sprawdza się do obsługi wydarzeń rozłożonych w czasie. Signals mają najlepiej spradzać się do zarządzania stanem komponentów.
Od dawna wiadomo było, że zespół Angulara pracuje nad pozbyciem się biblioteki stojącej u podstaw frameworku – zone.js. Biblioteka ta odpiwiedzialna jest za monkey-patching natywnych metod przeglądarki (np. click, fetch), tak aby Angular mógł zareagować na interakcje użytkownika i asynchroniczne zdarzenia. To właśnie dzięki zone.js możemy imperatywnie zmienić wartość zmiennej i automatycznie odświeży się ona w interfejscie użytkownika. Niestety, to również zone.js jest sprawcą wielu problemów z wydajnością i częstą przyczyną bugów. Nic więc dziwnego, że zespół Angulara aktywnie eksploruje jego alternatywy.
Pierwszym krokiem w kierunku usunięcia zone.js ma być wprowadzenie nowe prymitywu: Signals. Prymityw ten możecie kojarzyć między innymi z Vue (Reactivity API z Vue 3 może być uznane za implementację Signals), SolidJS (domyślnie do zarządzania stanem używamy useSignal()), czy z licznych bibliotek dla React (najpopularniejszą jest chyba ta stworzona przez twórcę Preact).
Signal to takie „pudełko” na wartość. Do pudełka możemy dowolnie wkłądać nową zawartość, ale samo pudełko pozostaje takie samo. Z pudełek możemy też tworzyć „matrioszki” – za każdym razem kiedy w jakimś pudełku zmieni się wartość, automatycznie odśiweży się ona również w pozostałych pudełkach. Możemy też nasłuchiwać na zmiany zawartości pudełka, czy po prostu sprawdzić co aktualnie znajduje się w pudełku.
const counterA = signal(2);
const counterB = signal(5);
const sumOfCounterAandB = computed(() => counterA() + counterB());
const sideEffect = effect(() =>
console.log(`Sum is: ${sumOfCounterAandB()}`
); // Console output: Sum is: 7
counterA.set(3); // Console output: Sum is: 8
console.log(sumOfCounterAandB()); // Console output: Sum is: 8
counterB.set(10); // Console output: Sum is: 13Więcej o koncepcji Signals dowiecie się z:
📝 Signal – a new way to manage application state | Frontend Weekly vol. 104
📝 Preact – Introducing Signals
📝 SolidJS – Introducing Signals
Dzięki temu, że referencja do naszego pudełka nigdy się nie zmienia, możliwa jest agresywna optymalizacja renderowania. Szablon obesrwuje zmiany w interesujących go pudełkach i odpowiednio odświeża HTML. Komponenty na dowolnym poziomie mogą obserwować zawartość pudełek, dzięki czemu unikamy sytuacji w której zmiana stanu przy korzeniu drzewa odświeża całe drzewo. Mamy też wbudowany mechanizm subskrybcji na zmiany, więc zone.js nie jest nam już dłużej potrzebny.
Jeśli nacodzień korzystacie z Angulara, to pewnie już przyszło Wam do głowy pytanie, czym właściwie różni się to wszystko od RxJS? Powyższy snippet można w końcu przepisać w następujący sposób:
const counterA$ = new BehaviourSubject(2);
const counterB$ = new BegaviourSubject(5);
cost sumOfCounterAandB$ = combineLatest([counterA$, counterB$]).pipe(shareReplay(1));
const getSum = async () => `Sum is: ${await firstValueFrom(sumOfCounterAandB$)}`;
sumOfCounterAandB.subscribe(value =>
console.log(`Sum is: ${value}`)
); // Console output: Sum is: 7
counterA$.next(3); // Console output: Sum is: 8
console.log(getSum()); // Console output: Sum is: 8
counterB$.next(10); // Console output: Sum is: 13Jeśli macie już spore doświadczenie z RxJS, to prawdopodobnie oba przedstawione snippety są dla Was równie czytelne. Gwarantuję Wam jednak, że dla osób niezaznajomionych z RxJS wydarzyło się właśnie sporo czarnej magii. Czym jest BehaviourSubject i czym różni się od Subject? Jak działa combineLatest i co właściwie robi shareReplay(1)? Kiedy właściwie wywoływana jest funkcja sumująca? Na RxJS składa się ponad 50 operatorów, nierzadko różniących się tylko drobnymi detalami. Aby płynnie operować RxJS musimy zrozumieć różnice między hot i cold observables, a także dogłębnie poznać mechanizmy asynchroniczności w JavaScript. Całkiem tego sporo jak na proste sumowanie dwóch zmiennych.
Więcej o RxJS dowiecie się z:
📝 Hot vs Cold Observables
📝 Real World Examples of 5 Common Observable Operators
📝 What’s new in RxJS 7
Jak przyznają twórcy Angulara (i ja zgadzam się z nimi w 100%), RxJS świetnie sprawdza się wszędzie tam, gdzie musimy modelować wydarzenia w czasie. Jeśli chodzi o modelowanie stanu aplikacji, to istnieje sporo lepszych rozwiązań i Signals są jednym z nich. Nie należy spodziewać się, że RxJS całkowicie zniknie z naszych aplikacji. W nasze ręce oddane zostaną po prostu narzędzia, które pozwoli nam wbijać gwoździe młotkiem i wkręcać wkręty śrubokrętem.
Więcej o Signals w Angularze dowiecie się z:
📺 Angular is about to get its most IMPORTANT change in a long time…
📺 SolidJS interviews Angular creators about Signals (5h!)
📝 Angular Proposes Fine-Grained Reactivity With Signals
📝 I changed my mind. Angular needs a reactive primitive
📝 [Watch This Space] Angular Reactivity with Signals
🎮 Angular Signals Demo
Odkryj więcej świetnych treści!
- Rozsądna ilość treści
- Tylko wysoka jakość
- Pełne dopasowanie do Twoich potrzeb!
