Image for post
Image for post

Building Progressive Web Apps with Laravel

— A simple introduction

IO
IO
Aug 2, 2017 · 5 min read

Progressive Web Apps or PWAs are the it thing in web development at the moment. Why wouldn’t it be? The promise of a website behaving like a native app, without all the hassles.

Image for post
Image for post

What do I need for a PWA?

Image for post
Image for post

Step 1: Update Laravel Mix

node_modules/laravel-mix/setup/webpack.config.js.
--config=node_modules/laravel-mix/setup/webpack.config.js.
--config=webpack.config.js.
let path = require('path');
let glob = require('glob');
let webpack = require('webpack');
let Mix = require('laravel-mix').config;
let webpackPlugins = require('laravel-mix').plugins;
let dotenv = require('dotenv');
let SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); //Our magic
plugins.push(
new SWPrecacheWebpackPlugin({
cacheId: 'pwa',
filename: 'service-worker.js',
staticFileGlobs: ['public/**/*.{css,eot,svg,ttf,woff,woff2,js,html}'],
minify: true,
stripPrefix: 'public/',
handleFetch: true,
dynamicUrlToDependencies: {
'/': ['resources/views/welcome.blade.php'],
'/articles': ['resources/views/articles.blade.php']
},
staticFileGlobsIgnorePatterns: [/\.map$/, /mix-manifest\.json$/, /manifest\.json$/, /service-worker\.js$/],
runtimeCaching: [
{
urlPattern: /^https:\/\/fonts\.googleapis\.com\//,
handler: 'cacheFirst'
},
{
urlPattern: /^https:\/\/www\.thecocktaildb\.com\/images\/media\/drink\/(\w+)\.jpg/,
handler: 'cacheFirst'
}
],
importScripts: ['./js/push_message.js']
})
);

Step 2: The manifest file

{
"short_name": "Shots",
"name": "Shots App",
"background_color": "#2196F3",
"orientation": "portrait",
"icons": [
{
"src": "icons/icon-36.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "icons/icon-48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "icons/icon-72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "icons/icon-96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "icons/icon-144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "icons/icon-168.png",
"sizes": "168x168",
"type": "image/png"
},
{
"src": "icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-256.png",
"sizes": "256x256",
"type": "image/png"
}
],
"start_url": "/?launcher=true",
"display": "standalone"
}

Step 3: Check for PWA support

if ('serviceWorker' in navigator && 'PushManager' in window) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
Image for post
Image for post

Done

Gotchas

Conclusion


IO Digital

At IO we conceptualise, build and commercialise tech…

IO

Written by

IO

We build and develop tech innovations.

IO Digital

At IO we conceptualise, build and commercialise tech innovations that we believe will bring the power of the internet to the world in new and useful ways. This is where we share some of our ideas with the world.

IO

Written by

IO

We build and develop tech innovations.

IO Digital

At IO we conceptualise, build and commercialise tech innovations that we believe will bring the power of the internet to the world in new and useful ways. This is where we share some of our ideas with the world.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store