How to Build a Progressive Web App With Sapper

Progressive Web Apps (PWAs) are modern web applications that provide a native-like experience, combining the best of web and mobile apps. Sapper, a framework for building web applications using Svelte, makes it remarkably easy to create a PWA. Below is a step-by-step guide on how to build a Progressive Web App with Sapper.

Step 1: Set Up Sapper

Start by setting up a new Sapper project. You can do this by using the command line:

npx degit "sapper-template#rollup" my-app
cd my-app
npm install

This command creates a new Sapper app using the Rollup bundler. You can swap `rollup` with `webpack` if you prefer that tool.

Step 2: Configure the Manifest File

To make your app a Progressive Web App, you need a manifest file. Create a file named manifest.json in the static directory:

{
  "name": "My Sapper PWA",
  "short_name": "SapperPWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#317EFB",
  "icons": [
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

This manifest.json file provides important information about your web app to the browser, such as the app's name and the icons to use.

Step 3: Add Service Worker for Offline Capability

Next, create a service worker to cache your application and enable offline functionality. Create a new file called service-worker.js in the static directory:

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-app-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/global.css',
        '/manifest.json',
        '/icons/icon-192x192.png',
        '/icons/icon-512x512.png'
      ]);
    })
  );
});
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

This service worker first caches essential resources during the installation phase and serves them from the cache when available.

Step 4: Register the Service Worker

To ensure the service worker is registered when the app loads, add the following code to your main file, typically located at src/client.js:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then((registration) => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch((error) => {
      console.error('Service Worker registration failed:', error);
    });
}

This script checks for support for service workers in the browser and registers your service worker for use.

Step 5: Test Your PWA

Once you have everything set up, it’s time to test your Progressive Web App. You can do this by running:

npm run dev

Navigate to http://localhost:3000 and open the browser's developer tools. Go to the Application tab and check under the Manifest and Service Workers sections to ensure they are set up correctly.

Step 6: Deploy Your PWA

To share your PWA with the world, you need to deploy it. You can deploy your Sapper app to various hosting services like Vercel, Netlify, or Firebase Hosting. Follow their documentation for specific deployment instructions.

Conclusion

Building a Progressive Web App with Sapper is a straightforward process that combines the simplicity of Svelte with the robust features of PWAs. By following these steps, you can create a fast, reliable, and engaging app that users will love.

How to Build a Progressive Web App With Sapper