{"id":10358,"date":"2022-09-16T14:03:22","date_gmt":"2022-09-16T12:03:22","guid":{"rendered":"https:\/\/vived.io\/?p=10358"},"modified":"2022-09-19T13:16:22","modified_gmt":"2022-09-19T11:16:22","slug":"safari-z-wsparciem-dla-web-push-notifications-frontend-weekly-vol-105","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/safari-z-wsparciem-dla-web-push-notifications-frontend-weekly-vol-105\/","title":{"rendered":"Safari z wsparciem dla Web Push Notifications – Frontend Weekly vol. 105"},"content":{"rendered":"\n

1. Safari 16.0<\/h2>\n\n\n\n

Poci\u0105gi releas\u00f3w (nie przekonacie mnie do zaprzestania nieudolnego t\u0142umaczenia angielskich zwrot\u00f3w) maj\u0105 w\u0142a\u015bciwie same zalety. Nowe funkcjonalno\u015bci dostarczane s\u0105 regularnie, a zmiany s\u0105 niewielkie i \u0142atwo si\u0119 do nich dostosowa\u0107. Niestety wraz z powolnym i stabilnym wzrostem znika ekscytacja dotycz\u0105ca nowo\u015bci. Wi\u0119kszo\u015b\u0107 zmian nabiera znaczenia dopiero kiedy spojrzymy na nie z perspektywy kilku releas\u00f3w. Mamy tu do czynienia z ewolucj\u0105, a nie rewolucj\u0105. <\/p>\n\n\n\n

Jednym z dobrych przyk\u0142ad\u00f3w tego, jak rzadkie du\u017ce releasy wzbudzaj\u0105 zainteresowanie, jest polityka releas\u00f3w Apple. W sieci bardzo rzadko czyta si\u0119 o nowo\u015bciach w kolejnych wersjach Windows czy Chrome, a artyku\u0142y o nowym iOS, macOS i Safari rozchodz\u0105 si\u0119 wr\u0119cz viralowo. R\u00f3\u017cnica polega na tym, \u017ce te pierwsze stosuj\u0105 poci\u0105g releas\u00f3w, a te drugie publikuj\u0105 du\u017ce zmiany raz do roku.<\/p>\n\n\n\n

Ko\u0144cz\u0105c m\u00f3j przyd\u0142ugawy wyw\u00f3d na temat releasowania aplikacji, w minionym tygodniu w r\u0119ce u\u017cytkownik\u00f3w trafi\u0142o wreszcie Safari 16. Mo\u017ce i nie znajdziecie tutaj zbyt wielu rewolucyjnych funkcjonalno\u015bci, ale za to do Internet Explorera naszych czas\u00f3w trafi\u0142o sporo funkcjonalno\u015bci, kt\u00f3re w innych przegl\u0105darkach znajdziecie ju\u017c od dawna. Zapnijcie pasy, bo wyruszamy na kr\u00f3tk\u0105 wycieczk\u0119 po zmianach w Safari 16.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Web Push Notifications (na razie na macOS, ale wkr\u00f3tce r\u00f3wnie\u017c na iOS)<\/h3>\n\n\n\n

Wiecie, \u017ce to Apple wymy\u015bli\u0142o koncepcj\u0119 instalowanych aplikacji PWA? Niestety, gdzie\u015b po drodze firma zorientowa\u0142a si\u0119, \u017ce nad aplikacjami tego typu nie da si\u0119 sprawowa\u0107 kontroli (np. wymusza\u0107 p\u0142atno\u015bci przez Apple Pay) ani pobiera\u0107 od nich nale\u017cnego c\u0142a. Nigdy nie zosta\u0142o to potwierdzone oficjalnie, ale to prawdopodobnie w\u0142a\u015bnie z tego powodu przycisk instalacji PWA na iOS jest tak skrz\u0119tnie ukryty. R\u00f3wnie\u017c z tego powodu do Safari nigdy nie trafi\u0142y Web Push Notifications, czyli jeden z najwa\u017cniejszych wyr\u00f3\u017cnik\u00f3w aplikacji mobilnych. Apple jak to Apple, oficjalnie t\u0142umaczy\u0142o si\u0119 dobrem swoich u\u017cytkownik\u00f3w. W ko\u0144cu aplikacje w AppStore przechodz\u0105 skomplikowany proces akceptacji, a w internecie ka\u017cdy mo\u017ce opublikowa\u0107 s\u0142ab\u0105, albo co gorsza z\u0142o\u015bliw\u0105 aplikacj\u0119.<\/p>\n\n\n\n

Jak mo\u017cna domy\u015bli\u0107 si\u0119 z nag\u0142\u00f3wka, do Safari 16 trafi\u0142y w\u0142a\u015bnie Web Push Notifications. Co sk\u0142oni\u0142o firm\u0119 do zaimplementowania tej funkcjonalno\u015bci po prawie 7 latach od czasu kiedy po raz pierwszy pojawi\u0142y si\u0119 one u konkurencji? No c\u00f3\u017c, Apple ponownie milczy w tej sprawie, ale internet jak zwykle internet ma swoje zdanie na ten temat. Apple w ostatnich latach coraz wi\u0119kszy nacisk stawia na oferty us\u0142ugi, jak na przyk\u0142ad Apple Music, Apple TV, czy Apple Fitness. Je\u015bli zyski firmy maj\u0105 by\u0107 nastawione na us\u0142ugi, to nic nie stoi na przeszkodzie, aby troch\u0119 poluzowa\u0107 polityk\u0119 w ramach sklepu.<\/p>\n\n\n\n

Innym powodem mo\u017ce by\u0107 wdra\u017cany przez Uni\u0119 Europejsk\u0105 Digital Marketing Act, kt\u00f3rego celem jest wprowadzenie kontroli nad technologicznymi monopolistami. W jego ramach Apple mo\u017ce by\u0107 zmuszone na przyk\u0142ad do dodania portu USB C do swoich telefon\u00f3w, u\u0142atwienie u\u017cytkownikom dost\u0119pu do nie-domy\u015blnych aplikacji czy do wdro\u017cenia brakuj\u0105cych standard\u00f3w w ich oprogramowaniu. Co prawda ustawodawstwo to nie wesz\u0142o jeszcze oficjalnie w \u017cycie, ale by\u0107 mo\u017ce Apple postanowi\u0142 w tej kwestii zadzia\u0142a\u0107 troch\u0119 reaktywnie.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Container Queries<\/h3>\n\n\n\n

O Container Queries w internecie napisane zosta\u0142o ju\u017c chyba wszystko. Od kiedy kilka lat temu do sieci trafi\u0142y pierwsze szkice API, wszyscy frontend deweloperzy zakochali si\u0119 po uszy i z niecierpliwo\u015bci\u0105 czekali, a\u017c trafi\u0105 one w ich r\u0119ce. Ten moment w\u0142a\u015bnie nadszed\u0142 bo zar\u00f3wno Chrome 105 jak i Safari 16 obs\u0142uguj\u0105 t\u0105 technologi\u0119. Niestety w Firefox wci\u0105\u017c nie wida\u0107 jej na horyzoncie (i kto tu teraz jest IE naszych czas\u00f3w), ale na szcz\u0119\u015bcie od jakiego\u015b czasu dost\u0119pny jest dzia\u0142aj\u0105cy przyzwoicie polyfill.<\/p>\n\n\n\n

Czym s\u0105 Container Queries? Na pewno w swojej karierza chocia\u017c raz korzystali\u015bcie z Media Queries, kt\u00f3re pozwalaj\u0105 nam przygotowa\u0107 r\u00f3\u017cny zbi\u00f3r CSS\u00f3w w zale\u017cno\u015bci od wysoko\u015bci czy szeroko\u015bci ekranu. Container Queries to takie Media Queries, tylko, \u017ce umo\u017cliwiaj\u0105 one obserwowanie parametr\u00f3w dowolnego elementu HTML. Je\u015bli szukacie dobrego \u017ar\u00f3d\u0142a wprowadzaj\u0105cego w tajniki Container Queries, to ja gor\u0105co polecam <\/span>ten artyku\u0142<\/span><\/a>.<\/span><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Web Inspector Extensions<\/h3>\n\n\n\n

Nie znam nikogo, kto na co dzie\u0144 do developmentu korzysta\u0142by z Safari. Pewnie to dlatego, jest to przegl\u0105darka na kt\u00f3rej najcz\u0119\u015bciej do\u015bwiadczy\u0107 mo\u017cna drobnych bug\u00f3w i glitchy. Safari 16 wprowadza szereg usprawnie\u0144, je\u015bli chodzi narz\u0119dzia do debugowania aplikacji, takich jak chocia\u017cby Flexbox inspector czy Screenshots timeline.<\/p>\n\n\n\n

Absolutna funkcjonalno\u015b\u0107 zab\u00f3jca (jak ju\u017c m\u00f3wi\u0142em, nie przekonacie mnie do rezygnacji z spolszcze\u0144), to natomiast wsparcie dla Web Inspector Extensions – API niezb\u0119dnego do dzia\u0142ania wtyczek od tw\u00f3rc\u00f3w framework\u00f3w i bibliotek. Oznacza to, \u017ce prawdopodobnie doczekamy si\u0119 w ko\u0144cu Angular DevTools czy React Developer Tools dla Safari.<\/p>\n\n\n\n

Osobi\u015bcie raczej nie zamierzam przerzuci\u0107 si\u0119 na co dzie\u0144 do Safari, a inspektor oferowany przez Chrome pozostaje dla mnie niezast\u0105piony. Natomiast dzi\u0119ki ma\u0142ym usprawnieniom w Safari 16, kr\u00f3tkie wycieczki do przegl\u0105darki od Apple na potrzeby test\u00f3w i naprawy b\u0142\u0119d\u00f3w, b\u0119d\u0105 troch\u0119 przyjemniejsze.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Passkeys<\/h3>\n\n\n\n

Passkeys to technologia, kt\u00f3ra mo\u017ce s\u0142u\u017cy\u0107 jako alternatywa dla hase\u0142, kt\u00f3ra pozwala logowa\u0107 si\u0119 na podstawie potwierdzenia to\u017csamo\u015bci dostarczonego przez nasze urz\u0105dzenie. Pod spodem ca\u0142o\u015b\u0107 przy rejestracji tworzy klucz kryptograficzny zapisywany na urz\u0105dzeniu, kt\u00f3ry potem wykorzystywany jest do autentykacji. Ca\u0142o\u015b\u0107 jest bardziej funkcjonalno\u015bci\u0105 macOS 16 i iOS 16, ale Safari 16 dosta\u0142o wszystkie niezb\u0119dne do obs\u0142ugi nowego mechanizmy API. Nie wiem, czy zamierzacie doda\u0107 nowy spos\u00f3b logowania do Waszych aplikacji, ale z perspektywy u\u017cytkownika wygl\u0105da to naprawd\u0119 ciekawie (dow\u00f3d poni\u017cej)<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n

https:\/\/webkit.org\/blog\/13152\/webkit-features-in-safari-16-0\/<\/a><\/p>\n\n\n\n

2. MemLab: Wycieki pami\u0119ci? – nigdy wi\u0119cej!<\/h2>\n\n\n\n

Zanim przejdziemy do sedna, chcia\u0142bym podzieli\u0107 si\u0119 z Wami ma\u0142\u0105 \u0142amig\u0142\u00f3wk\u0105. Czy poni\u017cszy kod zawiera wyciek pami\u0119ci?<\/p>\n\n\n\n

var obj = {};\nconsole.log(obj);\nobj = null;<\/code><\/pre>\n\n\n\n
Jak to cz\u0119sto w programowaniu bywa, poprawna odpowied\u017a brzmi – to zale\u017cy. Okazuje si\u0119, \u017ce niekt\u00f3re \u015brodowiska (np. Chrome), nigdy nie zwolni\u0105 z pami\u0119ci obiekt\u00f3w, kt\u00f3re zosta\u0142y wy\u015bwietlone w konsoli. Na pierwszy rzut oka mo\u017ce wydawa\u0107 si\u0119 to podejrzane, ale z drugiej strony niesamowicie u\u0142atwia debugowanie. Gdyby obiekt wy\u015bwietlony w konsoli by\u0142 czyszczony z pami\u0119ci nie mogliby\u015bmy \u0142atwo si\u0119 do niego dobra\u0107 i manipulowa\u0107 nim wed\u0142ug w\u0142asnego widzimisi\u0119.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
MemLab to narz\u0119dzie kt\u00f3rego Facebook u\u017cywa do wykrywania i monitorowania wyciek\u00f3w pami\u0119ci w aplikacjach. Ich monitorowanie jest o tyle wa\u017cne, \u017ce zazwyczaj drobne wycieki nie maj\u0105 wp\u0142ywu na wydajno\u015b\u0107 aplikacji i pozostaj\u0105 niezauwa\u017cone. Kiedy jednak korzystamy z aplikacji d\u0142u\u017cej, drobne wycieki kumuluj\u0105 si\u0119, doprowadzaj\u0105c do powolnego obni\u017cenia wydajno\u015bci i ostecznie do OutOfMemoryException. Problem polega na tym, \u017ce podczas rozwijania aplikacji bardzo rzadko symulujemy tak d\u0142ugie sesje. Nawet je\u015bli takie sesje przytrafi\u0105 nam si\u0119 od czasu do czasu, to zazwyczaj maj\u0105 one miejsce na wydajnym komputerze i bardzo \u0142atwo jest nam ignorowa\u0107 drobne spowolnienia.<\/p>\n\n\n\n
MemLab dzia\u0142a w stosunkowo prosty spos\u00f3b. Przy pomocy Puppeteera uruchamia on przegl\u0105dark\u0119, nawiguje na stron\u0119 g\u0142\u00f3wn\u0105 aplikacji oraz wykonuje snapshot stosu JavaScript. Nast\u0119pnie wykonywana jest nawigacja na testowan\u0105 podstron\u0119 i po raz kolejny zapisywany jest snapshot stosu JavaScript. Ostatni krok to powr\u00f3t na stron\u0119 g\u0142\u00f3wn\u0105 oraz wykonanie jeszcze jednego snapshotu. Na podstawie por\u00f3wnania trzech snapshot\u00f3w stosu JavaScript, MemLab jest w stanie wykry\u0107 potencjalne wycieki pami\u0119ci.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Poza wykrywaniem wyciek\u00f3w pami\u0119ci, MemLab oferuje te\u017c swego rodzaju debugger stosu JavaScript. Pozwala on przekszta\u0142ci\u0107 stos obiekt\u00f3w do postaci grafu zale\u017cno\u015bci. Dzi\u0119ki temu znalezienie obiektu, kt\u00f3ry przechowuje nadmiarowe referencje staje si\u0119 du\u017co \u0142atwiejsze.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
W minionym tygodniu Facebook upubliczni\u0142 MemLab jako narz\u0119dzie OpenSource. Nie wiem jak Wy, ale ja ju\u017c nie mog\u0119 doczeka\u0107 si\u0119, a\u017c znajd\u0119 chwil\u0119, \u017ceby pobawi\u0107 si\u0119 nim osobi\u015bcie. <\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/engineering.fb.com\/2022\/09\/12\/open-source\/memlab\/<\/a><\/p>\n\n\n\n
3. React Router 6.4<\/h2>\n\n\n\n
React Router jest de facto standardow\u0105 bibliotek\u0105 do routingu w React. Prawie rok temu doczeka\u0142 si\u0119 on 6 wersji i tradycyjnie dla ju\u017c tej biblioteki, pe\u0142ny by\u0142 breaking changes. Trzeba jednak przyzna\u0107, \u017ce wprowadzi\u0142 te\u017c kilka interesuj\u0105cych nowo\u015bci, na zawsze zako\u0144czy\u0142 \u017cywot alternatywnego `reach-router` i postawi\u0142 podwaliny pod budow\u0119 Remixa (w sporym uproszczeniu alternatywy dla Next.js).\n<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
React Router 6.4 to pierwsze od tego czasu werska biblioteki, kt\u00f3re wprowadza interesuj\u0105ce nowo\u015bci. Zacznijmy od zgrabnego API, do obs\u0142ugi asynchronicznego \u0142adowania danych. Sk\u0142ada si\u0119 ono z propsa `loader` dodanego do komponentu `<\/route>` oraz hooka `useLoaderData()`.  Dane potrzebne do za\u0142adowania wszystkich dopasowanych \u015bcie\u017cek pobierane s\u0105 r\u00f3wnolegle, a biblioteka dba o to, \u017ceby dane nie by\u0142y pobierane kilkukrotnie. Ponadto react-router pozwala teraz na  wykorzystanie Suspense z React 18, aby zoptymalizowa\u0107 proces renderowania.<\/p>\n\n\n\n
<Route\n  path="\/"\n  loader={async ({ request }) => {\n    const res = await fetch("\/api\/user.json", {\n      signal: request.signal,\n    });\n    const user = await res.json();\n    return user;\n  }}\n  element={<Root \/>}\n>\n  <Route\n    path=":teamId"\n    loader={({ params }) => {\n      return fetch(`\/api\/teams\/${params.teamId}`);\n    }}\n    element={<Team \/>}\n  >\n<\/Route>\n\nfunction Root() {\n  const user = useLoaderData();\n  \/\/ data from <Route path="\/">\n}\n\nfunction Team() {\n  const team = useLoaderData();\n  \/\/ data from <Route path=":teamId">\n}<\/code><\/pre>\n\n\n\n
Nieodzown\u0105 cz\u0119\u015bci\u0105 asynchronicznego \u0142adowania danych jest obs\u0142uga b\u0142\u0119d\u00f3w. Tej te\u017c nie zabrak\u0142o w nowym react-router.<\/p>\n\n\n\n
<Route\n  path="\/"\n  loader={() => {\n    somethingThatThrowsAnError();\n  }}\n  \/\/ this will not be rendered\n  element={<HappyPath \/>}\n  \/\/ but this will instead\n  errorElement={<ErrorBoundary \/>}\n\/><\/code><\/pre>\n\n\n\n
Ostatnia spora nowo\u015b\u0107 to obs\u0142uga formularzy. Jak twierdz\u0105 tw\u00f3rcy biblioteki, mutacja danych przez formularze HTML powinna by\u0107 wydarzeniem routingu. Ci\u0119\u017cko si\u0119 z nimi nie zgodzi\u0107 – natywne formularze zbudowane zosta\u0142y zbudowane tak, aby wraz z ich zaakceptowaniem wysy\u0142a\u0107 zapytanie do serwera, kt\u00f3re przenosi u\u017cytkownika na now\u0105 stron\u0119. Standardowe obecnie rozwi\u0105zania z wywo\u0142ywaniem `event.preventDefault()`, s\u0105 wi\u0119c sporym hakiem, a nawigacj\u0105 na now\u0105 stron\u0119 by\u0142oby rozwi\u0105zaniem zdecydowanie bli\u017cszym oryginalnej architektury.<\/p>\n\n\n\n
Od teraz react-router b\u0119dzie w stanie dopasowa\u0107 zapytania typu POST, PUT i PATCH, do zdefiniowanych \u015bcie\u017cek. Nast\u0119pnie wywo\u0142ana zostanie funkcja przekazana do \u015bcie\u017cki jako props action.\n<\/p>\n\n\n\n
\u200b\u200b<Route\n  path="\/song\/:songId\/edit"\n  element={<EditSong \/>}\n  action={async ({ params, request }) => {\n    let formData = await request.formData();\n    return fakeUpdateSong(params.songId, formData);\n  }}\n\/>\n\nfunction EditSong() {\n  return (<Form method="post" action="\/songs\/123\/edit" \/>)\n}<\/code><\/pre>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/remix.run\/blog\/react-router-v6.4<\/a><\/p>\n\n\n\n
Bonus #1: Adobe kupuje Figm\u0119!<\/h2>\n\n\n\n
Na pewno kojarzycie Figm\u0119, czyli narz\u0119dzie do tworzenia designu aplikacji. Na przestrzeni ostatnich kilku lat sta\u0142o si\u0119 ono w\u0142a\u015bciwie rynkowym standardem. By\u0142o to troch\u0119 nie na r\u0119k\u0119 Adobe, kt\u00f3re do tej pory w\u0142a\u015bciwie posiada\u0142o monopol w tej kategorii. Z tego wzgl\u0119du postanowili oni zakupi\u0107 m\u0142odego potentata.<\/p>\n\n\n\n
Z notatki informuj\u0105cej o przej\u0119ciu dowiadujemy si\u0119, \u017ce tak naprawd\u0119 z perspektywy klient\u00f3w niewiele si\u0119 zmieni. Z perspektywy firmy pojawia si\u0119 natomiast szansa na przyspieszenie rozwoju i skorzystanie z wiedzy Adobe na temat video, 3d czy sztucznej inteligencji, <\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/www.figma.com\/blog\/a-new-collaboration-with-adobe\/<\/a><\/p>\n\n\n\n
Bonus #2: ng-cong 2022 Angular Team Keynote<\/h2>\n\n\n\n
Pocz\u0105tkiem wrze\u015bnia w Salt Lake City mia\u0142a miejsce najwi\u0119ksza i najwa\u017cniejsza Angularowa konferencja – ng-conf 2022. Niestety, nie wszystkie prezentacje s\u0105 ju\u017c dost\u0119pne na YouTube. Dost\u0119pny jest ju\u017c natomiast Angular Team Keynote, kt\u00f3ry jest \u015bwietnym miejscem je\u015bli chcecie przypomnie\u0107 sobie co w ostatnich miesi\u0105cach zmieni\u0142o si\u0119 w Angularze i jakich zmian mo\u017cemy oczekiwa\u0107 w kilku kolejnych.<\/p>\n\n\n\n
\n