PWA power tips

Get your­self 23 tips to en­sure that your mo­bile de­signs are the very best they can be

Web Designer - - Contents -

A host of tips to en­sure that the mo­bile ex­pe­ri­ence is the best it can be.

Pro­gres­sive Web Apps (PWAS) are part of the cur­rent DNA for the mo­bile, web and desk­top app space. Any web­site can now be an in­stal­lable off­line-ca­pa­ble app thanks to new tech­nolo­gies and APIS. They even of­fer sim­i­lar ex­pe­ri­ences to na­tive apps once in­stalled. To pro­vide the best pos­si­ble ex­pe­ri­ence, de­sign­ers need to make an ef­fort to pro­vide a fast and mo­bile-op­ti­mised user ex­pe­ri­ence, help­ing the user to nav­i­gate, in­stall and use their apps. With app store dis­tri­bu­tion sup­port now avail­able, web de­sign pro­fes­sion­als need to pay close at­ten­tion to every sin­gle de­tail when they of­fer a web-based pro­gres­sive app. Here’s how…

1 Un­der­stand the reach of your PWA

To cre­ate the best pos­si­ble ex­pe­ri­ence, test­ing your user in­ter­face in all pos­si­ble user plat­forms is es­sen­tial. While a PWA will work on every browser, to lever­age the ad­van­tages of PWA as a stand­alone, off­line-ca­pa­ble app, there are a list of com­pat­i­ble plat­forms and browsers. On IOS, it will be com­pat­i­ble with iphone, ipod touch, and ipad since IOS 11.3 us­ing just Sa­fari. On Win­dows 10, Mi­crosoft Store will pub­lish your PWA if Bing crawls it. On Chrome­books, they are fully in­stal­lable from Chrome OS 67. On An­droid, the best ex­pe­ri­ence comes with Chrome, but PWAS can also be in­stalled from Sam­sung In­ter­net, Fire­fox, Edge, Opera and UC. On fea­tures phones, KAIOS sup­ports PWAS from an in­ter­nal store. Fi­nally, Chrome for desk­top (Win­dows, macos, and Linux) will have sup­port for in­stal­lable PWAS soon; they’re avail­able to test to­day by en­abling the flag ‘Desk­top PWA’ from chrome://flags.

2 Help the user in­stall the app

When a user browses a site the re­sources from the PWA will be in­stalled thanks to Ser­vice Work­ers, but the app is not in­stalled in the op­er­at­ing sys­tem au­to­mat­i­cally. Not every user will know that in­stal­la­tion is avail­able or how to trig­ger that ac­tion. Pro­mot­ing the ac­tion through a non-in­tru­sive hint might help in­stal­la­tion if you show that ad­vice on the ‘dis­play-mode:’ browser me­dia query. In some browsers, trig­ger­ing the in­stal­la­tion di­a­logue is now pos­si­ble from the web’s user in­ter­face in the form of an ‘In­stall’ menu or but­ton. The ‘be­for­e­in­stall­prompt’ event on the win­dow ob­ject fires when the browser recog­nises a PWA, and it’s ready to show the in­stal­la­tion prompt. Us­ing the event’s ar­gu­ment, the han­dler should can­cel de­fault browser’s be­hav­iour with ‘pre­vent­de­fault()’ and save the ar­gu­ment for later in a global vari­able. When the user clicks on the cus­tom UI el­e­ment, the app should call ‘prompt()’ on the saved vari­able.

3 A new re­spon­sive break­point: Mini mode

Typ­i­cal re­spon­sive break­points ex­pect a min­i­mum view­port of a mo­bile phone – 320 x 400 CSS pix­els. But with PWAS on the desk­top, there is a whole new di­men­sion of break­points we need to con­sider. An in­stalled PWA uses a re­siz­able win­dow of any size, in­clud­ing a tiny wid­get-like size, such as 200 x 100 CSS pix­els. A mini mode can be cre­ated for this unique sit­u­a­tion, which will only ren­der a sum­mary of the con­tent and quick ac­tions for the user to keep it vis­i­ble all the time. Small view­ports don’t end with desk­top PWAS – typ­i­cal KAIOS fea­ture phones sup­port­ing PWAS, such as the lat­est Nokia 8110, are ex­pos­ing a view­port of 240 x 228 on a non-touch screen. And also, from Ap­ple Watch Se­ries 3 with watchos 5, there is a web browser avail­able when the user clicks on a link, ex­pos­ing small view­ports when adding the tag ‘<meta name=”dis­abled-adap­ta­tions” con­tent=”watch”>’.

4 Pro­vide good PWA icons

A PWA will be recog­nis­able by its icon and the short name de­fined in the man­i­fest. On to­day’s plat­forms, only PNG icons are sup­ported. For app stores and launch screens, a 512 x 512 pixel icon is manda­tory, and a 1024 x 1024 ver­sion is rec­om­mended. An­droid uses 48dp trans­par­ent icons; here the res­o­lu­tion de­fines the ac­tual size. On most An­droid de­vices, 192 x 192 (4x den­sity) and 144 x 144 (3x den­sity) will be needed. Adap­tive Icons avail­able from An­droid 8 is a new way to cre­ate icons us­ing a va­ri­ety of shapes to be used across dif­fer­ent de­vice mod­els, but this for­mat is not yet avail­able on PWAS. IOS is en­tirely dif­fer­ent as it doesn’t sup­port trans­par­ent icons. The PWA must sup­ply square icons with no trans­parency and no rounded cor­ners (IOS will round them). And the icons must be de­fined through a ‘<link rel=”ap­ple­touch-icon”>’ el­e­ment in the HTML, and ac­cept the stan­dard sizes prop­erty.

5 Ren­der­ing the right con­tent for other apps

Users of mo­bile de­vices share con­tent on so­cial net­works and mes­sag­ing apps, such as Face­book, Twit­ter or What­sapp. All mo­bile browsers have a share ac­tion item that will trig­ger the na­tive share di­a­logue in the op­er­at­ing sys­tem. A PWA can also use Web­share, so it’s im­por­tant to keep your con­tent com­pat­i­ble to in­crease click op­por­tu­nity. The first im­por­tant def­i­ni­tion you need is the canon­i­cal URL. Some­times apps add data to the URL, such as track­ing in­for­ma­tion or have dif­fer­ent URLS for mo­bile/pwa and desk­top con­tent. The ideal sit­u­a­tion is to share a canon­i­cal URL that will be multi-plat­form; to de­fine that URL a PWA can add a ‘<link rel=”canon­i­cal” href=””>’. Then, Open Graph is the stan­dard of defin­ing meta­data that all so­cial net­works use for cre­at­ing the con­tent vis­ual snip­pet users see when brows­ing so­cial apps. The fol­low­ing meta tags are cru­cial: ‘og:ti­tle’, ‘og:de­scrip­tion’, ‘og:url’ and ‘og:im­age’.

6 Web Share

When a PWA is used in stand­alone or fullscreen mode there is no URL bar or browser’s UI on mo­bile op­er­at­ing sys­tems which means a user can’t share the cur­rent con­tent via mes­sage or so­cial net­works. On browsers, such as Chrome on An­droid the app can use the re­cent Web Share API that will trig­ger the na­tive share dia­log from a cus­tom user in­ter­face el­e­ment. On a click han­dler, the app will trig­ger a code sim­i­lar to nav­i­ga­tor.share({ ‘ti­tle’: doc­u­ment.ti­tle, ‘url’: lo­ca­tion. href}). For other browsers, a PWA can use deep links to com­mu­ni­cate with na­tive apps. For ex­am­ple, if a link nav­i­gates to https://wa.me/<pho­nenum­ber>/?text=<text>, the What­sapp app will be opened and will open a chat to the spec­i­fied phone num­ber and will fill the spec­i­fied text. If no phone num­ber is spec­i­fied, the user will pick a contact from a dia­log.

7 App’s life­cy­cle

In tra­di­tional web de­vel­op­ment a web­site is in mem­ory and ex­e­cu­tion, while the tab is opened even if it’s not on the screen. In the PWA world users don’t close apps, they get out of them with the home but­ton or a ges­ture. Un­der­stand­ing the life­cy­cle is crit­i­cal to pro­vid­ing a good user ex­pe­ri­ence to your au­di­ence. On IOS, a stand­alone PWA gets dis­carded every time the user moves to another app or home screen, and can be de­tected through Page Vis­i­bil­ity events. Us­ing Chrome or a stand­alone PWA on An­droid, the web con­tent will freeze when in the back­ground (a ‘freeze’ event will be fired) and might re­sume later. Some­times the user gets back to the app af­ter sev­eral hours or days; at that point, the con­tent is dis­carded from mem­ory, and it will load from scratch. Check­ing ‘doc­u­ment. was­di­carded’ and reload­ing the pre­vi­ous state of the app will cre­ate a con­sis­tent ex­pe­ri­ence.

8 Stor­age lim­its and per­sis­tency

When a Ser­vice Worker in­stalls all the as­sets from your PWA, these ques­tions typ­i­cally ap­pear: how much space can the app use and for how long? On IOS, each Ser­vice Worker can only store up to 50MB, and they will be unin­stalled from the sys­tem af­ter a few weeks of in­ac­tiv­ity. The app’s icon will still be there, so next time the con­tent will be down­loaded again. On An­droid, the max­i­mum pack­age size is a per­cent­age of the user’s avail­able space and will be stored un­til there is no space. On some browsers, a PWA can re­quest Per­sis­tent Stor­age via ‘nav­i­ga­tor.stor­age.per­sist()’.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.