Case Study: Mister Sushi Progressive Web App

Mister Sushi is a long-standing Pacific Beach staple serving a wide range of Japanese dishes with a focus on sushi and sashimi. PINT built Mister Sushi a website utilizing Progressive Web App technology so that it:

• Is available on all devices without barriers
• Loads quickly and consistently
• Has offline capabilities
• Can be added to the home screen

Client:Mister Sushi
Location: San Diego
Industry: Restaurant
PINT Services: Information architecture, design, image research, front-end development, quality assurance, security consulting
Technology: HTML, CSS, JavaScript, Web Components via Polymer, Google App Engine Hosting & Deployment

The new Mister Sushi site has a score of 100 on Lighthouse, the measurement tool for PWAs, and has around 70% mobile and tablet traffic.

Challenge

The old Mister Sushi website was built using flash, so instead of getting information about delicious sushi and sashimi, a lot of users were getting this error instead:

Mister Sushi needed a completely new site that would showcase their excellent food offerings, help people find their location, and communicate their story, all while using the latest technology.

Technical requirements for the new site included:

• Availability on all devices
• Load quickly and consistently
• Increased accessibility
• Stricter adherence to best practices
• Offline Capabilities
• Save to homescreen feature
• Analytics implementation

Solution

Progressive Web App

PINT built Mister Sushi a new site using Progressive Web App technology. We utilized a few different technologies that provided Mister Sushi with a fast-loading, device agnostic, accessible website.

Google App Engine

PINT outfitted Mister Sushi with servers using Python as light Flask applications on Google’s App Engine infrastructure. This setup on Google App Engine ensures near 100% uptime without extra ongoing maintenance, meaning Mister Sushi is always accessible and there is less time spent maintaining the site!

Service Workers

Another newer technology PINT implemented on the Mister Sushi site is using a service worker. A service worker is a browser API that gives you fine-grained control of what content from the site is cached and how it is cached.

That means that once the end user has visited the site once, each repeat visit has near-instantaneous load times and is available offline. Repeat visits to the site do not require an internet connection.

Add to Homescreen

Because the Mister Sushi site is available offline for repeat visitors, PINT included the “add to homescreen” prompt when the site is loaded on an Android device. If a user clicks the button, the Mister Sushi site is added to the phone’s homescreen.

Once added to homescreen, the user can access the site anywhere, anytime. If the site content is changed, the PWA will download the new content once it’s connected to the internet.

Google Analytics

To track users actions and provide insight to how the website is performing, PINT installed Google Analytics on the Mister Sushi site. Google Analytics will help Mister Sushi identify its target audience and monitor their behavior on the site to inform any site updates.

Editor

PINT is currently working on a “Daily Special” section of the Mister Sushi site that will show a featured item of the day. Because this is a daily special, it requires frequent updates. But, like most restaurants, no one who works at Mister Sushi is a web developer.

To make the daily special section easy to update, PINT is building a decoupled content management system that requires no knowledge of coding at all. Once logged in, the user will be able to use the editor to type and style the content without having to know HTML, CSS, or any other coding languages.

Results

Previously, the Mister Sushi site was inaccessible on mobile. Now, the site is available on all devices and browsers. Since launch, the site’s traffic has been close to 70% mobile and tablet.

Because the site is using Progressive Web App technology, another measurement of site success is its Lighthouse score. Lighthouse is the standard scoring system for Progressive Web Apps, Performance, Accessibility, and Best Practices. Overall, Mister Sushi has a collective Lighthouse score of 100 on the PWA Directory!

The individual scores are shown below:

If you think your site could benefit from reduced load time and increased accessibility, get in touch.