Progressive web app3 - Smart LunWEI LUN HUANG 2 Introduction of Progressive Web App Because the early Web App is still not able to run offline, receive push notifications 0or links

WEILUNHUANG 1

p1

WebDevelopment-ProgressiveWebApp

WEILUNHUANG

WEI LUN HUANG 2

IntroductionofProgressiveWebApp

BecausetheearlyWebAppisstillnotabletorunoffline,receivepush

notificationsorlinksintohardware0,GoogleofferedChromeAppservicesince2013.

However,bycontinuingoperatewithwebstandardorganization,Googleannounceda

newapproachfordevelopingwebappsforAndroidinthe2015WebSummit

Conference.TheinnovativetechnologyprovidesServiceWorkerandWebPushand

advancedAPItobuildthemutil-browsercrossingapplicationcalled“ProgressiveWeb

App(PWA)”.PWAwillbeabletousein-devicehardwarelikepushnotifications,and

offlinework.Inaddition,therewillbeotherfeaturesdirectlyinstallintouserdesktop,

suchasaddinganicontothehomescreen,launchinginfull-screenwithURLbarand

displayingasplashscreeneffectthatusesadvancedwebcapabilitiesfordeliveringan

app-like(actasNativeApp)userexperience.

Bylookingbacktheevolutionofwebprograms,“XMLHTTPRequest”was

availablewidelysinceIE5andintheGecko-basedbrowser(qwebbrowserengine

usedinapplicationsdevelopedbytheMozillaFoundation1)fromasearlyas2000.

Later,AJAX(themethodofexchangingdatawithaserverandupdatingpartsofaweb

pagewithoutreloadingtheentirepage2)happenedinthenext5years.Recently,PWA

hastakenoverandseemstohavebecomethemainstreamapplication,these

WEILUNHUANG 3

principlesofwebdevelopmenthavecertainrulestofollow:UsingURLsandlinksas

thecoreorganizingsystem,havingaccessibilityinmarkupandstylingtohumansand

searchengines,providingadditionaluserinterfaceandsystemcapabilities,and

implementingwithoutpermissionorpaymentinstandards-based3.Brillianttoolsthat

haveattemptedtogainaccesstoallowdeveloperstobuildwithclient-sidetechnology

formobilewebapplications,suchasAdobeAIRApplications,WindowsStoreApps,

Cordova,PhoneGapandotheronlineplatforms.Comparatively,PWAprovidedmore

technologypossibilityandexpansibility.FunctionslikeaccesssystemAPIs,asetof

toolsforbuildingsoftwareandapplications,createblocksforprogrammerstomake

programmingeasiertodevelop4.Usersusedtodownloadentirelypackagednative

apps,butnowPWAprovidesabetterexperiencetoenhancetheimprovementofweb.

FeaturesofProgressiveWebApp

UnlikeNativeAppneedstobedownloadedinGooglePlayorAppleStore,

ProgressiveWebApppresentsanapp-likewebthroughbrowser.Inaddition,PWAis

anexistingappthatcouldbuildwithJavaScriptFramework.Asaresult,thedevelopers

caneasilyimplementwithprogressivewebprogramming.Inthiscase,“progressive”

WEI LUN HUANG 4

meansthatthemorefeaturesbrowsersupports,themoreprogressivelyenhancedin

datarenderingcouldbe.Theperformancedependsclient-sidedevices,soifthe

environmentwerenotallowed,PWAwouldevolvefrompagesinbrowsertabstohave

immersive,top-levelapps,andmaintainingtheweb'slowfrictionateverymomentin

ordertoachieveapp-likeexperience5.

ProgressiveWebApplicationsfeaturestakeadvantagetobringthebestofmobile

sitesandnativeapplicationstousers.Thesefeaturesincluded:ResponsiveWebDesign

(RWD),ServiceWorkers,WebAppManifest,andApplicationShell.

-ResponsiveWebDesign(RWD)

ProgressiveWebAppappliedthefoundationofResponsiveWebDesign,whichmeans

thecontextsaresensitiveandcross-platformforbuildinguser-friendlyinterface6.In

otherwords,PWAnotonlybeanAppbutalsoberegardedascomputersoftware.The

datastoresinCloud,andthecontentindifferentdevicesappropriatelyadaptforuser.

-ServiceWorkers

Aserviceworkerisascriptthatyourbrowserrunsinthebackground,separatefroma

WEILUNHUANG 5

webpage,openingthedoortofeaturesthatdonotrequireawebpageoruser

interaction.7ServiceWorkersaretoprogressivewebappsasXMLHTTPRequestwasto

AJAX.Forexample,itactsasaclientsideproxywritteninJavaScriptinPWA,soyou

cancache(filesareloadedonceoverthenetworkandthensavedtothelocaldevice)

assetslocally.Nomatterwhatrathernetworktheuserisconnectedto,appsloadnear

instantly.Appscanevenworkofflinebecausetheserviceworkerwillrespondto

networkrequests7.Moreover,serverworkercandefinewhateventhastowakeitup,

suchaspushmessagescanwakeupaserverworker.

Anoverlysimplifiedversionoftheserviceworkerlifecycleonitsfirstinstallation.p2

WEI LUN HUANG 6

-WebAppManifestfile

Webappmanifestsstoremetadataforaprogressivewebapp.ItprovidesMetadatato

tellthebrowserhowitshouldlookwheninstalled.Icons,description,colors,and

relatedinfoconvertinJSONformat7thatletsbrowserscreatehigh-qualityexperiences

forthelaunchericon,taskswitcher,andsplashscreen.Smoothanimations,scrolling

andnavigationskeeptheprocesssilky.“Addtohomescreen”functioninbrowserput

thePWAondevices’desktophelpusersre-engages.Inorderfortheappinstall

promptstodisplayinappmustcontainvalidserviceworkerregisteredandWebApp

manifest,beservedoverHTTPS(thesecureversionofHTTP,meansall

communicationsbetweenbrowserandwebsiteareencrypted.8)andbevisitedtwice,

withatleast5minutesbetweenvisits.

-ApplicationShell(AppShell)

AppShellistheminimalwebprogrammingthatisrequiredtopowertheuser

interfaceofPWAandisoneofthecomponentsthatensurereliablyforgood

performance.IntheApplicationShellmodel,server-siderenderingshouldbeusedas

muchaspossibleandclient-sideprogressiverenderingshouldbeusedasan

enhancementinthesamewaywhenserviceworkerissupported.5Itsfirstloadshould

WEILUNHUANG 7

beextremelyquickandimmediatelycached.Everyconsecutivetimethatuseropens

theapp;theshellfilesareloadedfromthelocaldevice'scache,whichresultsinrapid

startuptimes.

Manysitesorappsassemblethepageandallofitscontentasonebeforesending

itdowntothebrowser.PWAchangesthismodelbyseparatingthepartsthatchange

oftenessentiallythecontentfromthepartsthatdonotchangeoften.Theappshellcan

supportthecontenttodownloadanddisplayandmayevenstorethecontentinalocal

databasesothatitcanoperatenexttimeonopenonslownetwork.

SpeedIndexinPWAUniversalRenderPerformance.p3

WEI LUN HUANG 8

BusinessesinProgressiveWebApp

Theaverageuservisitsmorethan100websitesontheirmobiledeviceevery

month,andexpectationsforspeedandqualityhigherthanever.InContrast,the

averageNativeAppsuseronlyvisits25appspermonthbymobile.

MobileAppusercomparewithMobileWebUserP4

ProgressiveWebAppisaweb-basedapplication,whichcanlightlyinstallintouser

desktop,withoutactuallysearchinganddownloadingintheappstore.Accordingthe

EveryStepCostsYou20%ofUsers(2012),whichwaswrittenbyGaborCselle9,workas

ProductManagerinGoogle,describedthateverystepyoumakeauserperformbefore

theygetvalueoutofyourappwillcost20%ofpotentialusersinaconsumermobile

app.Asaresult,lettinguserexperiencedalongprocessinmobiledeviceswillbe

confusingandlosingofcustomerprofits.

WEILUNHUANG 9

Percentageoftypicalconsumerappfunnelp5

Furthermore,theresearchfoundthatitwasexpensivetogetusertoactuallyusetheir

nativeapp.Fiksuisacompanythatkeepstrackingnativeapplicationecosystems.

BelowindexshowsthatthecosttogettingausertotryoutaNativeAppbyusing

applicationadsrangesfrom$1-$2upanddownbefore,andthatnumberhasincreased

from$2ayearagotoover$4today.

TheCPMindex,measuringthecostperthousandadimpressionsacrossawiderangeofexchangesand

adformats,revealstherelativecompetitionformobileadimpressions.p6

WEI LUN HUANG 10

Flipkart,India’slargeste-commercesite,decidedtocombinetheirwebpresence

andnativeappintoaProgressiveWebApplication.Afterthat,ittriplesthetimeonits

websitewithefficiencyandhasresultedina70%increaseinconversions.

AnotherexampleisAliExpress,partoftheAlibabaGroupwaslookingforawayto

providetheirwebuserswiththebenefitsoftheirapp,suchastheabilitytowork

offline,performance,andre-engageusers.Finally,theyuseProgressiveWebApp

reachtheincreasingconversationby104%thanbefore.10

BusinessInsider,MostAmericansDownloadZeroAppsEveryMonth,Steven

Tweedie(2014)evenwrote“65.5%ofUSsmartphoneusersdon'tdownloadanynew

appseachmonth.”Thestaticsshowedthatdespiteofpeopleareusingtheappsthey

havemorethanever,onlyapproximatelyathirdofU.S.smartphoneuserschooseto

tryanewapp11.

SmartphoneUser’sNumberofAppDownloadsPerMonthp7

WEILUNHUANG 11

ProgressiveWebAppsV.SNativeApps

ThemajoradvantagesofProgressiveWebAppsofferfeaturesthatnativeapps

lackisitcanreplaceallthefunctionsofnativeappsandwebsitesatonce.Inthe

beginning,PWAcanbereliable,loadquicklyandeasilydiscoverthecontentbysearch

engines.Ontheotherhand,thecontent-centricmethodnativeappwillnotshow

amongappstoresearchresultsforcontentcannotexposeitscommunitieswidelytothe

appstoreasindividual.Next,forthereasonthatanypageorscreenhasabookmarkor

directlink,itwillbeeasilytosaveorshareinformationinsocialmedia.Furthermore,PWA

alwayssynchronizefreshdata,thereisnoneedtogothroughtheappstorestopush

updatesanymore.Moreover,PWAhasuniversalaccess(basedonweb),butappstores

havesomerestrictionsandpoliciesincontrol.Finally,PWAcanbeextremelyimportantin

largedatasavinglikeemergingmarketswithslowInternetaccess.Forexample,

e-commercewebsiteKongacutdatausageby92%forthefirstloadbymigratingtoa

PWA.12

However,thedisadvantageofPWAtoNativeAppisitlacksofprivacypermission,

suchasusercontacts,calendar,alarmsandotherfeatures.Usercannotgetaphonecallor

usedevice’sflashlight.Itdoesnotallowaccessingsystemliketaskmanagement,oreven

WEI LUN HUANG 12

modifyingsystemsettings.Inthewebsite,Isserviceworkerready13,showsthatnotallthe

browserscansupportserviceworkerrunning.Inaddition,inanotherwebsite,WhatWeb

CanDoToday14,hasseveralpostingsthatlistfeaturesstillnotavailableforweb.Moreover,

PWAisnotfeasibleforSafaritohaveapop-up“addtohomescreen”function.Iwouldsay

thatthegapbetweenWebandAppstillexist.

ProgressiveWebAppFinalThought

ForthenewPWAs’developingstrategy,Googleannouncedthattheydecidedto

terminateChromeappintwoyearsafterduetoWindows,MacandLinuxonly1%user

frequentlyuseit.ThePWAcanbeforecastinginfuturewebfiery-trend.AlthoughPWA

usedtoleavesomeproblemsforcompatibilityiniOSplatform,theprompttoinstall

thewebappiscurrentlyshownundervaryingconditionsacrossOpera,Chromeand

theSamsungbrowser.ApplehasindicatedinterestinprogressivewebappsforiOS,

butatthetimeofwriting,itstillreliesonMetatagsforwebappconfigurationandthe

applicationcacheforofflineuse.Bypayingattentionatnewreleasingproducts,Apple

seemstointegrateappintotheirownsystem.Onthecontrary,Googlewillcontinue

promotingProgressiveWebApptodevelopthewebmore“App-like”.

WEILUNHUANG 13

Reference

0RahulRoy-Chowdhury,ProductMangersfromGoogleDevelopmentteam

1Wikipedia,Listofwebbrowsers,Gecko-basedbrowserdefinition,

https://en.wikipedia.org/wiki/List_of_web_browsers

2SegueTechnologies(2013),WhatisAjax,http://www.seguetech.com/ajax-technology/

3InfrequentlyNote(2015),ProgressiveWebApps:EscapingTabsWithoutLosingOurSoul(2015),

https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

4MuleSoftVideos(2015),WhatisanAPI?,https://www.youtube.com/watch?v=s7wmiS2mSXY

5AddyOsmani,GettingstartedwithProgressiveWebApps(2015),

https://addyosmani.com/blog/getting-started-with-progressive-web-apps/

6JayBryantandMikeJones,ProHTML5Performance(2012Published),Chapter4-Responsive

WebDesign

7W3Cschool.com,JSON–Introduction,http://www.w3schools.com/js/js_json_intro.asp

8InstantSSLbyCOMODO,WhatisHTTPS,HTTPVSHTTPS,

https://www.instantssl.com/ssl-certificate-products/https.html

9GaborCselle(2012),EveryStepCostsYou20%ofUsers,

http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

10GoogledevelopersWebsite,https://developers.google.com/web

11StevenTweedie(2014),BusinessInsider,MostAmericansDownloadZeroAppsEveryMonth,

http://www.businessinsider.com/how-many-apps-people-download-per-month-2014-8

12Googledevelopers,CaseStudy,https://developers.google.com/web/showcase/2016/konga

13IsServiceWorkerReady?,https://jakearchibald.github.io/isserviceworkerready/

14WhatWebCanDoToday?,https://whatwebcando.today

WEI LUN HUANG 14

p1Max(2016),IONIC,WhatareProgressiveWebApps?,

http://blog.ionic.io/what-is-a-progressive-web-app/

P2MattGaunt,ServiceWorkers:anIntroduction,

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

p3AddyOsmani,SpeakDeck,ProgressiveWebAppsAcrossAllFrameworks,

https://speakerdeck.com/addyosmani/progressive-web-apps-across-all-frameworks

p4ProgressiveWebApps-ChromeDevSummit(2015)Video,

https://www.youtube.com/watch?v=MyQ8mtR9WxI

P5GaborCselle(2012),EveryStepCostsYou20%ofUsers,

http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

p6Fiksu,CPMIndex:September2016,https://fiksu.com/fiksu-dsp-indexes/#analysis

p7ComScore’sU.S.MobileAppReport(2014),Insights,

https://www.comscore.com/Insights/Press-Releases/2014/8/comScore-s-US-Mobile-App-Report-Avai

lable-for-Download?_ga=1.27795452.1596473589.1407244908