Progressive Web Apps

HTML All The Things - Web Development, Web Design, Small Business

In this episode we'll be discussing the ins and outs of progressive web apps including what they are, some of their functionality, and what challenges/limitations they still face.

Segment 1 - What is a PWA

• As mentioned on the show a few times before, PWA stands for Progressive Web App, which is the evolution of the standard web app
• If you’re new to all of this, the breakdown is rather simple:
  • Website - A website is a more basic presence on the web, it delivers content to a visitor (ie blog posts, news articles) Popular examples would be news websites, tech blogs, marketing websites, and small business sites.
  • Web App - Functions similarly to a website, however, acts more like an app that you’d see on your phone that performs a function. For example, there are online image editors where you can upload your photo and edit it right in the browser. This editor is a web app because the user interacts with it and computing happens (via the photo edits), content isn’t being delivered in the same way as a written article, or marketing information to the user. Unlike apps that run on your phone however, web apps are limited by the browsers limitations meaning that natively they can’t be installed, and they generally don’t have access to certain functions that natively installed apps can take advantage of, usually due to permissions/security on a given device.
  • Progressive Web App - PWAs are the natural evolution of the standard web app, whose arguably biggest feature is the ability to run offline through the usage of service workers. Basically, they’re a web app that runs in the browser like any other, however, they can be installed and start leveraging more of those features that natively installed Android apps can . They’re still limited by the same restraints you can see from other webview apps and they still run the same codebase as their web app counterparts, not the native Java like other Android apps. In addition, they aren’t in a centralized location like the apps found in the Google Play store, you generally have to grab them from the web app’s website. If you visit the Twitter web app from your Chrome browser on Android you’ll see an “Add to Home Screen” button, if you do that you’re installing the Twitter PWA, but if you look up Twitter in the Google Play Store that’s a different native app
• PWAs are getting more and more powerful and a lot of the walled off features are being broken down. Just a few short years ago you couldn’t get push notifications from your browser, now they’re rather commonplace for chat and news sites.
• Accessing hardware was also an issue years ago, getting access to things like a webcam or a microphone, but now you can use a chat app like Skype right in the browser via video or voice chat - these limitations are quickly being done away with. Things like NFC access, however, is still a limitation last time I checked.
• In terms of accessing PWAs, as mentioned before, there isn’t a centralized location for them all. Unlike on Android where the Google Play Store houses the vast majority of the available native apps, PWAs are generally downloaded from the web app’s website. However, even this limitation is starting to change with new ways to list PWAs in both the Google Play Store and Microsoft Store starting to make their way into the developer toolbelt
• With these restrictions breaking down the main limitation is really with the codebase. Since a PWA isn’t written in the native language of a given platform, but rather runs more like a website/web app, Javascript does come with some limitations namely that it is a single-threaded process. However, there are workarounds for this, and Javascript itself is becoming more user friendly and more functional with every release - just like PWAs
• From my experience, iOS has “less adopted” PWAs as of right now, however, I can see that limitation being lifted at some point in the near future in my opinion. One example would be that No BS News for Reddit can be installed on Android phones in it’s demo form right now, but that’s not the case on an iPhone. However, the app does still function in the browser which shows off the versatility of a PWA
• Another thing to keep in mind is that a lot of corporations will have strict policies on what they support. For example, some places may say that if a certain browser’s usage worldwide is above 2% then that browser must be supported. This creates a problem because oftentimes it’s an older version of a browser like Internet Explorer, and since PWAs are so new, there will be severe limitations on what a developer can do if he needs features to work on such old software
• In conclusion, a PWA is the evolution of the standard web app. It runs in the browser like any other website/web app, but has additional features like offline functionality and the ability to be installed. PWAs are quickly approaching the functionality of standard native apps, which is good news for small developer teams that have a web app and no time to develop a completely different native app for smartphones. The real question is whether PWAs will take over native apps, or will they just be another option for developers?
• Here are a couple links comparing and contrasting PWA functionality vs native app functionality
  • https://www.strv.com/blog/3-limitations-of-progressive-web-apps
  • https://www.quora.com/Whats-the-difference-between-Progressive-web-apps-and-regular-web-apps
  • https://stackoverflow.com/questions/35504194/what-features-do-progressive-web-apps-have-vs-native-apps-and-vice-versa-on-an

Segment 2 - Make your Web App a PWA

• Quite a simple process if your application doesn’t make any external api calls
• Just need a manifest json file that gives browser information such as app names and icon locations
• Web app must be served with HTTPS and have a basic service worker
• What that essentially accomplishes is allowing supported browsers/operating systems to detect your app as a PWA and cache it to be served from cache instead of the network.
• The power of PWA’s really comes with the service worker implementation.
  • With service workers we create cached server calls, so if you hit a external API or your own servers API the service worker can cache them and then serve the responses from the cache instead of the network API calls.
  • You can also set up the service worker to detect changes and update the caches with those changes (this has caveats)
• With vuejs specifically, the vue cli can be used to create a app with PWA functionality already built in or even add PWA functionality to an existing app
• This creates all the files necessary for the browser to detect your website as a PWA
• You’ll need to edit the information in your manifest file and add any functionality to your service worker you need other than what it already has built in which is
  • Caching all css, js, img and html files that are in the application
• Essentially this allows a PWA to run more like a native application in the sense that it doesn’t rely on the speed or presence of a network connection
• The PWA landscape is always changing and evolving so features are constantly being worked on and usually added from browser to browser

Segment 3 - State of PWAs

• Currently PWA’s are supported on every major browser to some extent. Chrome has the deepest integration and support for PWA’s
• Some really cool features that chrome gives you is the ability to add a PWA to your desktop/home screen on all operating systems but iOS. So on Android and windows for instance if the application is a PWA you can go into the 3 dot menu in the top right corner and there will be an option to Install in there. This will add it to your application and for most purposes will behave just like a native application of that operating system.
• Great use cases for this can be internal business logic apps, like if a company needs a application for their new employees to take a safety course it can be easily made as a PWA.
• The large advantage of PWA’s to development teams is how quickly they can be built, deployed and tested across multiple platforms.
• Only needing a small development team to launch a application is a huge advantage for small startups and businesses, as it allows for much quicker and agile development
• The greatest benefit to users is the speed of the applications, since the application can be mostly served from cache the user won’t see as much loading going from page to page
• There are of course some inconsistencies with PWA’s currently. iOS being the main one
• On iOS most crucial features are supported, like service workers but with quite a few caveats
  • No background syncing,
  • no push notifications,
  • no app theming
  • No prompt to install from the browser
  • and the major one is that service worker events are not supported. So we can’t get information such as new update available messaging
• That was a huge challenge recently because one of the applications I’m currently being contracted to work on is a PWA that has to run on iPads. Not having a consistent update experience was a major problem for testing and deploying updates. There was a work around which involved setting a workbox (framework for creating service workers) option called skipwaiting to true, which essentially now checks for new updates on every single load and loads them right away.
  • Disadvantage to this is a larger network call is made on every load unless no network is detected
• PWA’s also use a slightly different renderer on iOS then safari and therefore has some minor inconsistencies that need to be QA’d and fixed
• Thankfully most issues can be worked around and it still provides for a much better experience then the browser version
• Resources:
  • https://developers.google.com/web/progressive-web-apps/
  • https://devchat.tv/views-on-vue/vov-055-progressive-web-apps-with-aaron-gustafson-live-at-microsoft-ignite/

Web News - Flagship Smartphone UX

• The trend among smartphones for 2018/2019 are:
  • Very tall, with an aspect ratio of something like 2:1
  • Very high screen to body ratio - almost no bezels
  • Have notches or cutouts in the screen to accommodate for front-facing cameras and sensors
• These trends create a major set of UX/UI issues that affect web developers, app developers, and device manufacturers because they need to ensure that content is not being rendered right where a piece of the screen is missing, not to mention create some sort of elegant solution to allow the UI to “avoid” the notch or cutout without annoying the user
• In addition, in recent years vertical video, photos, and portrait apps have been on the rise because phones are generally easier to hold in the portrait orientation, but since they’ve been getting taller and taller, it’s difficult for users to reach any UI elements at the top of the screen - especially with one hand
• We’ve seen manufacturers try and combat this with various iterations of one-handed modes which generally shrink the screens, or with UI redesigns that makes UI elements favour the bottom of the screen
• Gestures are starting to take off, allowing users to access the notification shade at the top of the screen by just swiping down anywhere on the home screen, among other innovative gesture functions
• From this information there are a couple of UX issue that stand out to me
  • Notches and cutouts are all different on different devices, and they are handled differently by different manufacturers
  • The bottom of the screen is getting very crowded with things like the android nav bar, the chrome bar (depending on if you use that UI layout), and then navbars for touch interfaces on websites
  • Gestures and UX workarounds for one-handed use are adding to the learning curve of devices that were once rather easy to use

You can find us on...

Facebook | Twitter | Instagram

RSS | Patreon | Spotify

Medium | YouTube | GitHub

Reddit