Must-Have Functionality for a Progressive Web App Platform
by Michelle Lawrence | Last Updated: Jun 9, 2020
HTTPS As many consumers transition important aspects of their lives into the digital scape, cybersecurity becomes a real issue. Luckily, one of the four technical requirements to create a PWA is that they’re served over HTTPS. Your confidential information is safe with PWAs.
Service Worker We like to say that a service worker is the magic of the PWA; the API caches data as the user browses and allows the PWA to run offline, so even when you’re in an area with limited to no service, you can still access the PWA.
Web App Manifest News flash: consumers don’t want to go to the app store to download a native mobile app, but we do want to have it saved on our home screen. What’s the solution here? A web app manifest. The web app manifest is the code that populates an app-like icon when the PWA is saved to the user’s home screen and tells the browser to treat it like an app, not a website. And because you don’t have to go to the app store to download a PWA, you have the opportunity to have users install and access your PWA in some pretty cool ways. You could have users “tap” to download your PWA with near-field communication (NFC) or you could have them simply send a text with a link to download the app.
Application Shell Architecture (App Shell) Think of the app shell as the frame for your PWA. It makes what you love about native mobile apps (like the navigation bar and drop-down menu) stationary, so that every time you come back to the PWA, it loads instantly. This is what makes PWAs incredibly fast.
Crush-worthy Components You can be the best PWA builder in the world, but without a sleek design, users may be left with a lack-luster experience. To avoid this, a good place to start is by bringing in Ionic framework to your platform. With buttons, cards, and rich-text, you can design a mobile app that might make some green with envy. While we’re on the topic of mobile design, keep your buttons and link in the “safe zone”. No one wants to get a thumb-cramp trying to reach a link on the top of the screen. Intuitive Navigation Yes, cool features and a sleek design are some of the first things that come to mind, but without intuitive navigation, your mobile experience will be rendered useless. Users don’t want to be bombarded with annoying pop-up messages or spend a long time searching for something on an app. Make your navigation simple and collapsible when designing your PWA. Can We Get an Example? Now that we’ve discussed some of the must-have functionality for PWAs let’s discuss some examples that use this functionality. One of our favorites is the Starbucks PWA. We love it so much it actually won our PWA bracket challenge a few years back. The Starbucks PWA is not only faster than its native mobile app counterpart, but it’s 0.4 percent the size. Can’t get enough of PWAs? Be sure to check out our Marketer’s Guide to Progressive Web Apps.